Hi,
I'm currently trying to save the igGrid settings (filtering, sorting, column order etc.) to cookies, so that those settings can be restored when the user returns to the same grid. This is working fine for filtering, sorting and paging, but I'm having some trouble saving the column order when a column is moved.
I'm handling the event iggridcolumnmovingcolumnmoved, and then calling code which needs to save the new column order to a cookie. The event handling is working fine, but I'm not sure what properties to access which store the column order. For the other settings (like filtering), I'm getting the data I need from $(gridID).data("igGrid").dataSource.settings, but the column order doesn't seem to be stored in there. Likewise, I can't find the column order in the evt or ui parameters that are passed into my event handler.
Can you please help with with this?
Hello Deon,
I am not quite sure what your exact use case is, however, if the column definition the grid is initialized with differs from the one you are pushing in the iggridrendering event handler by more than just order (e.g. the new column definition has columns not defined on initialization), then the new column definition will not adhere to the initial schema which prevents the grid from data binding. One possible solution to this is setting localSchemaTransform to false. This can cause some side effects, such as date columns represented by strings in the data source not getting auto-parsed, but it's worth a try.
I hope this helps!
Best regards,
Stamen Stoychev
Hello Stamen,
I am saving away the column setting to local storage in an MVC project. When the grid loads, i am reloading the settings in the "iggridrendering" event. This works fine, except if the source columns change - e.g. when removing a column from the datasource. This now causes an error when the grid loads, as the removed column is loaded but then not found.
What is the best way to handle changes to the column definitions when saving away the column settings?
Regards
Deon
Hello Stephen,
Could you please share how you are able to save the grid filtering setting (FILTERING_SETTING)? The igGrid filtering api does not provide for any events that fire after a column is filtered upon. Your help is much appreciated!
Hi again,
I have a few more questions relating to the saving and restoring of grid settings.
Firstly, the settings I'm saving/restoring are -
* Column Order
* Column Widths
* Hidden Columns
* Column Filters
* Page Size
* Column Sorts
* Grouped Columns
Using some of the previous suggestions, I'm doing the restoring of settings by handling both the iggridrendering event and the iggridrendered event.
In the iggridrendering handler, I set the grid's columns array from my cookie data using the following code -
// Sets the grid columns based on the cookie data.var columns = getGridSettingFromCookie(COLUMN_SETTING);if (columns != null) { $("gridSelector").igGrid("option", "columns", columns);}
This restores the column order, column widths and hidden columns.
In the iggridrendered hander, I set the column filters, page size, column sorts and grouped columns using the following code -
// Sets the grid column sorting based on the cookie data.var sortingExpressions = getGridSettingFromCookie(SORTING_SETTING);if (sortingExpressions != null) { $.each(sortingExpressions, function (index, expression) { $("gridSelector").igGridSorting("sortColumn", expression.fieldName, expression.dir); });}
// Filters the grid based on the cookie data.var filteringExpressions = getGridSettingFromCookie(FILTERING_SETTING);if (filteringExpressions != null) { $("gridSelector").igGridFiltering("filter", filteringExpressions, true);}
// Sets the grid page size based on the cookie data.var pageSize = getGridSettingFromCookie(PAGE_SIZE_SETTING);if (pageSize != null) { $("gridSelector").igGridPaging("pageSize", pageSize);}
// HACK: Limitation that it doesn't restore ascending/descending column sorting.// Sets the grouping based on the cookie data.var groupedColumns = getGridSettingFromCookie(GROUPING_SETTING);if (groupedColumns != null) { $.each(groupedColumns, function (index, columnKey) { $("gridSelector").igGridGroupBy("groupByColumn", columnKey); });}
Note that I'm saving the settings by handling various events when different grid settings change, and then saving the relevant data to cookies.
This works fairly well overall, but it's not working perfectly. My questions are -
1. I can't find a way to save the grouped column sorting. Can you tell me how I can do this?
2. Does my logic for restoring the grid settings seem reasonable to you, or can you think of a better way to do this?
3. When the grid loads up, the last column always expands out to fill the space. I've set the width of the grid to "100%", but I'd like the last column to only take up the width it's set to. I'm developing an ASP.NET MVC application and setting up a GridModel instance to pass to the view from the server. I've noticed there's an AutofitLastColumn property on the GridModel, but for some reason this is a string rather than a bool, and if I set it to something like "false", nothing changes. Even when I set this option in JavaScript using the code $("gridSelector").igGrid("option", "autofitLastColumn", false); nothing changes. Please let me know how I can achieve this.
Thanks for all your help once again
The best way to save and restore the columns order would be to serialize the columns collection in the cookie and then initialize the grid with it. If you are using the MVC wrapper of the control you can achieve this by binding to an event firing early in the grid's initialization process (such as "rendering") and change the default column collection (coming from the server) in its handler.
Your approach is also possible but due to the limitations of the Column Moving API - moving a single column at a time, it'll create a lot of element swapping (if you choose to move through DOM manipulation) or unnecessary rerendering.
With this said, in your particular code sample you've hit a bug with the "moveColumn" method (please have in mind Column Moving was released as CTP for 2012.2). You can circumvent it by modifying the call in the following way:
$(gridID).igGrid("moveColumn", column, index, true, true);
We'll make sure to have the bug fixed for the RTM release expected with Ignite UI 2013.1. Also you are likely to find more issues when trying to move columns if you also enable features like GroupBy and Hiding and I would personally recommend not using ColumnMoving with them before it gets its RTM release.
If you'd like a feature added to the controls make sure to submit a feature request through this link. Development of new functionality is almost exclusively based on user feedback.
Hope this helps! Thank your using the Infragistics forums!