1

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

Jaikishen Jayadev
  • 11
  • 1
  • 2
  • Just a couple of things to note. Make sure you've tried to solve your own problem. You should try to post some code. Check your spelling and grammar. For instance "i" is "I". We realize English is not everyone's native language but try to have someone proofread if you are not sure. – happy coder Jan 09 '13 at 13:33

2 Answers2

3

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);
},
Wundwin Born
  • 3,467
  • 19
  • 37
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.

Dave L.
  • 9,595
  • 7
  • 43
  • 69