C1GridView : Saving Open GroupState on Server side Editing

When a group is expanded and any row is edited by clicking the Edit button in Wijmo Gridview with server side editing, the group gets collapsed. This is because in server side editing, clicking the Edit button causes a postback and the C1GridView renders in original state i.e. all groups are in collapsed state. And, the user will have to re-open that group again in order to make any change in that row. There are different ways to avoid this :

1. Set the original state of the Gridview to expanded, but it would not be a good way if we have a large number of groups.
2. Use client side editing
3. Manually set the open state of that specific group of rows using jQuery.

In this blog, we will discuss the third approach and see how we can achieve it. Suppose, we have Wijmo Gridview bound to Products table with server side editing enabled and applied grouping on SupplierID column. The code for same will be:

 <wijmo:C1GridView ID="C1GridView1" runat="server" AllowPaging="True" AutogenerateColumns="False"  
 AutoGenerateEditButton="True" DataKeyNames="ProductID" 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 * FROM [Products]"></asp:AccessDataSource>  

On debugging this code, if the user edits any row postback occurs and the grid renders in collapsed state. The user will need to again search and re-open the group in which he wanted to edit the row. The reason for this is when you collapse any group then the "display" property of its child rows becomes none. So, the trick is to find the group which is selected by the end user, access its child rows, and then set their display property to inline so that they can be displayed. Here is the jQuery code which will do this work:

<script type="text/javascript">  
$(document).ready(function () {  

    //get the collection of group header rows  
    var headerrows = $(".wijmo-wijgrid-groupheaderrow");  

    //retrieve the collection of data rows  
    var dataRows = $(".wijmo-wijgrid-datarow");  

    //this is to check whether you have clicked edit button  
    if ($(".c1-c1gridview-editrow").length != 0) {  
        //get the index of edited row  
        var originalIndex = $(".c1-c1gridview-editrow")[0].rowIndex;  

        //traverse through group header rows  
        for (i = 0; i < headerrows.length; i++)  
        {  
            //find the groups between which that edited row lies  
            if (originalIndex > headerrows[ i ].rowIndex && originalIndex < headerrows[ i  + 1].rowIndex)  
            {  
                var initialRow = headerrows[ i ].rowIndex + 1;  
                var lastRow = headerrows[ i  + 1].rowIndex;  
                //traverse through the data rows  
                for (j = 0; j < dataRows.length; j++) {  
                    //check if the datarow is between the selected group  
                    if (dataRows[j].rowIndex >= initialRow && dataRows[j].rowIndex < lastRow) {  
                        //set the display of these rows to inline in order to display them  
                        dataRows[j].style.display = "inline";  
                    }  
                }  
                //retrieve the group icon  
                var divs = headerrows[ i ].getElementsByClassName("wijmo-wijgrid-innercell");  
                //change the group icon to expanded  
                divs[0].firstElementChild.className = "ui-icon wijmo-wijgrid-grouptogglebtn ui-icon-triangle-1-se";  
            }  
        }  
    }  
});  
</script>  

Include the above script in your sample and we are done. Download Sample