I have created a set of 3 multiselect cascading lists. It works fine, until...
I need to set the initial values. IE the user selects some stuff. Saves and then returns to edit. At this point I cannot seem to prepopulate the lists.
I know im going to go "Duh!" and hit myself in the forhead when I figure this out, but looking for any help here. I am using MVC 5
@(Html.Kendo().MultiSelect()
.Name("Trades")
.DataTextField("TradeName")
.DataValueField("Id")
.Placeholder("Select Trades ...")
.AutoBind(true)
.DataSource(source => source.Read(read => read.Action("GetTrades", "Skills"))
.ServerFiltering(true))
.Events(evt => evt.Change("onChangeTrades"))
)
@(Html.Kendo().MultiSelect()
.Name("SubTrade")
.DataTextField("SubTradeName")
.DataValueField("Id")
.Placeholder("Select Subtrades ...")
.AutoBind(true)
.DataSource(source => source.Read(read => read.Action("GetSubTrades", "Skills")
.Data("subTradeFilters"))
.ServerFiltering(true))
.Events(evt => evt.Change("onChangeSubTrades"))
)
@(Html.Kendo().MultiSelect()
.Name("Skills")
.DataTextField("SkillName")
.DataValueField("Id")
.Placeholder("Select Skills ...")
.AutoBind(false)
.DataSource(source => source.Read(read => read.Action("GetSkills", "Skills")
.Data("skillFilters"))
.ServerFiltering(true))
)
and the script to go with this
function subTradeFilters() {
var values = $("#Trades").val().toString();
return { text: values };
}
function skillFilters() {
var trades = "";
if ($("#Trades").val() != null) {
trades = $("#Trades").val().toString();
}
var subTrades = "";
if ($("#SubTrade").val() != null) {
subTrades = $("#SubTrade").val().toString();
}
var values = JSON.stringify({ Trades: trades, SubTrades: subTrades });
return { text: values };
}
function onChangeTrades() {
filterSubTrades();
filterSkills();
return;
}
function onChangeSubTrades() {
filterSkills();
return;
}
function filterSubTrades() {
var multiselect = $("#SubTrade").data("kendoMultiSelect");
multiselect.dataSource.filter({});
multiselect.dataSource.filter(subTradeFilters());
}
function filterSkills() {
var multiselect = $("#Skills").data("kendoMultiSelect");
multiselect.dataSource.filter({});
multiselect.dataSource.filter(skillFilters());
}
The above works GREAT until.... <Dum de dum dum music/>
I add this to the doc ready
var tradeSel = $("#Trades").data("kendoMultiSelect");
var subTradeSel = $("#SubTrade").data("kendoMultiSelect");
var skillSel = $("#Skills").data("kendoMultiSelect");
tradeSel.value(@Html.Raw(Json.Encode(Model.TradeIds)));
subTradeSel.value(@Html.Raw(Json.Encode(Model.SubTradeIds)));
skillSel.value(@Html.Raw(Json.Encode(Model.SkillIds)));
Then what happens is the first box "trades" populates.
The 2nd box sits and spins and we end with the rest of the controls not rendering.properly.
it does work fine if I comment out the .Data property on the read action of the data source, but I loose the cascading effect.
What did I miss?
I need to set the initial values. IE the user selects some stuff. Saves and then returns to edit. At this point I cannot seem to prepopulate the lists.
I know im going to go "Duh!" and hit myself in the forhead when I figure this out, but looking for any help here. I am using MVC 5
@(Html.Kendo().MultiSelect()
.Name("Trades")
.DataTextField("TradeName")
.DataValueField("Id")
.Placeholder("Select Trades ...")
.AutoBind(true)
.DataSource(source => source.Read(read => read.Action("GetTrades", "Skills"))
.ServerFiltering(true))
.Events(evt => evt.Change("onChangeTrades"))
)
@(Html.Kendo().MultiSelect()
.Name("SubTrade")
.DataTextField("SubTradeName")
.DataValueField("Id")
.Placeholder("Select Subtrades ...")
.AutoBind(true)
.DataSource(source => source.Read(read => read.Action("GetSubTrades", "Skills")
.Data("subTradeFilters"))
.ServerFiltering(true))
.Events(evt => evt.Change("onChangeSubTrades"))
)
@(Html.Kendo().MultiSelect()
.Name("Skills")
.DataTextField("SkillName")
.DataValueField("Id")
.Placeholder("Select Skills ...")
.AutoBind(false)
.DataSource(source => source.Read(read => read.Action("GetSkills", "Skills")
.Data("skillFilters"))
.ServerFiltering(true))
)
and the script to go with this
function subTradeFilters() {
var values = $("#Trades").val().toString();
return { text: values };
}
function skillFilters() {
var trades = "";
if ($("#Trades").val() != null) {
trades = $("#Trades").val().toString();
}
var subTrades = "";
if ($("#SubTrade").val() != null) {
subTrades = $("#SubTrade").val().toString();
}
var values = JSON.stringify({ Trades: trades, SubTrades: subTrades });
return { text: values };
}
function onChangeTrades() {
filterSubTrades();
filterSkills();
return;
}
function onChangeSubTrades() {
filterSkills();
return;
}
function filterSubTrades() {
var multiselect = $("#SubTrade").data("kendoMultiSelect");
multiselect.dataSource.filter({});
multiselect.dataSource.filter(subTradeFilters());
}
function filterSkills() {
var multiselect = $("#Skills").data("kendoMultiSelect");
multiselect.dataSource.filter({});
multiselect.dataSource.filter(skillFilters());
}
The above works GREAT until.... <Dum de dum dum music/>
I add this to the doc ready
var tradeSel = $("#Trades").data("kendoMultiSelect");
var subTradeSel = $("#SubTrade").data("kendoMultiSelect");
var skillSel = $("#Skills").data("kendoMultiSelect");
tradeSel.value(@Html.Raw(Json.Encode(Model.TradeIds)));
subTradeSel.value(@Html.Raw(Json.Encode(Model.SubTradeIds)));
skillSel.value(@Html.Raw(Json.Encode(Model.SkillIds)));
Then what happens is the first box "trades" populates.
The 2nd box sits and spins and we end with the rest of the controls not rendering.properly.
it does work fine if I comment out the .Data property on the read action of the data source, but I loose the cascading effect.
What did I miss?