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).

Parents
No Data
Reply
  • 24671
    Suggested Answer
    posted

    The easiest way to restore the state would be to set the initial values for page size, sorted columns, and filters to the values loaded from your GridInfo object (if any).

    So for paging you can set currentPageIndex in the paging options, when the grid is created, and leave it as 0 by default. For sorted columns, you can do that using the columnSettings array, the same for filters:

    http://help.infragistics.com/jQuery/2012.2/ui.iggridpaging => options

    http://help.infragistics.com/jQuery/2012.2/ui.iggridsorting => options => columnSettings

    http://help.infragistics.com/jQuery/2012.2/ui.iggridfiltering => options => columnSettings

    Let me know if you have any other questions. Hope it helps. Thanks,

    Angel

Children