How to maintain the current state of the Expand/Collapse nodes after data source reset?

Sometimes, you want to maintain the current state of the Expand/Collapse nodes. Here is the code that shows how to maintain the current state of the Expand/Collapse node after datasource reset in button click.

$(document).ready(function () {

$gantt_container = $("#gantt_container");

// Initialize the FlexyGantt widget.

$gantt_container.FlexyGantt({

.................

FlatItemsSourceCreated: function (sender, args) {

var cachedItemsList = clonedHierItemsList;

if (cachedItemsList && args.Source.FlatItemsSource) {

for (var i = 0; i < cachedItemsList.length; i++) {

// Update the expand and collapse state based on previous gantt view.

if (cachedItemsList[i].isExpanded)

args.Source.FlatItemsSource[i].HierarchicalItem.IsExpanded(true);

else

args.Source.FlatItemsSource[i].HierarchicalItem.IsExpanded(false);

}

});

flexyGantt = $gantt_container.data("FlexyGantt");

var ganttDataSource = flexyGantt.options.DataSource;

var clonedHierItemsList = [];

$("#reset").click(function () {

jQuery.extend(true, clonedHierItemsList, flexyGantt.FlatHierarchicalItemsList)

//flexyGantt.options.DataSource = null; // In Flexygantt, it's not necessary to null the data source.

$gantt_container.FlexyGantt("option", "DataSource", ganttDataSource);

});