Hi,
I have Grid where in one column has column moving set to false with index 0. I am trying to move another column with column moving enabled to that index. The grid will allow while moving that column to the Index 0, but after reloading the Grid with the same positions and column settings the original column which was at Index 0 is remaining in that position instead of the moved column.
I am using below function to set the column positions:-
if (scenarioSpecGrdSet.columns.length > 0) { for (var i = 0; i < scenarioSpecGrdSet.columns.length; i++) { $("#" + gridId).igGridColumnMoving("moveColumn", scenarioSpecGrdSet.columns[i].columnKey, scenarioSpecGrdSet.columns[i].newIndex, true, true); } }
Thanks in Advance,
Praveen Divekar
Hi Stamen,
I am able to save the columns and while loading back i am looping over the array containing columnkeys and newIndex. I am using below method to reload the Column order after loading the GRID.
$("#gridId").igGridColumnMoving("moveColumn", columns[i].columnKey, columns[i].newIndex, true, true);
But the the approach whatever u posted i am not able to get the newIndex for all the column keys. How can i impliment that using this method jus only by using columnKeys?
Is there any method available to restore the column orders using only columnkeys?
Thanks in Adavnce,
Amit
Hello Amit,
A full solution will depend on the the way you plan to store the column order. I am attaching a sample in which I use a browser cookie to store the string representation of an array containing the column keys in the correct order. It's updated every time the columnMoved event is fired. The event handler looks like this:
columnMoved: function (evt, ui) { var colOrder = [], i; for (i = 0; i < ui.owner.grid.options.columns.length; i++) { colOrder.push(ui.owner.grid.options.columns[i].key); } // to reduce the size of the cookie we'll only store the order setCookie("columnOrder", JSON.stringify(colOrder), 7); }
You can find the setCookie definition and a few more utility functions in the sample. On page load we search for the cookie and build a column collection in the order it specifies (or fall back to a default one if the cookie cannot be found).
If you are saving the order on server side the whole save/load process will be replaced with AJAX calls.
As for updating the order after the grid is initialized, the quickest way is to destroy and recreate it using the new order. In the sample I am demonstrating this with the "Reset Order" button which deletes the cookie and sets the default order of columns.
Please, let me know if you have any other questions or concerns!
Best regards,
Stamen Stoychev
Can u share a code sample to maintain the column order after GRID renderd with best possible way??
Thanks,
With Ignite UI 14.1 the rowTemplate option is deprecated and you won't have to worry about fixed column positions for it. You can only have column templates and as their definitions are part of the columns collection they'll get stored along with the columns' order.
The moveColumn function can still be used to do column rearrangement after the grid has rendered. It is just not the optimal way for restoring an arbitrary order. If you need to set a certain order it's best done through destroying the grid and recreating it with the said order. It will be multiple times faster than doing a multitude of moveColumn calls with each of them involving a good amount of DOM operations.
I hope this helps! Please, let me know if you have any other questions.
If i create Custome template with some columns in fixed position then how can i use the above approach and also is that possible to fix the column positions after rendering of the Grid ??