This is a migrated thread and some comments may be shown as answers.

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

1 Answer 495 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Luke Jeffrey
Top achievements
Rank 1
Luke Jeffrey asked on 11 Nov 2014, 08:21 AM
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.

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 13 Nov 2014, 08:40 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
DropDownList
Asked by
Luke Jeffrey
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or