Dropdown remote binding not matching the selecteditem

3 posts, 1 answers
  1. Leo
    Leo avatar
    7 posts
    Member since:
    Jan 2016

    Posted 16 May Link to this post

    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")
    )
  2. Leo
    Leo avatar
    7 posts
    Member since:
    Jan 2016

    Posted 16 May in reply to Leo Link to this post

    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? 
     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    836 posts

    Posted 18 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top