Group level checkbox in slick grid

Question

I am facing an issue in using checkbox selector plugin for the Slick grid.

The plugin does not provide any way to add group level checkbox after using grouping plugin for the slick grid. I added checkbox using formatter function in groupItemMetadataProvider options something like this:

dataView.setGrouping({
   getter: "duration",
   formatter: function (g) {
    var checkedState="";
    if(g.hasOwnProperty("checked")){
        g["checked"] ? checkedState="checked" : checkedState=""; 
    }
     return "<input type=\"checkbox\" class="groupCheck" data-id=\""+g.value+"\" "+checkedState+"> Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
   } });

Above code is displaying a checkbox.

I am binding change event and looping through data view to check rows which have the same duration as groupedBy ID and if its matched saving passing index to toggleRowSelection function in checkbox selector plugin.

Its working fine. Showing all child checked but header checkbox is not saving its state. After scrolling checkbox losing its 'checked' state.

Need help in solving this. Tried saving its state in "isChecekd" flag in above snippet.

Chris L Chris L · Accepted Answer · 2018-04-10T16:48:25

Have you looked at this example? It is the official way to add a checkbox to groups which retains state on scroll.

http://6pac.github.io/SlickGrid/examples/example-grouping-checkbox-row-select.html

Make sure you have these three lines of code to get it working in your webapp:

var checkboxSelector = new Slick.CheckboxSelectColumn({cssClass: "slick-cell-checkboxsel"});
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider({ checkboxSelect: true, checkboxSelectPlugin: checkboxSelector });
dataView.syncGridSelection(grid, true, true);

The original developers of slickGrid are not very active in the development so make sure you are using the latest build from: SlickGrid

Group level checkbox in slick grid

1 Answers