Skip to main content Skip to footer

Wijmo Gridview : Restoring Group States at Client Side

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">  
      <wijmo:C1BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True"  
     <wijmo:C1BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName">  
     <wijmo:C1BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID">  
          <GroupInfo OutlineMode="StartCollapsed" Position="Header" />  
     <wijmo:C1BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID">  
     <wijmo:C1BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit">  
     <wijmo:C1BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice">  
     <wijmo:C1BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock">  
     <wijmo:C1BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder">  
     <wijmo:C1BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel">  
     <wijmo:C1CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued">  
 <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) {  

   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  

 //redraw the grid  

 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";  

Download Sample


comments powered by Disqus