This question is locked. New answers and comments are not allowed.
Hi,
We were using kendo 2013 and have upgraded to version 2016. After this upgrade we are facing an issue with kendo multi-select control which uses ajax call to bind the data.(No issue with pre-filled Multi-select controls) The multi-select gets filled with respect to the data selected on a kendo dropdown.
The multi-select value disappear in some scenarios. We use .value to set the value of multi-select. It sometimes get applied and sometimes not.
Please see the videos for more information.
http://www.screencast.com/t/YUieTDtpI8t
http://www.screencast.com/t/m4JRNq8Ho
Thanks
Following are the controls used.
**** Drop Down *********
@(Html.Kendo().DropDownListFor(m => m.SelectedViewState)
.OptionLabel("--Select--")
.DataSource(source => source
.Read(read => read.Action("Load", "Controller")).ServerFiltering(true))
.Events(e => e.Change("onChange"))
.DataTextField("Name")
.DataValueField("ViewStateId")
.Deferred()
.HtmlAttributes(new { style = "width: 180px" }))
**** Multi select *********
@(Html.Kendo().MultiSelectFor(model => model.Payer)
.AutoBind(true)
.Deferred()
.DataTextField("Name")
.DataValueField("Id")
.Placeholder("Select Payers...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("LoadMultiSelect", "Controller");
})
.ServerFiltering(true);
})
.ItemTemplate("<dl>" +
"<dd class='first-item'>${ data.Name }</dd>" +
"<dd> ${ data.Code }</dd>" +
"</dl>")
.HtmlAttributes(new { style = "width:95%;height:26px;overflow: auto;position:relative;" })
)
*********Code used to fill multi-select********
function onChange(e) {
var value = $("#SelectedViewState").val();
var dropDown = e.sender;
var query = new kendo.data.Query(e.sender.dataSource.data());
var data = query.filter({ field: "ViewStateId", operator: "eq", value: value }).data;
if (data != undefined && data.length!=0) {
var setting = data[0].Setting;
var model = JSON.parse(setting).ViewStates;
var payerListData = '[' + model.Payer + ']';//data in model.Payer "{"Id":"40eb0d8c-6021-403c-92b0-efdc4865ef7c","Name":"(HOSPICE) ANDROSCOGGIN12"}"
var payerLists = JSON.parse(payerListData);
var payerSelect = $('#Payer').data('kendoMultiSelect');
var payerGuidArray = [];
$.each(payerLists, function (index, objValue) {
payerGuidArray.push(objValue.Id);
});
payerSelect.dataSource.data(payerLists);
payerSelect.value(payerGuidArray);
}
}
We were using kendo 2013 and have upgraded to version 2016. After this upgrade we are facing an issue with kendo multi-select control which uses ajax call to bind the data.(No issue with pre-filled Multi-select controls) The multi-select gets filled with respect to the data selected on a kendo dropdown.
The multi-select value disappear in some scenarios. We use .value to set the value of multi-select. It sometimes get applied and sometimes not.
Please see the videos for more information.
http://www.screencast.com/t/YUieTDtpI8t
http://www.screencast.com/t/m4JRNq8Ho
Thanks
Following are the controls used.
**** Drop Down *********
@(Html.Kendo().DropDownListFor(m => m.SelectedViewState)
.OptionLabel("--Select--")
.DataSource(source => source
.Read(read => read.Action("Load", "Controller")).ServerFiltering(true))
.Events(e => e.Change("onChange"))
.DataTextField("Name")
.DataValueField("ViewStateId")
.Deferred()
.HtmlAttributes(new { style = "width: 180px" }))
**** Multi select *********
@(Html.Kendo().MultiSelectFor(model => model.Payer)
.AutoBind(true)
.Deferred()
.DataTextField("Name")
.DataValueField("Id")
.Placeholder("Select Payers...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("LoadMultiSelect", "Controller");
})
.ServerFiltering(true);
})
.ItemTemplate("<dl>" +
"<dd class='first-item'>${ data.Name }</dd>" +
"<dd> ${ data.Code }</dd>" +
"</dl>")
.HtmlAttributes(new { style = "width:95%;height:26px;overflow: auto;position:relative;" })
)
*********Code used to fill multi-select********
function onChange(e) {
var value = $("#SelectedViewState").val();
var dropDown = e.sender;
var query = new kendo.data.Query(e.sender.dataSource.data());
var data = query.filter({ field: "ViewStateId", operator: "eq", value: value }).data;
if (data != undefined && data.length!=0) {
var setting = data[0].Setting;
var model = JSON.parse(setting).ViewStates;
var payerListData = '[' + model.Payer + ']';//data in model.Payer "{"Id":"40eb0d8c-6021-403c-92b0-efdc4865ef7c","Name":"(HOSPICE) ANDROSCOGGIN12"}"
var payerLists = JSON.parse(payerListData);
var payerSelect = $('#Payer').data('kendoMultiSelect');
var payerGuidArray = [];
$.each(payerLists, function (index, objValue) {
payerGuidArray.push(objValue.Id);
});
payerSelect.dataSource.data(payerLists);
payerSelect.value(payerGuidArray);
}
}