Thank you for your reply.

However, I wanted to clarify that in the beginning, the datasource is empty, so is the grid. Then I move a column (with movetype : DOM or RENDER). Then I add data to the datasource and databind the grid. I am not adding rows with the update feature of the grid. I am adding rows to my datasource. At this time the header is moved to the new place but the column remains in its old position.

I hope this helps to understand my situation.

Hello Bhat,

A possible reason causing this issue is mismatch between the key values in the igGrid column section and the JSON objects fields names (in bold in the code bellow).

                        columns: [

                            { headerText: "Product ID", key: "ProductID", dataType: "number" },

                            { headerText: "Product Name", key: "Name", dataType: "string" },

                            { headerText: "Distributor",  key: "Distributor", dataType: "string" },

                            { headerText: "Quantity", key: "Quantity", dataType: "number"},

                            { headerText: "Price", key: "Price", dataType: "number"}

                        ],

products[0] = { "ProductID": 1, "Name": "Adjustable Race", "Distributor": "Danny Ltd.", "Quantity":12, "Price":23 };

It also should be noted that even in cases when data source is empty it is recommended data to be bound to the grid before applying functions such as column moving.

If you have more questions or concerns contact me again.

Hi Dimka,

I worked with your example and my code and found out that if you add a column template to any of the columns, the column moving fails before databind. Attached is the sample

Hello Bhat,

I am following up check if you have been able to resolve your issue. If you have more questions or concerns don’t hesitate to contact me again.

Hello Bhat,

Thank you for your reply.

I have tested your scenario by using empty data source initially. I bind data after I have done column movements in advance and the records are again displayed in the correct order.

Note that in order to correctly reflect the changes (and record additions) done to the grid's data source, calling dataBind is required in this case. In order to allow me to examine this further it would be helpful to know if you are using a different version of Ignite UI in this case.

I have attached the modified sample.

Please let me know if this helps. If you have more questions don’t hesitate to contact me again.

Considering that I specify en empty datasource to the grid in the beginning. Later I populate the datasource as

products[0] = { "ProductID": 1, "Name": "Adjustable Race", "Distributor": "Danny Ltd.", "Quantity":12, "Price":23 };

Now how to reflect this data on the grid without rebinding or using igGrid('dataBind') ?