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 Stephen,
Thank you for using the column moving feature of igGrid. It is still CTP but in the next release it will be RTM.
The order of the columns can be taken from the columns option of the igGrid.
var columns = $("#grid1").igGrid("option", "columns");
It order in the columns array is the same as theis order after column moving.
http://help.infragistics.com/jQuery/2012.2/ui.iggrid#options
Hope this helps.
Thanks very much for that. I've got the storing of cookies part working now, but now I'm struggling to put the columns into the right order when the grid is loaded (based on in the info in the cookie I stored).
The cookie is storing an array containing the column keys in the order they are arranged in. I'm looping over each item in the array and calling the moveColumn method for igGrid to move each column to the appropriate place. Code is below...
var columnOrder = getGridSettingFromCookie(userID, pageName, gridName, COLUMN_ORDER_SETTING);if (columnOrder != null) { $.each(columnOrder, function (index, column) { $(gridID).igGrid("moveColumn", column, index); });}
So, this kindof works (at least the columns are being re-arranged correctly, but the problem is that the column headings now aren't all displayed properly. E.g, after I've moved the ID column from the first place to the last place, the heading for this column becomes blank and the options * isn't there.
I figure the problem is where I'm trying to restore the grid settings from cookies. I'm doing this in the handler for the iggridrendered event.
Can you please help me with this, either by letting me know if there's a better way to restore the column orders, or if I should be doing this a different event to iggridrendered.
Kind regards
EDIT
Sorry to tag this on, but the whole concept of restoring grid settings for a user seems to be a pretty common thing to want to do, but there's really not much help in the API or the documentation for igGrid to aid this. It would be great if there was a simple method for the grid to save all settings (filter, sorting, group-by, paging, column hiding, column widths), and a single method to restore all these settings when the grid is loaded.
I've just come across another difficulty in saving the groupBy settings to a cookie and later restoring the settings when the grid loads. Currently, I'm able to save an array of grouped column keys to a cookie, and restore these correctly when the grid loads using the code below (for restoring the settings)...
var groupedColumns = getGridSettingFromCookie(userID, pageName, gridName, GROUPING_SETTING); if (groupedColumns != null) { $.each(groupedColumns, function (index, columnKey) { $(gridID).igGridGroupBy("groupByColumn", columnKey); }); }
But I'm not sure what method I can use to restore the column sorting when a grouped by column is sorted. Also, there doesn't seem to be any event that picks up the fact that the grouped-by column has been sorted. Certainly the iggridgroupbygroupedcolumnschanged or iggridsortingcolumnsorted events don't fire on this.
Any help is very much appreciated.
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!
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 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!