<div class="content-container-fluid">
<div class="row">
<input type="button" onclick="SaveState()" value="SaveTheState" />
<div class="cols-sample-area">
<div id="expandCollapse"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#expandCollapse").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
----
columns: [
----
],
// Set the expand/collapse into grid when we refresh the page
dataBound: function(args){
var value = window.localStorage.getItem("ejGridCollapseExpand"); // Get the data of expand/collapse from window.localStorage
var val = ej.parseJSON(value);
for(var j=0; j<val.length; j++){
var row = this.getContentTable().find('tr.e-groupcaptionrow')[val[j]];
this.expandCollapse($(row).find("td.e-recordplusexpand > div").first());// expand/collapse the data using expandCollapse method of ejGrid
}
}
});
});
// save the current state of the Grid for expand /collapse
function SaveState(args){
var collapsedGroup = $(".e-grid .e-recordpluscollapse");
var model = [];
for(var i = 0; i<collapsedGroup.length; i++){
var groupedRow = $(collapsedGroup[i]).parent('.e-groupcaptionrow').index();
if(groupedRow != 0 && !ej.isNullOrUndefined(groupedRow))
groupedRow = groupedRow / 2;
model.push(groupedRow);
}
window.localStorage.setItem("ejGridCollapseExpand", JSON.stringify(model)); //set that expand/collapse data into the window.localStorage
}
</script>
| 
