Oct 2, 2014

Add new Option in Multiselect -Kendo

If you need to add new option in multi-select in kendo, conceptually you need to add item in datasource and apend it in the value.

 @(Html.Kendo().MultiSelect()
         .Name("mlConsEmails")
         .DataValueField("Email")
         .DataTextField("id")
         .BindTo(oEmail.EmailList())
         .Value(oEmail.EmailList())
         .Events(e => { e.Change("change").DataBound("dataBound"); })
          )

Script
 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.Alerts.substring(0, "Add new tag: ".length) === "Add new tag: ") {
                newtag = dataItem.Alerts.replace("Add new tag: ", "");
                this.dataSource.remove(dataItem);
            }
        }
        if (newtag != "") {
            this.dataSource.add({ Alerts: newtag, Alerts: 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.Alerts == newitemtext) {
                        dataItem.Alerts = newitemtext+"% ";
                        this.refresh();
                        isfound = true;
                    }
                }
            }
         
            if (!isfound) {
                if (newitemtext != "" && newitemtext != "undefined") {
                    this.dataSource.add({ Alerts: newitemtext + "% ", Alerts: newitemtext + "% " });
                    this.refresh();
                  
                }
            }
            this.search();
            this.open();
        }
     
    }