I have a grid with a column that has a filter template which is a dropdownlist. I am having trouble populating the data into the dropdownlist. What I want is to have the options be all of the unique values of all the records in that column.
Side question: is there any easier way to populate the dropdownlist with the unique values of the columns? As this is the most logical contents to place in the dropdown, I would hope there may be some built in way?
What I'm trying to do is have it call a service that returns JSON specifying the options.
Below I have the 3 ways I've tried to code the data-column field based on google searches that led to very old topics on this forum, which is why I hope there is a simple way. The first 2 don't work but the third (hard coding it) does work.
1) This call hits the server and returns JSON but does not populate the dropdown.
{<br> "field": "location_name",<br> "title": "Location",<br> "filterable": {<br> cell: {<br> template: function (args) {<br> args.element.kendoDropDownList({<br> dataTextField: "optionText",<br> dataValueField: "optionValue",<br> valuePrimitive: true,<br> dataSource: {<br> transport: {<br> read: <br> function(options) {<br> $.ajax({<br> type: "GET",<br> url: "/Patrol/Report.aspx/GetOptions",<br> data: "d",<br> contentType: "application/json; charset=utf-8",<br> dataType: "json",<br> success: function (msg) {<br> alert(msg.d); //this gets called successfully<br> return msg; //tried with and without the return<br> }<br> });<br> }<br> }<br> }<br> });<br> },<br> showOperators: false<br> }<br> }2) This call doesn't hit the server at all
{
"field": "location_name",
"title": "Location",
"filterable": {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataTextField: "optionText",
dataValueField: "optionValue",
valuePrimitive: true,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "/Patrol/Report.aspx/GetOptions",
}
}
}
});
},
showOperators: false
}
}
3) Hard coding the datasource data: This works correctly
{
"field": "location_name",
"title": "Location",
"filterable": {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataTextField: "optionText",
dataValueField: "optionValue",
valuePrimitive: true,
dataSource:
[{"optionText": "HP","optionValue": "HP"}, {"optionText": "Loc2","optionValue": "ID2"}]
});
},
showOperators: false
}
}
Hello,
the problem exists only with the pdf export button icon. The excel export button icon is rendered correctly.
I was able to reproduce the problem on your demos page with Chrome and IE: Kendo Grid / PDF export / select bootstrap theme.
How can this be fixed?
Best regards,
Kaan

Hello,
I was trying to work with the data-detail-template of the grid and it works fine but I don't know how to setup the binding for the create,edit,... events.
For the main rows it's now problem the events fire like they should be.
And what is even stranger is that the delete event works for the data-detail-template but not for create or edit.
There is something with the bindings I don't understand...
You can find the code here http://dojo.telerik.com/aZugI/8
Thanks in advance

Hi,
I am using NumericTextbox in a web application, when testing it on desktop chrome its' working fine but on Android's Chrome(samsung s4) and IOS's Safari (iPhone 6 plus)it behave very strangely. as
1- Alphanumeric keyboard is showing and user can enter any char. including alphabets
2- Max attribute is not working
3- Format is not applying
Here is my declaring code:
<input data-role="numerictextbox" data-format="n0" data-min="0" data-max="100" />
Thanks
"command": [ { "name": "edit", "buttonType": "ImageAndText", "iconClass": "fa", "imageClass": "fa-edit", "text": { "cancel": "", "update": "", "edit": "" } }, { "name": "mydelete", "buttonType": "ImageAndText", "text": "", "imageClass": "fa-trash-o", "className": "my-delete-button", "iconClass": "fa", "click": function (e) { $(e.target).confirmation('show'); } }]
We are in research for a controls which
supports Track Changes features same as the track changes in MS Word.
Our application is developed in MVC and we are trying to get
a Kendo UI control which supports Track Changes features.
Our requirement details in brief:
- The control should be compatible with MVC architecture.
- It should support Text editor basic features.
- It should support Track Changes for any changes made by User in the text editor.
- It should keep the history of changes made by each Users who have changes the text for any purpose.
- Popup comments are required for each changes including text formatting such as (bold, italic, underline, strikethrough and ordered\unordered list).
- It should also have the functionalities for Undo-Redo changes and Accept/Reject changes.
- Features should be able to extent\customize using JQuery or other scripting methods.
Below are the list for features expected from the control.
1. Tracking
Changes Feature
2. Text Insert
3. Text Delete
4. Text Format
Bold
5. Text Format
Italic
6. Text Format
Underline
7. Text Format
Strikethrough
8. Text Format
Fore color
9. Text Format
Back color
10. Text Format
Unordered List
11. Text Format
Ordered List
12. Reject Changes
13. Undo Changes
14. Redo Changes
15. Display Comment
on Hovering over changes

I've downloaded this project, because I would like to implement batch edit with popup window edit. And instead of mvc wrapper I used javascript for grid code.
The mvc wrapper code and javascript code are equivalent. However, it seems that 'e.stopImmediatePropagation();' does not allow for grid 'change' event to occur. Yet it perfectly works when code is written in wrapper.
What I am missing? Or it is expected behaviour?
http://www.telerik.com/support/code-library/external-editing-container-for-batch-editable-grid
Hello,
In the example http://dojo.telerik.com/IdUMu I am trying to have a radio buttons group inside a grid. You can see this is not working. This is the same example http://dojo.telerik.com/oPidE but without class='k-radio-label' and class='k-radio' on the label and on the input type=radio.
Can you tell me how to achieve the same behaviour as the working example but with the styling of the kendo radio button.
Thanks.

Hi ,
Want the call the action each time I click the tab , Below is my code its not working , Please help
@(Html.Kendo().TabStrip()
.Name("Information")
.Items(tabstrip =>
{
tabstrip.Add().Text("Tab 1")
.Selected(true).Content(@<text> @Html.Action("one", "Home")</text>);
tabstrip.Add().Text("Tab 2 ")
.Content(@<text> @Html.Action("two", "Home")</text>);
})
.Events(e => e.Select("reloadTab"))
)
<script type="text/javascript">
function reloadTab(e) {
//clear the current content of the tab before it's displayed to force the tabStrip to load it
var ts = $("#Information").data().kendoTabStrip;
ts.tabGroup.on('click', 'li', function (e) {
ts.reload($(this));
});
}
</script>
Arun

So I edited a dojo example to cause the behavior. The selections / ignores work fin in the code provided. Once you turn on the handle options to different handles even you no longer can select the items in the sub lists. Any ideas? Thanks in advance.
-Todd
<html><head> <meta charset="utf-8" /> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script></head><body> <ul id="parent"> <li class="list-item"><span class="handler"></span><div><label>Apples</label></div></li> <li class="list-item"><span class="handler"></span><div><label>Grapefruits</label></div></li> <li class="list-item"> <span class="handler"></span><div> <label>group</label> <ul class="nested"> <li class="sub-list-item"> <span class="subhandler"></span>Cranberries</li> <li class="sub-list-item"><span class="subhandler"></span>Pineapples</li> <li class="sub-list-item"><span class="subhandler"></span>Strawberries</li> </ul> </div> </li> <li class="list-item"> <span class="handler"></span>group2 <ul class="nested"> <li class="sub-list-item"><div><span class="subhandler"></span>Cranberries</div></li> <li class="sub-list-item"><span class="subhandler"></span>Pineapples</li> <li class="sub-list-item"><span class="subhandler"></span>Strawberries</li> </ul> </li> </ul> <style> .handler { width: 16px; height: 16px; background-color: #FF0000; display: inline-block; } .subhandler { width: 16px; height: 16px; background-color: #FFFF00; display: inline-block; } </style> <script> function placeholder(element) { return $("<li style='color: red;' class='list-item' id='placeholder'>Drop Here!</li>"); } $("#parent").kendoSortable({ filter: ">li.list-item", //handler: '.handler', //Uncomment this line ignore: ".nested>li", //ignore nested list-items placeholder: placeholder }); $(".nested").kendoSortable({ //handler: '.subhandler', //And uncomment this line and the sorting will no longer work... filter: ".sub-list-item", placeholder: placeholder }); </script></body></html>