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");
})
)
@(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);
}