Select with jquery checkboxdropdownlist

[motoguru]

Hi,

Another question is to apply some modifications to items in toolbar. I tried to use this plugin: https://github.com/scottwb/jquery.ui.dropdownchecklist to change my select in the toolbar (for selecting filter columns - one/selected/all), and the result is empy place instead of my select. This is the select declaration:

 {
                        type: 'select', cls: "filterColumnG",

                        options: function (ui) {
                            var CM = ui.colModel;
                            var opts = [{ '': '[ All columns ]' }];
                            for (var i = 0; i < CM.length; i++) {
                                var column = CM[ i ];
                                var obj = {};
                                obj[column.dataIndx] = column.title;
                                opts.push(obj);
                            }
                            return opts;
                        }
                    },


And, enabling grid and my drop down:

  var $grid = $("#grid").pqGrid(obj);

  $toolbar = $grid.find('.pq-toolbar-search');
  $toolbar.find(".filterColumnG").dropdownchecklist({ firstItemChecksAll: true, });
  $grid.pqGrid('refresh');


[EDIT]
This plugin requires ui.core.js, but when I add it to the head, my grid won't start, I have jQuery UI included after all.

[EDIT 2]
Hold on for a while as I'll try to use another plugin as this one is old. I'll post results.

[motoguru]

If somebody is interested, this plugin does it well:

https://github.com/wenzhixin/multiple-select

Thread can be closed.

[stoodin]

Can you show an example how to use the checkboxdropdownlist, please?
Thanks a lot,

[motoguru]

Hello,

Sorry for delay. First of all You have to add normal dropdown list (select) into Your toolbar items:

{
                    type: 'select', style:"width:150px;",cls: "ddClass",
                    options: function (ui) {
                        var CM = ui.colModel;
                        var opts = [];//[{ '': '[ All columns ]' }];
                        for (var i = 0; i < CM.length; i++) {
                            var column = CM[ i ];
                            var obj = {};
                            obj[column.dataIndx] = column.title;
                            opts.push(obj);
                        }
                        return opts;
                    }
                },

Then, just after grid initialization:

$grid= $("#gridContainer").pqGrid(obj);
$toolbar = $grid.find('.pq-toolbar-search');
$toolbar.find(".ddClass").multipleSelect().multipleSelect("checkAll"); //if You want to check all options at start
$grid.pqGrid("refresh");

And to get the selections:

dataIndxs = $toolbar.find(".ddClass").multipleSelect("getSelects");

(returns array)

Remember to include somewhere in Your HTML's head:

<link href="/multiselect/multiple-select.css" rel="stylesheet" />
<script type="text/javascript" src="/multiselect/jquery.multiple.select.js"></script>

Download it here: https://github.com/wenzhixin/multiple-select

[stoodin]

Great,
Thanks a lot,
I will try this solution.