Synchronizing multiple dropdownlists that use remote data

2 posts, 0 answers
  1. Josh
    Josh avatar
    1 posts
    Member since:
    May 2015

    Posted 11 Jan Link to this post

    I have two dropdown lists. Both are for the same object, but one dropdown is for the ID of the object while the other is for the name (so the user has multiple ways to search for it). It's a large list, so both use serverside filtering.

     Is there a way to join them so that when one is selected, the other auto populates? I've tried an event on close, select, and change, and then that javascript event reapplies the datasource so that it can be in the other dropdown of the same object. However, that means it can no longer be used for going to the server and getting the remote data after it's applied the new datasource.

     Any ideas?  

    Template for ID/Number

    @(Html.Kendo().DropDownList().Value(Model)
                    .Filter("startsWith")
                    .MinLength(3)
                    .DataValueField("AccountNumber")
                        .DataTextField("AccountNumber")
                    .Name("AccountNumber")
                    .IgnoreCase(true)
                    .AutoBind(false)
                    .DataSource(source=>
                    {
                        source.Read(read=>
                            read.Action("GetAccountList", "Account"));
                        source.ServerFiltering(true);
                    })
                    .Events(events =>
                        {
                            events.Close("AccountSyncronize");
                        })
    )
    Template for Name

    @(Html.Kendo().DropDownListFor(m => m)
                  .Filter("contains")
                  .MinLength(3)
                  .Name("accounts")
                  .AutoBind(false)
                  .IgnoreCase(true)
                  .OptionLabel("Select account...")
                  .DataTextField("Name")
                  .DataValueField("AccountId")
                  .DataSource(source =>
                  {
                      source.Read(read => read.Action("Editing_Custom", "Contact"))
                          .ServerFiltering(true);
                  })
                  .Events(events =>
                    {
                        events.Select("AccountSyncronize");
                    })
    )

    Rough Draft of Javascript Function

     

    function _accountSyncronize()
    {
        var accountSource = new kendo.data.DataSource({ data: [this.dataItem()] });
        $("#accounts").data("kendoDropDownList").setDataSource(accountSource);
        $("#AccountNumber").data("kendoDropDownList").setDataSource(accountSource);
     
        $("#accounts").getKendoDropDownList().select(1);
        $("#AccountNumber").getKendoDropDownList().select(1);
    }

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Jan Link to this post

    Hi Josh,

    Instead of changing the dataSource you may simply set the widget's value through the API.

    Something like this:

    function onChange() {
      var dataItem = this.dataItem();
      var otherDropDown = /*get reference to the other dropdown */
       
      otherDropDown.value(dataItem.name); //or otherDropDown.value(dataItem.id)
    }


    After the ID is set the DropDownList will read its dataSource to get the dataItems and find the matching one.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top