Synchronizing multiple dropdownlists that use remote data

[Josh]

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

[Alexander Valchev]

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