Multiselect DropDownList in Filter Row

2 posts, 0 answers
  1. Dennis
    Dennis avatar
    8 posts
    Member since:
    Oct 2014

    Posted 28 Aug Link to this post

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

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    85 posts

    Posted 30 Aug Link to this post

    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.
Back to Top