Cascading DropDownList model binding not working using .select() method

[Luke Jeffrey]

Guys,

I have two comboboxes on a Custom Editor for Scheduler that are called "CustomerID" and "SiteID" - when selecting a customer, if that customer has a single site, I wish for the single item in the "SiteID" box to be selected.

I have the UI functionality working as expected, but yet ModelState.IsValid is always false and the "SiteID" value is always an empty guid  e.g. the Selected Value for the SiteID dropdownlist does not seem to be passed back to the model.

The definition of CustomerID and SiteID are below:

  <div class="k-edit-field">
           @(Html.Kendo().DropDownListFor(model => model.CustomerID)
              .Name("CustomerID")
              .HtmlAttributes(new { style = "width:300px", data_bind = "value :CustomerID" })
              .OptionLabel("Select...")
              .DataTextField("CustomerName")
              .DataValueField("CustomerID")
              .Events(events=>events.DataBound("customersLoaded"))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeCustomers", "Job");
                  }).ServerFiltering(true);                  
              })              
              
            )
        </div>
        <div class="k-edit-label">
            @(Html.LabelFor(model => model.SiteID))
        </div>
        <div class="k-edit-field">
           @(Html.Kendo().DropDownListFor(model => model.SiteID)
              .HtmlAttributes(new { style = "width:300px", data_bind="value: SiteID" })
              .OptionLabel("Select...")
              .DataTextField("SiteName")
              .DataValueField("SiteID")
              .Events(events => events.DataBound("sitesLoaded"))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeSites", "Job")
                          .Data("filterSites");
                  })
                  .ServerFiltering(true);
              })
              .Enable(true)
              .AutoBind(false)
              .CascadeFrom("CustomerID")                           
        )       

The events relating to each are defined in javascript as below:

function filterSites() {
        return {
            CustomerID: $("#CustomerID").val()
        };
    }

function customersLoaded(e) {
        // handle the event
        var dropdownlist = $("#CustomerID").data("kendoDropDownList");
        // selects item if its value is equal to "test" using predicate function
        if (_custID != null) {
            dropdownlist.value(_custID);
            //dropdownlist.value(dropdownlist.value());

        }
    }

    function sitesLoaded(e) {
        // handle the event
        var dropdownlist = $("#SiteID").data("kendoDropDownList");
        // selects item if its value is equal to "test" using predicate function
        if (_siteID != null) {
            dropdownlist.value(_siteID);

        }
        else
        {
            //select first items if 1
            if( dropdownlist.dataSource.data().length == 1)
            {
                dropdownlist.select(1);
               
                
            }
        }


    }


I use the dropdownlist.select method to select the first item in the SiteID DropDownList.

A video of the problem can be found here:

http://screencast.com/t/xdmTpREq

If you could let me know what I need to change that would be great.

[Georgi Krustev]

Hello Luke,

The comes from the fact the dropdownlist does not trigger change event either on initial load or on manual filtering (done by the cascading functionality), hence the MVVM value binding is not notified and the model is not updated. We will address this in some of our next Kendo UI / UI for ASP.NET MVC releases. You can find more information about this here.
For now you can workaround this behavior triggering change event manually in the dataBound event:

function dataBound(e) {
  e.sender.trigger("change");
}

Regards,
Georgi Krustev
Telerik