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
Hello,
If you are trying to restore a certain order of columns that you saved using ColumnMoving's API there is a better option. The moveColumn function is asynchronous which means you'll need additional code to do each of the column rearrangements sequentially. Additionally it will have a negative impact on the performance. What I can suggest is to serialize the columns object after each moving and then when you initialize the grid, parse the stored string into your new columns collection. The solution will look similar to this:
$("#grid1").bind("iggridcolumnmovingcolumnmoved", function (evt, ui) {
// some global variable that stores the serialized columns
savedColumns = JSON.stringify(ui.owner.grid.options.columns);
});
Then when you get the stored string and you want to initialize the grid you can do the following:
$("#grid1").igGrid({
columns: JSON.parse(savedColumns),
...
Please, let me know if I have misunderstood what you are trying to achieve. A small sample demonstrating the issue will help a lot too.
I am looking forward to hearing from you!
Best regards,
Stamen Stoychev
I am still following your case. Have you been able to move on with you project?
If you have any concerns or questions, please feel free to contact me, I will be glad to help you.
Thank you for choosing Infragistics components!
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 ??
Thanks,
Amit
Hello Amit,
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.
Can u share a code sample to maintain the column order after GRID renderd with best possible way??
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!
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,