Kendo UI Dropdown List default value from data

Question

I am trying to set Value or SelectedIndex based on the datasource return after Read.

This is my View

@(Html.Kendo().DropDownList. Name("ddlUsers"). DataTextField("text"). HtmlAttributes(New With {.style = "width:500px"}). DataValueField("id"). DataSource(Sub(s) s.Read(Sub(r) r.Action("GetUserList", "Employees") End Sub). ServerFiltering(True) End Sub).Events(Sub(e) e.Change("SetHiddenUGID")) )

The method GetUserList looks like this

Shared Function GetUserList() As IList Return db.GetDBUserList().Where(Function(w) w.value <> 0).Select(Function(s) New With {.id = s.value,.text = s.text,.isdefault = s.isdefault}).ToList() End Function

Now GetDBUserList returns a List of Employees

Public Class Employees Public Property value As Int64 Public Property text As String Public Property isdefault As Int32 End Class

I want to set the default value of the dropdown based on isdefault when it's 1, any ideas?

I have tried

var dropdownlist = $("#ddlUsers").data("kendoDropDownList");

dropdownlist.select(function (dataItem) { if (dataItem.isdefault === 1) { $("#ddlUsers").data("kendoDropDownList").value(dataItem.id); } });

But it did not work.

Does your view have a model? (Ie @model MyModel at the top) — Matt Millican

The Dread Pirate Stephen The Dread Pirate Stephen · Accepted Answer · 2016-11-02T13:28:47

Your DropDownList is bound to remote data, so you cannot attempt to set the value until after your read action returns with the data.

So, you have to add your code to select the default item in the dataBound event of the DropDownList, as there is not data to select until that point.

But, your function is attempting to set the value to dataItem.id...your model does not have an id field...it has value, text, and isdefault.

Also, the DropDownList select() method takes jQuery selector, an index, or a function that returns a boolean (http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-select). Your function does not return anything...so it would result in nothing being selected.

Try doing this in the dataBound event of the DropDownList:

dataBound: function(e) {
    var data = e.sender.dataSource.data();

    e.sender.select(function (dataItem) {
        return (dataItem.isdefault === 1);
    });
}

Here's a working example: http://dojo.telerik.com/@Stephen/inUKI It's using javascript initialization but you can add the dataBound event handler to your Razor initialization easily.

Kendo UI Dropdown List default value from data

1 Answers