I need to be able to use a DropDownlist as a filter row control with the ability to select multiple options.
I set the cell filter template to the below function (ComboBoxInit) and I found the multibox extended plugin in another forum thread (bottom).
When I run this, it gives me an error message within kendo.all.min.js
JavaScript runtime error: Unable to get property 'done' of undefined or null reference
Any help would be appreciated. I have tried everything. I can get a regular dropdownlist to work, but we need the ability to select multiple options. The MultiSelect box is not an option as it's way too bulky for our needs.
function ComboBoxInit(args)
{
var data = [ { text: "Tony", value: "110" }, { text: "Gary", value: "120" }];
args.element.kendoMultiSelectBox({
valuePrimitive: true,
dataTextField: "text",
dataValueField: "value",
dataSource: data
});
}
var MultiSelectBox = window.kendo.ui.DropDownList.extend({
init: function (element, options) {
var me = this;
// setup template to include a checkbox
options.template = kendo.template(
kendo.format('<label><input type="checkbox" name="{0}" value="#= {1} #" /> #= {2} #</label>',
element.id + "_option_" + options.dataValueField,
options.dataValueField,
options.dataTextField
)
);
// remove option label from options, b/c DDL will create an item for it
if (options.optionLabel !== undefined && options.optionLabel !== null && options.optionLabel !== "") {
me.optionLabel = options.optionLabel;
options.optionLabel = undefined;
}
// create drop down UI
window.kendo.ui.DropDownList.fn.init.call(me, element, options);
// setup change trigger when popup closes
me.popup.bind('close', function () {
var values = me.ul.find(":checked")
.map(function () { return this.value; }).toArray();
// check for array inequality
if (values < me.selectedIndexes || values > me.selectedIndexes) {
me._setText();
me._setValues();
me.trigger('change', {});
}
});
me._setText();
},
options: {
name: "MultiSelectBox"
},
optionLabel: "",
selectedIndexes: [],
_accessor: function (vals, idx) { // for view model changes
var me = this;
if (vals === undefined) {
return me.selectedIndexes;
}
},
value: function (vals) {
var me = this;
if (vals === undefined) { // for view model changes
return me._accessor();
} else { // for loading from view model
var checkboxes = me.ul.find("input[type='checkbox']");
if (vals.length > 0) {
// convert to array of strings
var valArray = vals
.map(function (item) { return item + ''; });
checkboxes.each(function () {
this.checked = $.inArray(this.value, valArray) !== -1;
});
me._setText();
me._setValues();
}
}
},
_select: function (li) { }, // kills highlighting behavior
_blur: function () { }, // kills popup-close-on-click behavior
_setText: function () { // set text based on selections
var me = this;
var text = me.ul.find(":checked")
.map(function () { return $(this).parent().text(); })
.toArray();
if (text.length === 0)
me.text(me.optionLabel);
else
me.text(text.join(', '));
},
_setValues: function () { // set selectedIndexes based on selection
var me = this;
var values = me.ul.find(":checked")
.map(function () { return this.value; })
.toArray();
me.selectedIndexes = values;
me.element.val(values);
}
});
window.kendo.ui.plugin(MultiSelectBox);