How to prevent from being collapsed jqgrid while sorting

Question

i have implemented jqgrid in my project of asp.net mvc and its working fine , i have problem while sorting. on load i keep groupCollapse = true and i need it but when i open any group and when click for sorting its being collapsed. is there any solution to prevent open group from being collapsed while sorting.

my code here

 jQuery("#tblEmployeeReport").jqGrid({
                      data: ParsedJson,
                      datatype: "local",
                      height: 'auto',
                      width: 'auto',
                      rowNum: 50,
                      rowList: [50, 100],
                      colNames: ['Date', 'Clock In', 'Clock Out', 'Working Hr'],
                      colModel: [
                          { name: 'DayDate', index: 'DayDate', width: 90, sorttype: "date", resizable: false, },
                          { name: 'ClockIn', index: 'ClockIn', width: 100, resizable: false, },
                          { name: 'ClockOut', index: 'ClockOut', width: 100, resizable: false, },
                          { name: 'Working_Hr', index: 'Working_Hr', width: 100, resizable: false, },
                      ],
                      pager: "#EmployeeReportPager",
                      viewrecords: true,
                      sortorder: "desc",
                      caption: "Employee Report",
                      sortname: 'DayDate',
                      grouping: true,
                      resizable: false,
                      groupingView: {
                          groupField: ['DayDate'],
                          groupText: ['<b>{0} - {1} Employee</b>'],
                          groupCollapse: true,
                          groupOrder: ['asc']
                      }
                  });
                  jQuery("#tblEmployeeReport").jqGrid('navGrid', '#EmployeeReportPager', { add: false, edit: false, del: false });

Answer 1

got a solution of my que. just add two more events and implement logic

Updated Code,

var expandedEmpGroups = [];

 jQuery("#tblEmployeeReport").jqGrid({
                      data: ParsedJson,
                      datatype: "local",
                      height: 'auto',
                      width: 'auto',
                      rowNum: 50,
                      rowList: [50, 100],
                      colNames: ['Date', 'Clock In', 'Clock Out', 'Working Hr'],
                      colModel: [
                          { name: 'DayDate', index: 'DayDate', width: 90, sorttype: "date", resizable: false, },
                          { name: 'ClockIn', index: 'ClockIn', width: 100, resizable: false, },
                          { name: 'ClockOut', index: 'ClockOut', width: 100, resizable: false, },
                          { name: 'Working_Hr', index: 'Working_Hr', width: 100, resizable: false, },
                      ],
                      pager: "#EmployeeReportPager",
                      viewrecords: true,
                      sortorder: "desc",
                      caption: "Employee Report",
                      sortname: 'DayDate',
                      grouping: true,
                      resizable: false,
                      groupingView: {
                          groupField: ['DayDate'],
                          groupText: ['<b>{0} - {1} Employee</b>'],
                          groupCollapse: true,
                          groupOrder: ['asc']
                      },
                      onClickGroup: function (hid, collapsed) {

                          var i;
                          i = $.inArray(hid, expandedEmpGroups) > -1;

                          if (!collapsed && i == false) {
                              expandedEmpGroups.push(hid);
                          }
                          else if (collapsed && i == true) {
                              //Grouphid.splice(i, 1);
                              expandedEmpGroups.splice($.inArray(hid, expandedEmpGroups), 1);
                          }

                      },

                      loadComplete: function () {
                          var $this = $(this)
                          if (expandedEmpGroups.length > 0) {
                              for (var i = 0; i <= expandedEmpGroups.length; i++) {
                                  if (typeof (expandedEmpGroups[i]) != "undefined") {
                                      $this.jqGrid("groupingToggle", expandedEmpGroups[i]);
                                  }
                              }
                          }

                      }
                  });
                  jQuery("#tblEmployeeReport").jqGrid('navGrid', '#EmployeeReportPager', { add: false, edit: false, del: false });

The array variable expandedEmpGroups[] isdefined in the outer scope.