Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1015
Saving and Loading igGrid State in localStorage
posted

IgniteUI 2012.2 - igGrid

I'd like to be save the user's settings like sorting, pageSize, pageIndex, column order, which columns are hidden, and filtering for the grid in localStorage.  The, when the page is loaded again, the grid would start out with the saved state.

I have managed to save some state, but I'm not sure how to set it again on load (and then if my saved state is in the correct format).  I call the below SaveGridState method from these feature events:

features: [
{
	name: "Sorting", 
	type: "local",
	columnSorted: function (evt, ui)
	{
		SaveGridState(ui.owner.grid);
	}
},
{
	name: "Paging", 
	type: "local",  
	pageSize: 10,
	pageSizeChanged: function (evt, ui)
	{
		SaveGridState(ui.owner.grid);
	}
},
{
	name: "Filtering", 
	type: "local",
	dataFiltered: function (evt, ui)
	{
		SaveGridState(ui.owner.grid);
	}
},
{
	name: "Hiding",
	columnShown: function (evt, ui)
	{
		SaveGridState(ui.owner.grid);
	},
	columnHidden: function (evt, ui)
	{
		SaveGridState(ui.owner.grid);
	}
}
]

function SaveGridState(grid)
{
	if (Modernizr.localstorage) {
		// window.localStorage is available!

		var gridInfo = new Object();

		gridInfo.id = grid.id;
	
		gridInfo.pageSize = grid.dataSource.settings.paging.pageSize;

		gridInfo.pageIndex = grid.dataSource.settings.paging.pageIndex;

		gridInfo.columnFilters =  grid.dataSource.settings.filtering.expressions;
		//	maybe?	//gridInfo.columnFilters = grid.element.igGridFiltering("option", "columnSettings");
			
		gridInfo.columnSort = grid.dataSource.settings.sorting.expressions;
		//	maybe?	//gridInfo.columnSort = grid.element.igGridSorting("option", "columnSettings");
		
		gridInfo.columnVisibility = grid.element.igGridHiding("option", "columnSettings");

		localStorage.setItem("MyBudgetsGridSettings", JSON.stringify(gridInfo));

	} else {
		// no native support for HTML5 storage :(
	}
}

I've tried using a few events of the grid (created, databinding, etc) to reload this saved state but I haven't had much luck.  I've also tried using a datasource like this post.  Do you have any ideas?  BTW, I'm using local data in the form of a JS object but will probably move that server side in the future (oData or JSON webAPI).