Dropdown remote binding not matching the selecteditem

[Leo]

Because a grid i try to implement has records with many (large) dropdownboxes, i have set them to autobind false. Now when a record is set to editmode, the dropdownbox is empty, when clicked it is populated and the appropiate item is selected. Because an empty dropdownlist is confusing the user, i'm looking for a solution where the value is displayed.

View:

@(Html.Kendo().Grid<Indato.Data.EF.Models.Oplovk>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.ForeignKey(c => c.idCategory, (System.Collections.IEnumerable)ViewData["Categories"], "idCategory", "Name").Title("Category").EditorTemplateName("Category");
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine))

      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
              model.Id(p => p.id);
          })
      )
      .ClientDetailTemplateId("template")

 

Editortemplate:

@model object

@(
 Html.Kendo().DropDownListFor(m => m)
        .AutoBind(false)
        .DataSource(ds =>
        {
            ds.Read("Catgories", "Category", new { Area = "Tabellen" });
        })
        .DataTextField("Name")
        .DataValueField("idCategory")
)

[Leo]

I tried the solution suggested here:
http://stackoverflow.com/questions/16803782/kendo-ui-drop-down-list-setting-value-autobind-false-setting/16839928#16839928

Using the client side edit event from the grid to populate the initial text:

 

 function grid_edit(e) {
      e.container.find("#idActSoort").data("kendoDropDownList").text(e.model.Activiteitsoort.Code);
}

 

This works not as expected. Now when the dropdown is clicked, the remote data is bound, but the correct item is not selected.

 

My second attempt was to set the kendoDropDownList.value too, but that is triggering the remote databinding, something i'm trying to prevent.

I find it a bit strange that this 'lazy loading/deffered databinding' is so hard to achieve, am i missing something? 

 

[Ivan Danchev]

Hello Leo,

If you want an item to be automatically selected when the user opens the dropdown, you can wire the DropDownList to the DataBound event and in its handler select an item as shown in the code snippet posted below:

function onDataBound(e) {
    if (this.select() === -1) { //check whether any item is selected
        this.select(0);
        this.trigger("change");
    }
}

Regards,
Ivan Danchev
Telerik