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">
<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>
MESCIUS inc.