Kendo UI - Drop down list Setting Value autoBind = false setting

Question

I am evaluating kendo ui right now to use in our big application. We have a situation where we have much values in dropdowns (like 200+) and there are more than 1 drop down with that size. So if we have a complex form. The Page Load takes time to render the form. (Due to that each box needs to be loaded from service and filled up).

We avoided this by writing our own asp.net web control with on demand support (like autoBind property) in the drop down list in kendo ui.

Now, DropDownList from KendoUI serves the purpose with autobind = false, BUT when setting value it fetches data from remote binding first and then selects appropriate value. (this is cool and really good for small lists) but Potentially this will mean that when we load the page and set the value it will issue remote binding calls for each of the drop downs.

Now,

Can we set value/ text to appear without issuing the remote binding. We want remote binding to be done ONLY when the user clicks on the drop down itself. (not when we are filling form). This will save extra calls to system and help quickly render the form to user.

Here is JS Bin

http://jsbin.com/ayivad/3/edit

If somebody from kendo ui would like me to help out - let me know, but this idea will allow us to use kendo ui drop downs with good use.

<input type="button" id="btnSet" value="Set Value (Click without clicking on DropDown" />
  <br/><br/>
<select id="products"></select>



 $(document).ready(function () {
        $("#products").kendoDropDownList({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products",
                    }
                }
            }
        });
        var combobox = $("#products").data("kendoDropDownList"),
        setValue = function (e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                combobox.value(3);
        };
       $("#btnSet").click(setValue);
    });

Thanks, Riz

Vojtiik Vojtiik · Accepted Answer · 2013-05-30T15:18:17

1) Set text instead of value : http://docs.kendoui.com/api/web/dropdownlist#configuration-text

Kendo: text String(default: "") Define the text of the widget, when the autoBind is set to false. Example

$("#dropdownlist").kendoDropDownList({
     autoBind: false,
     text: "Chai"
});

dirty alternative - Try to hijack ddl "optional label" for your needs. Load your data for the page inclusive of the value you want to show at the ddl, then initialize ddl's with optional values equal to the value you want to show. Once user opens the ddl, remote data will load, once data loaded you will ovewrite/remove the optional label and happy days. http://docs.kendoui.com/api/web/dropdownlist#configuration-optionLabel (Consider splitting the list, 200 long drop down us far from user friendly.)

$("#dropdownlist").kendoDropDownList({
optionLabel: "My value" });

Also consider using Kendo ComboBox, afterall auto complete after 3 chars or so sounds as quite sensible solution in case of your 200 items. We use same solution to 500 + combobox.

Kendo UI - Drop down list Setting Value autoBind = false setting

1 Answers