Does anybody know how to add new items in Kendo MultiSelect? though I've tried so many of answers which are available on internet & forums. But, its not working for me now. When I'm trying to add new item with existing code then undefined items getting added only. I want to POST new added items to controller on submit button. Can anybody give proper working solution for this?
View:
@(Html.Kendo().MultiSelectFor(model => model.AlternateNames)
.HtmlAttributes(new { @style = "width:100%" })
.AutoClose(true)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.AlternateNamesList)
.Events(e => { e.Change("change").DataBound("dataBound"); })
)
JS Code:
function change() {
var value = this.value().slice(0);
var dataitems = this.dataSource.data();
var newtag = "";
for (var i = 0; i < dataitems.length; i++) {
var dataItem = dataitems[i];
if (dataItem.text.substring(0, "Add new tag: ".length) === "Add new tag: ") {
newtag = dataItem.text.replace("Add new tag: ", "");
this.dataSource.remove(dataItem);
}
}
if (newtag != "") {
this.dataSource.add({ text: newtag, value: newtag });
}
if (newtag) {
this.dataSource.filter({});
if (this.value().length == 1) {
this.value(newtag);
}
else {
value.push(newtag);
console.log(value);
this.value(value);
}
}
}
var newitemtext = '';
function dataBound() {
if ((newitemtext || this._prev) && newitemtext != this._prev) {
newitemtext = this._prev;
var dataitems = this.dataSource.data();
var isfound = false;
for (var i = 0; i < dataitems.length; i++) {
var dataItem = dataitems[i];
if (newitemtext != "" && newitemtext != "undefined") {
if (dataItem.text == newitemtext) {
dataItem.text = newitemtext + "% ";
this.refresh();
isfound = true;
}
}
}
if (!isfound) {
if (newitemtext != "" && newitemtext != "undefined") {
alert(newitemtext);
this.dataSource.add({ text: newitemtext + "% ", value: newitemtext + "% " });
this.refresh();
}
}
this.search();
this.open();
}
}