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

2 posts, 0 answers
  1. Luke Jeffrey
    Luke Jeffrey avatar
    2 posts
    Member since:
    Jun 2008

    Posted 11 Nov 2014 Link to this post

    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.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Nov 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top