Hi Team,

I have implemented multiple grids under multiple tabs and also implemented code for dynamic grouping for each grids in tabs like below, but somehow the grouping is not working properly.
If I am using grouping in one grid under one tab, then it filters the records from all other grids under other tabs also. And grouping columns are shown on all other tabs also.

Please suggest me any idea, that can be help in making groupings dynamically, according the grids under each tabs.

Please find my attached code for grouping in view part:-

//code to get the grid id from the every tabs
var current_grid1 = $(this).attr(‘data-tab-no’);
var current_grid2 = $(‘.djtabs-in div[data-tab-no=”‘+current_grid1+'”]’).find(‘.djtabs-article-content div’).attr(‘id’);
var gridName = current_grid2.split(‘master_grid’);

//code to initialize the grid id
var $grid = $(“#”+gridName[1]+””);
var gridGroupName = “grid_groups_”+gridName[1];

getColumnHeaderByName = function (colName) {
var $self = $(this),
colNames = $self.jqGrid(“getGridParam”, “colNames”),
colModel = $self.jqGrid(“getGridParam”, “colModel”),
cColumns = colModel.length,
iCol;
for (iCol = 0; iCol < cColumns; iCol++) {
if (colModel[iCol].name === colName) {
return colNames[iCol];
}
}
},
customFormatDisplayField = function (displayValue, value, colModel, index, grp) {
return getColumnHeaderByName.call(this, colModel.name) + “: ” + displayValue;
},
generateGroupingOptions = function (groupingCount) {
var i, arr = [];
for (i = 0; i < groupingCount; i++) {
arr.push(customFormatDisplayField);
}
return {
formatDisplayField: arr
}
},
getArrayOfNamesOfGroupingColumns = function () {
return $(“#”+gridGroupName+” ol li:not(.placeholder)”)
.map(function() {
return $(this).attr(“data-column”);
}).get()
};

$(“tr.ui-jqgrid-labels th div”).draggable({
appendTo: “body”,
helper: function( event ) {
return $( “<div class=’dragable’>”+$(this).html()+”</div>” );
}
});

if($(“#”+gridGroupName+” ol li”).length==0){
$(“#”+gridGroupName+” ol”).append(“<li class=’placeholder’><?php echo JText::_(‘MOD_MERCURY_TABERD_GRIDPHPCONFIG_LABEL_GROUPING’); ?></li>”);
}

$(“#”+gridGroupName+” ol”).droppable({
activeClass: “ui-state-default”,
hoverClass: “ui-state-hover”,
accept: “:not(.ui-sortable-helper)”,
drop: function(event, ui) {
var $this = $(this), groupingNames;
$this.find(“.placeholder”).remove();
var groupingColumn = $(“<li></li>”).attr(“data-column”, ui.draggable.attr(“id”).replace(“jqgh_” + $grid[0].id + “_”, “”));

$(“<span class=’ui-icon ui-icon-close’></span>”).click(function() {
var namesOfGroupingColumns;
$(this).parent().remove();
$grid.jqGrid(“groupingRemove”);
namesOfGroupingColumns = getArrayOfNamesOfGroupingColumns();
$grid.jqGrid(“groupingGroupBy”, namesOfGroupingColumns);
if (namesOfGroupingColumns.length === 0) {
$(“<li class=’placeholder’><?php echo JText::_(‘MOD_MERCURY_TABERD_GRIDPHPCONFIG_LABEL_GROUPING1’); ?></li>”).appendTo($this);
}
}).appendTo(groupingColumn);
groupingColumn.append(ui.draggable.text());
groupingColumn.appendTo($this);
$grid.jqGrid(“groupingRemove”);
groupingNames = getArrayOfNamesOfGroupingColumns();
$grid.jqGrid(“groupingGroupBy”, groupingNames, generateGroupingOptions(groupingNames.length));
jQuery(“.chngroup”).val(“clear”);
}
}).sortable({
items: “li:not(.placeholder)”,
sort: function() {
$( this ).removeClass(“ui-state-default”);
},
stop: function() {
var groupingNames = getArrayOfNamesOfGroupingColumns();
$grid.jqGrid(“groupingRemove”);
$grid.jqGrid(“groupingGroupBy”, groupingNames, generateGroupingOptions(groupingNames.length));
}
});

Thanks in advance.