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

Synchronizing multiple dropdownlists that use remote data

1 Answer 120 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 11 Jan 2016, 10:36 PM

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);
}

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 13 Jan 2016, 12:07 PM
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!
 
Tags
DropDownList
Asked by
Josh
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or