Saving the settings of Grid on per user basis in the database

Hi Team,

I am trying to save the settings (sorting,grouping,filtering,paging, width, column order, column visible) of the Hierarchical Grid on per user basis.

I am creating the grid in the controller using GridModel class and passing the same to the view.

What I understand is I will have to save the individual settings in cookie as below:

document.cookie = “columnSetting=;expires=Thu, 01 Jan 1970 00:00:01 GMT;”;

var persistSorting = $(“#grid11”).igGridSorting(“option”, “columnSettings”);
document.cookie = “sortingsetting” + “=” + persistSorting;

var columnSetting = $(“#grid11”).igGrid(“option”, “columns”);
document.cookie = “columnSetting=” + columnSetting + “;”;

var persistFiltering = $(“#grid11”).igGridFiltering(“option”, “columnSettings”);

document.cookie = “filteringSetting=” + persistFiltering + “;”;

//…..

//…..

Is there any other simpler way using which I can save all these and other settings in the database so that when the user logs in again, I can show a personalized grid to the user.

Also, how to bind these settings again to the Hierarchical Grid so that the Grid has the saved structure and data given that I am creating the grid,features,columns using GridModel class in the controller.

-Regards,

Agraj

Hello Agraj,

Thank you for posting in our forums!

First, I would recommend using the events for the igGrid’s features to store the user’s settings.  This can be done in events like dataFiltered, columnSorted, and pageIndexChanged events, to name a few.

The arguments in these events provide the information needed that can be saved and restored.

As for restoring these settings, if you want to save the user’s settings on the server, you would need to send their settings to the server and then apply the settings while setting up your GridModel.  Saving the settings on the client with a cookie, or localStorage is simpler.  This would require using javascript to save and restore the settings.

Similar to saving the settings in the features’ events, you can use their own methods to restore the settings.  The filter, sortColumn, and pageIndex methods/options can be used for this for example.  You would need to apply these after the grid is instantiated on the page.

I have attached to this update a simple sample demonstrating saving and restoring the sorting, filtering and paging settings on the client side using localStorage.

If you want to save the settings on the server, you can parse the information when the user loads the page while you are setting up your GridModel and apply the settings to the features.  Some functionality may need to still be handled on client side, which is why I recommend the former approach.

If you need any further assistance with this, please let me know and I will be glad to help.

Hi Michael,

Thank you for your helpful reply.

I could manage to save sorting, paging, filtering, grouping in the local storage, will try sending it to backend and save it in the database to persist on a per user basis.

Also, is saving of column width, the style, hiding, moving possible?

I tried to do:

var columns = $('#grid11').igGrid('option', 'columns');
localStorage.setItem('igGridCols', JSON.stringify(columns ));

And while fetching:

//for (var i = 0; i < igCols.length; i++) {
//alert(igCols[i].key);
//alert(igCols[i].hidden);
$('#grid11').igHierarchicalGrid('option', 'columns', igCols);
//}

This shows that whether the column is hidden or not, but displays the columns as it is without applying the changes.

Similarly, can we persist the width,css/theme,index and other things on the grid and store it in database?

-Regards,

Agraj

Hi,

I was trying with:

$('#grid11').igGrid('option', 'columns', igCols); 

but this also didn't work.

The alert in the above reply shows that the column is hidden, but while binding, it displays all the columns.

-Regards,

Agraj

Hi Again,

I was able to hide the column using the below code:

for (var i = 0; i < igCols.length; i++) {
if (igCols[i].hidden) {
$('#grid11').igGrid('hideColumn', igCols[i].key);
}
}

But, for setting the width, css and other stuff, do I need to individually assign each property? or is there a shortcut to do that?

-Regards,

Agraj

Hi Agraj,

If you are going to be storing these settings on the server, it would be better to set these changes to the columns when you are setting up your GridModel for the user.  If you have ColumnResizing, ColumnMoving, and ColumnHiding enabled, when saving, you can aggregate the user's settings and you can specify the column widths, order and visibility when creating the GridModel.  Setting these through javascript would be redundant if you can just set them on the server.

And as for storing the theme, the theme is decided based on what CSS file you include on the page.  If you give your users different options for themes, you can specify which CSS theme file to render on the page.  Please see our documentation on styling for more information.

If you need further assistance with this, let me know.