Kendo UI Dropdown List default value from data - asp.net

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.

Answer 1

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.