Questions on Kendo UI for jQuery Forum

1 answer

328 views

Checkbox selection does not persist in form

I am applying filters on my grid using external form window in my UI. The form window contains one checkbox and radio buttons. The checkbox and radio button works fine when I select them and submit the form. But when I reopen the form window, all other selections persist except the checkbox and radio button.

I am using kendo version 2017.1.118 and jquery version 3.0.0. The external controller is written in C#.

I have attached 3 screenshots here- opening the form window for the 1st time, applying filters and submitting the form, and reopening the window after previous submission.

(Note that the "mins" radio button is selected by default)

Here is my script where I include the dom elements of the form window:

01.<script id="logFilterWindowTemplate" type="text/x-kendo-template">

02. <div id="popupWindow" class="k-popup-edit-form">

03. <div class="timesection">

04. <div id="timewindow">

05. <div class="heading">By Time Window</div>

06. <div class="k-edit-label"><label>Last:</label></div>

07. <div class="k-edit-field">

08. <div><input class="filter lastntime-filter" id="timetext" /></div>

09. <div class="radiotime">

10. <input type="radio" id="mins" name="lastntime" value="mins" checked="checked" /><label for="mins"> mins</label>

11. <input type="radio" id="hours" name="lastntime" value="hours" /><label for="hours"> hours</label>

12. <input type="radio" id="days" name="lastntime" value="days" /><label for="days"> days</label>

13. </div>

14. </div>

15. </div>

16. <div id="timerange">

17. <div class="heading">By Time Range</div>

18. <div class="k-edit-label"><label>Start Time: </label></div>

19. <div class="k-edit-field"><input id="startdate" name="startdate" class="filter start-date-time-filter" placeholder="Select log start time" /><span class="k-invalid-msg validation-msg" id="startvalidation" data-for="startdate"></span></div>

20. <div class="k-edit-label"><label>End Time: </label></div>

21. <div class="k-edit-field"><input id="enddate" name="enddate" class="filter end-date-time-filter" placeholder="Select log end time" /><span class="k-invalid-msg validation-msg" id="endvalidation" data-for="enddate"></span></div>

22. </div>

23. </div>

24. <div class="otherfilters">

25. <div class="sub-filter1">

26. <div class="k-edit-label"><label>Tenant: </label></div>

27. <div class="k-edit-field"><span id="monitoringTenantTemplate" class="filter tenant-filter"></span></div>

28. <div class="k-edit-label"><label>Role: </label></div>

29. <div class="k-edit-field"><span id="monitoringRoleTemplate" class="filter role-filter"></span></div>

30. <div class="k-edit-label"><label>User: </label></div>

31. <div class="k-edit-field"><span id="monitoringUserTemplate" class="filter user-filter"></span></div>

32. </div>

33. <div class="sub-filter2">

34. <div class="k-edit-label"><label>Level: </label></div>

35. <div class="k-edit-field"><span id="levelTemplate" class="filter level-filter"></span></div>

36. <div class="k-edit-label"><label>Server: </label></div>

37. <div class="k-edit-field"><span id="serverTemplate" class="filter server-filter"></span></div>

38. <div class="k-edit-label"><label>Thread: </label></div>

39. <div class="k-edit-field"><input class="filter thread-filter" placeholder="20,30" width="30" /></div>

40. </div>

41. </div>

42. <div class="messagesection">

43. <div class="k-edit-label"><label>Message: </label></div>

44. <div class="k-edit-field"><textarea class="filter message-filter" placeholder="Search log text" rows="3"></textarea><div><input type="checkbox" id="msgCheck"><label for="msgCheck">Use regex to search</label></div></div>

45. </div>

46. <div class="footer">

47. <div class="k-edit-buttons k-state-default export-button">

48. <button class="k-button k-button-icontext k-grid-export-data" id="exportbutton">Export</button>

49. </div>

50. <div id="alerttext"></div>

51. <div class="k-edit-buttons k-state-default apply-clear-buttons">

52. <button class="k-button k-button-icontext k-grid-clear-filters">Clear</button>

53. <button class="k-button k-button-icontext k-primary k-grid-apply-filters" id="applybutton">Apply</button>

54. </div>

55. </div>

56. </div>

57.</script>

Checkbox

answered on 25 May 2020

8 answers

1.3K+ views

[Solved] Grid within template

Is there a way to place a Kendo UI grid within a template that is used as the detail row? I need to be able to dynamically determine if a grid should be in a detail row template, and adjust the UI accordingly. Specifically, if there is a subcategory record, I want to display the sub categories within a new hierarchical grid nested in the outside grid. I found the following example, but it uses Angular. I need to do something like this with Kendo UI for jQuery.

Thanks!

Grid

answered on 25 May 2020

5 answers

362 views

[Solved] headerStatusUploaded says "Done" even if upload failed

Hi there,

I am trying to improve the accessibiliy of the Kendo UI Upload. My biggest problem right now is that the "headerStatusUploaded" always says "Done", even if the upload failed. The failure is just communicated by the exclamation mark. See picture attached.

To me "Done" sounds like everything went fine. This is especially bad for accessibility because the exclamation mark is not read by screen readers, but I also find it irritating as a not disabled user.

Best, Max

Upload

answered on 25 May 2020

13 answers

1.9K+ views

[Solved] prevent ajax caching on .read()

Hi,
I am using the MVC helpers and ran into a problem with json data caching in ie. I don't see a way to set caching = false with the fluent DropDownList helper. Am I missing something with this?

My workaround is to tag my json methods with the following (courtesy of Zack at http://www.kendoui.com/forums/framework/data-source/read-without-cache.aspx)

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*"

)]



David A

DropDownList

answered on 24 May 2020

2 answers

117 views

[Solved] Multi Filterable via Template

Hi, Dev Team!

Here the part of my KendoGrid. Its make beautyfull green check image if value is "true", but in search panel i find original "true/false" values for choice. Can i get the same green check image also in search panel?

{

field: "Done",

title: "Done",

template: function (dataItem) {

var done = ""

if (dataItem.Done) {

done = '<i class="fas fa-check fa-2x" style="color: green !important;"></i>'

}

return done;

},

filterable: { multi: true }

}

Grid

answered on 22 May 2020

3 answers

1.7K+ views

Want to add a button inline with the kendo tab

I have created a kendo tabstrip with 2 tabs. I want to add buttons inline with the tabs and to their extreme right. I have attached a screenshot of the functionality I want to achieve.

I tried using the css display:flex property, but the buttons are still not in line with the tabs.

TabStrip

answered on 22 May 2020

3 answers

206 views

Localization for upload resume and pause button is missing

Hello,

I use the de-DE localization and there is no translation of the aria-label of the resume and pause button in the upload form. The other buttons like cancel and retry are translated.

Can you add a localization for those buttons too?

Best, Max

Upload

answered on 22 May 2020

4 answers

1.0K+ views

Grid data can't have numbers as column headers

I'm trying to get a Kendo UI Grid working with AngularJS and a sample of data. I am encountering a generic "Error: Invalid template" error when the grid attempts to display the data. The data I am using is:

$scope.dataSource.data = [

{

"874": " ",

"878": "Example1",

"882": "Example2",

"884": "4",

"885": "Example 4",

"886": "in",

"_id": {

"$oid": "eaa1e4b0a8480579f79e"

},

"ID1": "46237",

"ID2": "",

"ID3": "",

"ItemType": "Line",

"ItemName": "Example 6"

}

]

I know it's throwing the error on the columns with numbers as headers, because when I take out those columns it works just fine. Also, if I swap those column headers out for letter values, it also renders correctly.

Is this a known issue with the Kendo UI Grid or is there a workaround? I know the data I will be displaying will have numbers as headers often.

Cheers

Grid

answered on 22 May 2020

7 answers

386 views

Issue with multiselect value mapper

I have multi-select drop-down which having 10000 devices data. i have configured server side filtering and virtualization . but while searching I am getting a issue with value mapper . it's copying selected data.

https://dojo.telerik.com/eyuTEZaZ

I am getting reference above link . its also giving same issue .

MultiSelect

answered on 22 May 2020

1 answer

301 views

Two filter at the same Time !

Hello,

I'm trying to make a filter with two filters inside .. !!

I have a MultiSelect and AutoComplete and I want to take the value of them and put them in a filter...

so what I did is this...

in onChange_MultiSelect I wrote this...

var filter = {

logic: "or",

filters: new Array()

};

Global_Selected_Mitarbeiter_Filter = {

logic: "or",

filters: filter.filters

};

scheduler.dataSource.filter(filter);

DataItems.forEach(function (item, index) {

// var itemToAdd =

// {

// Text: item.CrmUserNameZuordnung,

// Value: item.ID

// };

// selected.push(itemToAdd)

//for (var i = 0; i < selected.length; i++) {

for (var i = 0; i < DataItems.length; i++) {

filter.filters.push({

field: "CrmUserName",

operator: "eq",

value: DataItems[i].CrmUserNameZuordnung

});

}

})

and in onChange_AutoComplete i wrote this ..

var filter_All = {

logic: "and",

filters: new Array()

};

var filter = {

logic: "or",

filters: new Array()

};

if (auto_Change.value() != "") {

filter_All.filters.push(filter);

}

if (Mitarbeiter_MSelect.value() != "") {

filter_All.filters.push(Global_Selected_Mitarbeiter_Filter);

}

scheduler.dataSource.filter(filter_All);

DataItemss.forEach(function (item, index) {

// var itemToAdd =

// {

// Text: item.Title

//Value: item.Title

//Color : item.color

// };

// selected.push(itemToAdd)

//for (var i = 0; i < selected.length; i++) {

for (var i = 0; i < DataItemss.length; i++) {

filter.filters.push({

//2- this the title of the field of the multiselect it self .. like what to show as title for these fields

field: "title",

operator: "startswith",

//value: selected[i].Text

value: DataItemss[i].Title

});

}

})

so basically what I did is, putting the value in two filters and then push them into a third filter and try to filter the Scheduler...

but it's not working .. is there another way to approach this goal .. or any tip to make it right ??

Thanks in advance ...

Scheduler

answered on 22 May 2020