{field: 'operDay', title: '조업요일', width: 100, editor: _this.columnEditor.dayDropDownEditor}dayDropDownEditor : function (container, options) { $('<input id="' + options.field + '" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ suggest: true, dataSource: [ {id:'1', name:'월요일', operDay: '월요일', isDeleted: false }, {operDay: '화요일', isDeleted: false }, {operDay: '수요일', isDeleted: false }, {operDay: '목요일', isDeleted: false }, {operDay: '금요일', isDeleted: false }, {operDay: '토요일', isDeleted: false }, {operDay: '일요일', isDeleted: false } ], dataTextField: 'operDay', dataValueField: 'operDay', valuePrimitive: true, select: function(e){ if(e.dataItem.isDeleted){ e.preventDefault(); alert("why?"); } }, template: kendo.template($("#template").html()) });}
Hello, I need the feature in the link above.
Some of the dropbox items I specified are deactivated and reactivated upon request.
But I don't know how to apply that code to my code.
Because there are some differences.
I attach my code above.
<input id="dropdownlist" /> <button class="k-button"> Mark Oranges as deleted</button> <script id="template" type="text/x-kendo-template"> <span class="#: isDeleted ? 'k-state-disabled': ''#"> #: name # </span> </script>
This is the part I don't know, and it's also where the error occurs.
1. I think there is no ID that can be specified because it creates input dynamically.
= <input id: dropdownlist>
(There is option.field, but it is not recognized even if it is specified as #operDay.)
1-1. As a result, you cannot access the dataSource.
2. Where should I write the <script> <span> ... </ span> </ script> section?
column? jsp?
I tried to template it in a column, but I get an "isDeleted is not defined" error. I'm thinking that I don't recognize it.
Please let me know how you can use that code ...
14 Answers, 1 is accepted
Hello,
Thank you for getting in touch with us.
The template section is rendered in a script section with an id that is "template" for example:
<script id="template" type="text/x-kendo-template">
<span class="#: isDeleted ? 'k-state-disabled': ''#">
#: name #
</span>
</script>It is defined in the dropdownlist initialization with the following line:
template: kendo.template($("#template").html())In the definition of the template we are telling that we are searching the script in the DOM and when we find it we use it as item template. That is why we need to have the template rendered in the DOM when we are initializing the DropDownList. In your case you can add the script section with id 'template' in the page where is you Grid is so that is could already be rendered when we need the dropdown editor.
For more information about the templates you can also review this documentation page.
Regards,
Plamen
Progress Telerik
Rank 1
But I did not understand your answer.
Can you give me an example of proper use?
I would appreciate it if you could explain it more easily.
Hello,
The script section with id 'template' have to be rendered on the page where is positioned your Grid so that it is available when the editing is performed.
If you have further questions please elaborate a little bit the scenario so we could be more helpful.
Regards,
Plamen
Progress Telerik
Rank 1
I'll tell you what I've tried.
1. I have written a script part in a JSP page with a dynamic grid declared.
<ax:layout name="base"> <jsp:attribute name="script"> <script type="text/javascript" src="<c:url value='/assets/js/view/mes/stdInfoMgt/operatingtimeMgt.js' />"></script> <script id="template" type="text/x-kendo-template"> <span class="#: isDeleted ? 'k-state-disabled': ''#"> #: operDay # </span> </script> </jsp:attribute> <jsp:body>
2. My template is like this.
dayDropDownEditor : function (container, options) { $('<input id="' + options.field + '" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ suggest: true, dataSource: [ {id:'1', name:'월요일', operDay: '월요일', isDeleted: false }, {operDay: '화요일', isDeleted: false }, {operDay: '수요일', isDeleted: false }, {operDay: '목요일', isDeleted: false }, {operDay: '금요일', isDeleted: false }, {operDay: '토요일', isDeleted: false }, {operDay: '일요일', isDeleted: false } ], dataTextField: 'operDay', dataValueField: 'operDay', valuePrimitive: true, select: function(e){ if(e.dataItem.isDeleted){ e.preventDefault(); alert("why?"); } }, template: kendo.template($("#template").html()) }); }
3. Here's the button click code to make sure you have access to the data source.
fnObj.pageButtonView = axboot.viewExtend({ initView: function () { axboot.buttonClick(this, "data-page-btn", { "fn1": function() { var dropdown = $("#grid-view-01").data("kendoDropDownList"); var oranges = dropdown.dataSource.get(2); oranges.set("isDeleted", true); } }); }});
But I can't access the datasource at the last button click event.
Maybe the script is in the wrong place, or var dropdown = $ ("# grid-view-01"). Data ("kendoDropDownList");
We assume that the logic in the button click event (number 3) is the problem.
If you still don't understand my situation, I would like to ask you for the JSP / JS sample code in Java.
The dojo samples I can see are indistinguishable because all the code is mixed on one page.
Rank 1
Hello,
In this case it seems like the DropDownList input element is not found on the page in your button click function. In general the $("#grid-view-01") part should find the HTML element on the page that is with id equal to 'grid-view-01' and return its jQuery reference so we could get our Kendo DropDownList object from it.
In such case I would recommend you to open developers tool and inspect the id of the Kendo DropDownList input element and check if it is the same as the one you are trying to search with ('grid-view-01' in your case). Here is an image that can help you find the id that you should check on your dropdown - https://www.screencast.com/t/sCEyaOMGYt to get the current id of the Kendo DropDownList.
Regards,
Plamen
Progress Telerik
Rank 1
The ID's definitely set to "operDay".
But I still can't access the DataSource.
When accessed from an external button, the DataSource cannot be found (same phenomenon)
Internally, accessing via select: function (e) {} will not cause a datasource error, but all methods that utilize it will not be available.
var oranges = dropdown.dataSource.get (0);
-> result: undefind
oranges.set ("isDeleted", true);
-> result: Cannot read property 'set' of undefined
Is the code wrong? Or what else is the problem?
Hi,
A blind guess for the reason why the DropDownList is not found from the external button is if some iframe is used and in this way they appear in different scopes.
As for the second issue - one thing that I just noticed in the code that you share is that the get method of Kendo DataSource is used and it requires the schema.model option to be set and the id of the model to be specified as it is described here. So you should either set the id of the model or if you need the first item by index you could just use data method and get the first item like this - dropdown.dataSource.data()[0]
Regards,
Plamen
Progress Telerik
Rank 1
In the example I linked, there is no code associated with the schema ID.
Why did you suddenly need a schema ID?
First of all, I tried the method you gave me, and get / set succeeded.
How do I get the index number of the selected item?
Hello,
The get method gets the data item (model) with the specified id and that is why it is required when we use 'get'.
As for the second issue - you could use the the select method of DropDownList that returns the index of the selected item, if called with no parameters.
Regards,
Plamen
Progress Telerik
Rank 1
However, the example I linked works without a schema ID.
Can you tell me what the difference is?
If I follow the linked example, is the correct coding possible?
Hello,
The linked example works correctly because the item that we wanted to get has id that is the default value when the schema id is not set. If we remove the 'id: 2, ' part of the third item it won't work too. Same happened to your code because not all of the items had id.
Hope this will explain the issue.
Regards,
Plamen
Progress Telerik
Rank 1
Thank you very much for answering so many questions.
Rank 1
.Name("categories")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select category...")
.DataTextField("CategoryName")
.DataValueField("CategoryId")
.Events(e=>e.Open("OnCategoryDropdownOpen"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Overview_Get_Categories", "DropDownList");
});
})
function OnCategoryDropdownOpen(e){
// Here I have three dropdown values(Yes,No,NA), I want to disable NA (eq(2)).
$("#categories" + "_listbox li").eq(2).addClass("k-state-disabled");
}