This is a migrated thread and some comments may be shown as answers.
Multiselect DropDownList in Filter Row
1 Answer 119 Views
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 1
Dennis asked on 29 Aug 2018, 12:30 AM

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} #" />&nbsp;#= {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);

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 30 Aug 2018, 06:22 AM
Hi Dennis,

You can take advantage of the multi value filter demo which resembles the scenario you are willing to achieve. You can check the following built-in functionality of the grid here: Grid / Filter Multi Checkboxes

Furthermore, you can check the Filter menu customization demo and find out more on how to add a dropdownlist for the individual columns to select and filter the grid content.

Additional resources which are different, but yet similar the your scenario, I consider the following:
If your requirements are different from the ones suggested above, describe in more specific details your scenario so we would be able to provide a tailor-made solution for you.

Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Dennis
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or