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
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
.
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);
}
});
settings/options for 'multiselect' and 'grouping'
...
multiselect: true,
grouping:true,
groupingView : {
groupField : ['name'],
groupText : ['<input type="checkbox" class="groupHeader"/> <b> {0} </b>'],
groupColumnShow : [false],
},
...
when select-all is checked, to check group header checkbox
onSelectAll: function(rowIds, allChecked) {
$("input.groupHeader").attr('checked', allChecked);
},
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.