In my previous blog, I discussed how you can save the open group states when you have enabled server-side editing, as group states are lost when postback occurs. But, sometimes, you may have a situation where you need to refresh or redraw the grid at client side. At that time, you would face the same issue i.e. state of the opened groups are not retained.

This blog implementation takes care of this behavior when Wijmo Gridview is re-rendered through its client side method “doRefresh”.

To begin with, bind Wijmo Gridview to a DataTable say 'Products' and enable the scrollbars as shown below.


<wijmo:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="ProductID"
 Height="400px" ScrollMode="Both" DataSourceID="AccessDataSource1">
    <Columns>
      <wijmo:C1BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True"
           SortExpression="ProductID">
      </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName">
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID">
          <GroupInfo OutlineMode="StartCollapsed" Position="Header" />
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID">
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit">
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice">
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock">
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder">
     </wijmo:C1BoundField>
     <wijmo:C1BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel">
     </wijmo:C1BoundField>
     <wijmo:C1CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued">
     </wijmo:C1CheckBoxField>
   </Columns>
 </wijmo:C1GridView>
 <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Product.mdb"
        SelectCommand="SELECT TOP 30 * FROM [Products]"></asp:AccessDataSource>
 


Now if we handle the resize event of the browser or any other event and use “doRefresh” method in order to redraw the grid, then all the groups will revert to their original state i.e. collapsed. Even, if the end user has opened ‘n’ number of groups.

To maintain the opened states of the groups, you need to save the indexes of the groups which are open in the same event but before “doRefresh” is called. Using the saved list of indexes, you can restore these groups with the help of OnClientRendered event.

See the complete code below.


<script type="text/javascript">
//declare array for saving group header rows
 var openGroupHeaderRows = new Array();
 var timer = 0;

 $(window).resize(function () {
   //The resize event may fire multiple times during window resize so it is better to call setSize() by timeout
   if (timer > 0) {
      window.clearTimeout(timer);
   }

   if (timer !== -1) {
     timer = window.setTimeout(function () {
       timer = -1;
       try {
         var width = $(window).width();
         $("#C1GridView1").c1gridview("setSize", width, 300);
       } finally {
         timer = 0;
       }
     }, 100);
   }

 //counter to save the number of open groups
 var j = 0;
 //retrieve the collection of group header rows
 var groupHeaderRows = $(".wijmo-wijgrid-groupheaderrow");

 for (i = 0; i < groupHeaderRows.length; i++) {
   var divs = groupHeaderRows[ i ].getElementsByClassName("wijmo-wijgrid-innercell");
   //check if the group is expanded by its icon
   if (divs[0].firstElementChild.className == "ui-icon wijmo-wijgrid-grouptogglebtn ui-icon-triangle-1-se") {
     //save the row index of group
     openGroupHeaderRows[j] = groupHeaderRows[ i ].rowIndex;
     //increment the counter
     j++;
   }
 }

 //redraw the grid
 $("#C1GridView1").c1gridview("doRefresh");
});

 function GroupRendered(e) {
    //retrieve the collection of group header rows
    var groupHeaderRows = $(".wijmo-wijgrid-groupheaderrow");
    //retrieve the collection of data rows
    var dataRows = $(".wijmo-wijgrid-datarow");
    var lastDataow;
    for (i = 0; i < groupHeaderRows.length; i++) {
       for (j = 0; j < openGroupHeaderRows.length; j++) {
            //check for the groups which were open
            if (groupHeaderRows[ i ].rowIndex == openGroupHeaderRows[j]) {
              // get the datarows withing this groupd
              var initialDataRow = groupHeaderRows[ i ].rowIndex + 1;
              //check the group is the last group
              if (i != groupHeaderRows.length - 1) {
                  lastDataow = groupHeaderRows[ i + 1 ].rowIndex;
               }
               else {
               lastDataow = dataRows[dataRows.length - 1].rowIndex;
               }
               //traverse through the data rows
               for (drIndex = 0; drIndex < dataRows.length; drIndex++) {
                  //check if the datarow is between the selected group
                  if (dataRows[drIndex].rowIndex >= initialDataRow && dataRows[drIndex].rowIndex < lastDataow) {
                     //set the display of these rows to inline in order to display them
                     dataRows[drIndex].style.display = "inline";
                  }
               }
              //set the groupd icon to be expanded
              var divs = groupHeaderRows[ i ].getElementsByClassName("wijmo-wijgrid-innercell");
              divs[0].firstElementChild.className = "ui-icon wijmo-wijgrid-grouptogglebtn ui-icon-triangle-1-se";
          }
       }
    }
 }
 </script>


Download Sample