Hi experts,
I'm studying grid's feature persist . http://igniteui.com/grid/feature-persistence
I see we can persist all features on page. But how can we persist features between postbacks? Is there a way to save the feature to database, and restore it next time we open the same page? Thanks in advance.
Hello Ming,
Thank you for posting in our community.
What I can suggest for achieving your requirement is getting the state of the features that you would like to persist using every features columnSettings option. This could be done on the relevant event for each feature such as dataFiltered, columnSorted etc. In these events you could store the current columnSettings in a localStrage varable. With local storage web applications can store data locally within the users browser. For example:
$(document).ready(function () { if (localStorage) { loadUserSettings(); } function loadUserSettings() { var tempSortCol = localStorage.getItem('igGridSortedColumns'); var tempFilterData = localStorage.getItem('igGridFilterData'); var tempCurrPage = localStorage.getItem('igGridCurrPage'); if (tempSortCol) { igGridSortedColumns = JSON.parse(tempSortCol); } if (tempFilterData) { igGridFilterData = JSON.parse(tempFilterData); } if (tempCurrPage) { igGridCurrPage = tempCurrPage; } } $('#grid1').igGrid({ height: '550px', dataSource: employees, features: [ { name: 'Sorting', type: 'local', mode: 'single', columnSorted: function (evt, ui) { var columnSettings = $('#grid1').igGridSorting('option', 'columnSettings'); localStorage.setItem('igGridSortedColumns', JSON.stringify(columnSettings)); } }, { name: 'Filtering', dataFiltered: function (evt, ui) { var filteringSettings = $('#grid1').data('igGrid').dataSource.settings.filtering.expressions; localStorage.setItem('igGridFilterData', JSON.stringify(filteringSettings)); } }, { name: 'Paging', type: 'local', pageSize: 10, pageIndexChanged: function (evt, ui) { localStorage.setItem('igGridCurrPage', ui.pageIndex); } } ] }); if (igGridSortedColumns.length > 0) { for (var i = 0; i < igGridSortedColumns.length; i++) { if (igGridSortedColumns[i].currentSortDirection) { $('#grid1').igGridSorting('sortColumn', igGridSortedColumns[i].columnIndex, igGridSortedColumns[i].currentSortDirection); } } } if (igGridFilterData.length > 0) { $('#grid1').igGridFiltering('filter', igGridFilterData, true); } else { if (igGridCurrPage >= 0) { $('#grid1').igGridPaging('pageIndex', parseInt(igGridCurrPage)); } } });
$(document).ready(function () { if (localStorage) { loadUserSettings(); }
function loadUserSettings() { var tempSortCol = localStorage.getItem('igGridSortedColumns'); var tempFilterData = localStorage.getItem('igGridFilterData'); var tempCurrPage = localStorage.getItem('igGridCurrPage');
if (tempSortCol) { igGridSortedColumns = JSON.parse(tempSortCol); }
if (tempFilterData) { igGridFilterData = JSON.parse(tempFilterData); }
if (tempCurrPage) { igGridCurrPage = tempCurrPage; } }
$('#grid1').igGrid({ height: '550px', dataSource: employees, features: [ { name: 'Sorting', type: 'local', mode: 'single', columnSorted: function (evt, ui) { var columnSettings = $('#grid1').igGridSorting('option', 'columnSettings'); localStorage.setItem('igGridSortedColumns', JSON.stringify(columnSettings)); } }, { name: 'Filtering', dataFiltered: function (evt, ui) { var filteringSettings = $('#grid1').data('igGrid').dataSource.settings.filtering.expressions; localStorage.setItem('igGridFilterData', JSON.stringify(filteringSettings)); } }, { name: 'Paging', type: 'local', pageSize: 10, pageIndexChanged: function (evt, ui) { localStorage.setItem('igGridCurrPage', ui.pageIndex); } } ] }); if (igGridSortedColumns.length > 0) { for (var i = 0; i < igGridSortedColumns.length; i++) { if (igGridSortedColumns[i].currentSortDirection) { $('#grid1').igGridSorting('sortColumn', igGridSortedColumns[i].columnIndex, igGridSortedColumns[i].currentSortDirection); } } } if (igGridFilterData.length > 0) { $('#grid1').igGridFiltering('filter', igGridFilterData, true); } else { if (igGridCurrPage >= 0) { $('#grid1').igGridPaging('pageIndex', parseInt(igGridCurrPage)); } } });
Additionally, for Hiding,Resizing and ColumnMoving you could take information from columns option of igGrid.
I am also attaching a sample illustrating my suggestion for your reference.
Please let me know if you need any further assistance with thi smatter.
One way i figure out is using $("#grid").igGridColumnMoving to sort my columns, is there a better way to do this? Sorry for bothering you twice~
Hi Vasya, Thank you for your reply, very impressive. like you said, I tried to make use of the columns property for Hiding,Resizing and Moving. Now, I can get the columns by using var col = $("#grid").igGrid("option", "columns"), but I dont know what's the best time to set it back. You can see following code, I tried set it back before igGrid initialized and after igGrid initialized. But both ways give me either "you cannot do this before igGrid get initialized" or "igGrid autoGenerateColumns is false, you must set it's columns". What's the correct way to do this??
//$("#grid").igGrid("option", "columns", cols); (you cannot do this before igGrid get initialized) $("#grid").igGrid({ dataSource: employees, //JSON Array defined above autoGenerateColumns: false, features: [ { name: "ColumnMoving" } ], }); //$("#grid").igGrid("option", "columns", cols);(igGrid autoGenerateColumns is false, you must set it's columns)