Wednesday, May 22, 2019

Kendo UI Multiselect with Boolean Checkbox

Kendo UI Multiselect 

 <select id="ddlid" name="ddlname" required data-required-msg="Select ddlname"></select>

DataSource

My datasource returns a selectList
  var selectList = new List<SelectListItem>();
with Text,Value and Selected

Boolean checkbox

 var multi = ddlContainer.kendoMultiSelect({
                            dataSource: dataSource,
                            dataTextField: "Text",
                            dataValueField: "Value",
                            placeholder: "Select items",
                            tagMode: "single",
                            autoBind: "false",
                            headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                                '<span>Is Active </span>' +
                                '<span> -  Items</span>' +
                                '</div>',
                            footerTemplate: 'Total #: instance.dataSource.total() # items found',
                            itemTemplate: '<span class="k-state-default"> <input type="checkbox" #= Selected ? "checked=checked" : "" # disabled="disabled" ></input> </span> ' +                         
                                '<span class="k-state-default">#: data.Text #</span>',                         
                            autoClose: false                         
                        });


                        // Get reference to the validator
                        var validator = $("#ddlid").kendoValidator().data("kendoValidator");

                        // Bind validation to blur
                        $("input", multi.wrapper).on("blur", function () {
                            if (validator != undefined)
                                validator.validate();
                        });

Output

No comments:

Post a Comment