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
<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