jqgrid - checkbox for Group header to multiselect

Question

Currently I am using jqgrid to bind data. I have 2 questions: 1) When Multiselect is true, we have a checkbox in the header row which selects all rows irrespective of grouping.

What i am trying to achieve is to have a checkbox at the level of the group header. So each group will have a multiselect checkbox which when checked only checks all the rows in that particular group leaving the remaining groups as it is.

If the checkbox option at the group header is not possible can we have the group header clickable so that we can check all the rows in that group? I found a similar question asked at click here but they are not using jqgrid.

2) My next question is can we embed .gif,.jpg images as part of the data in the columns in jqgrid?

As I am a new user I'm sorry I wasnt able to add snapshots.

Thanks

Answer 1

It is possible to have a checkbox in the group header, but there is no built in functionality for this in jqGrid.

You can add the HTML via the groupText property. Then you can code the click listeners for that input outside of the jqGrid configuration. You can have something like this in your jqGrid configuration:

groupingView: { 
  groupField: [ <fill in your values> ],
  groupOrder: [ <fill in your values> ],        
  groupText: ['<span class="groupText">{0} - {1} Records(s)</span>' + 
    '<span class="group-span">' + 
    '<input type="checkbox" class="grouping">' + 
    '<label class="grouping-label">Select this group</label>' + 
    '</span>'],         
  groupColumnShow: [true],
  groupCollapse: true
}

Now you have to code the listeners using the jQuery on method since the checkboxes will not exist on dom ready.

Answer 2

Demo is JSFIDDLE DEMO

As @david suggested, added the checkbox HTML via the groupText property for group header. And write handler for checkbox click/change event.

If parent jqgrid table's id is grid, group header row tr is with class ="gridghead_0", and the nested group headers' class will follow gridghead_1 to gridghead_n.

1. checkbox click/change handler (JS DOM Ready function)

   $("table tbody").on("change", "input[type=checkbox]", function (e) {        
       var currentCB = $(this);
       var grid = jQuery('#grid');
       var isChecked = this.checked;
       if (currentCB.is(".groupHeader")) { //if group header is checked, to check all child checkboxes                     
           var checkboxes = currentCB.closest('tr').nextUntil('tr.gridghead_0').find('.cbox[type="checkbox"]');
           checkboxes.each(function(){
               if (!this.checked || !isChecked)                   
                   grid.setSelection($(this).closest('tr').attr('id'), true); 
           });
       } else {  //when child checkbox is checked
           var allCbs = currentCB.closest('tr').prevAll("tr.gridghead_0:first").nextUntil('tr.gridghead_0').andSelf().find('[type="checkbox"]');
           var allSlaves = allCbs.filter('.cbox');
           var headerCB = allCbs.filter(".groupHeader");
           var allChecked = !isChecked ? false : allSlaves.filter(":checked").length === allSlaves.length;
           headerCB.prop("checked", allChecked);
       }
   }); 
   

2. settings/options for 'multiselect' and 'grouping'

   ...
   multiselect: true,
   grouping:true,
   groupingView : {
       groupField : ['name'],
       groupText : ['<input type="checkbox" class="groupHeader"/> <b>  {0}  </b>'],
       groupColumnShow : [false],
   },
   ...
   

3. when select-all is checked, to check group header checkbox

   onSelectAll: function(rowIds, allChecked) {
       $("input.groupHeader").attr('checked', allChecked);
   },