Capturing column re.order and use information

[marco]

Hi there,

I have this "simple" requirement:

Whenever a user reorder columns, I have to know of it, reordering properly my objects and saving my objects to some server-side structure.

I see there is a ColumnDrop event that may come in handy, yet it does not give me all data I need.

I need to know:

1) Which column has been moved (simple: event.column)

2) From which Position were moved (simple: in the model the column has the same index as before)

3) Which is the new Position (it is: where were dropped)

The third seems not so easy to manage for there is a property (event.targhet) which is the column that will be shifted, but i can't find whether the column will be shifted forward or backward. When I write Position, I am introducing a concept of my "model" for the grid itself only manage a Priority concept (I rekon). So: to know the position of the targhet I can relay on event.target.parent().prevAll().lenght (and find the index of the column in the model), and so know if the column has been moved to the left or to the right of its original position, yet I cannot find a property that tells me whether has been dropper before or after the target.

Please keep in mind I also manage negative position for client-only columns.

All that I need to properly manage the action is: which column is moved, where it was, where it is, and the shift direction (should I add 1 to Position of any following cols, or add -1 to any previous col?).

It may seems simple yet it is tricky for it is not documented how the "target" is choosed.

Thanks in andvance for your help.

Marco

[Bruce Van Horn]

I was looking for something similar - I wanted column drops on the grouping bar.

It fires on "actionComplete".  I'm pretty sure that fires on most things you can do, and it's the last event that fires.

As for the columns, I think you're going to have to save the state of the columns on load, and then compare after the actionComplete.  I think off the event you can find the column model in grid.model.columns.  That's as far as I went.  My use case was a custom export to excel where I needed to have the excel sheet have the same columns in the same order if the user re-ordered them, hid some columns, etc.  Everything about the columns is in that model.columns array.

[marco]

As a fact, model.columns does not change just for a column reordering. I inspected that several times, and if any change is stored, may be in some other property like views and so on, however I did seek a proper and "approved" way to meet my requirements so I have not to dread for the next release changing some "internals" I improperly relay on. It is either the event or the way the target of the event is choosed to make me know exactly the new position. 

The original position I know, for I store myself in my structures, but I have to update it when a column has moved.

Where it has moved (before or after the target of the event) it seems difficult to find out. May be it is always "before" or "after", which in turns may means "instead of" or "beside" considering direction it has taken.

[Prasanna Kumar Viswanathan]

Hi Marco, 

 

Thanks for contacting Syncfusion support. 

 

According to your requirement whenever you reorder the columns in Grid you need to know the columnName, Old Position Index and new Position Index. To get these values we used columnDrop event of ejGrid. By using arguments of columnDrop event we display the mentioned values.  

 

Find the code example, screenshot and sample:  

 

columnDrop: function (args) { 

            var columnName = args.column.field; 

            for(var i=0 ; i < args.model.columns.length; i++ ){ 

                if(args.model.columns[i].field == args.column.field) 

                    var lastTarget = i+1;                                             

                if(args.model.columns[i].field == args.target.attr("data-ej-mappingname")) 

                    var currentTarget = i+1; 

            }  

            console.log(columnName + " column is moved from " + lastTarget + " position to " + currentTarget+ " position" ) 

        },     

   

Screenshot:  

 

 

 

 

 

In above screenshot we moved OrderDate column to the Freight column position. In this you also mentioned that when export to excel you need to have the excel sheet with same columns in the same order if the user re-ordered them, hid some columns etc., By default, once we reorder the columns and export to excel  in excel sheet the columns will be in same order.  

 

Find the JSPlayGround sample:  

 

Sample: http://jsplayground.syncfusion.com/ktwlhkca 

 

Screenshot:  

 

 

 

Excel :  

 

 

 

In this you have mentioned that once we performing reordering in Grid you also need to change the order in this.model.columns.  So, please provide more information for the purpose of changing the order in this.model.columns. 

 

Regards, 

Prasanna Kumar N.S.V 

[marco]

Hi Prasanna,

I will check you kindly provided snippet soon, yet I don't know if the column is dropped before or after the target.

Meanwhile you wrote:

"In this you have mentioned that once we performing reordering in Grid you also need to change the order in this.model.columns.  So, please provide more information for the purpose of changing the order in this.model.columns." 

Probably my English is not as well as I thought, as you point-out, I have not such a requirement. Just noticed that the model is preserved unchanged, I just need to know the new Index. In a few day I'll will back here to report how it works the snippet (concept) you just fournished.

For the present I thank you for your assistance,

Read me soon,

Marco

[Prasanna Kumar Viswanathan]

Hi Marco, 

We will wait to hear from you. 

Regards, 

Prasanna Kumar N.S.V 

[marco]

Hi Prasanna,

I've tried your solution and deterministically works, regardless of which direction the column is moved, so the keypoint was: "target" it is always the column preceding the dropped one, so a +1 is required.

Please take note of the other thread of mine (https://www.syncfusion.com/forums/132043/custom-header-template) for when using that custom header template this snippet is not even invoked.

Thank you for you kind support,

Marco 

[Vignesh Natarajan]

 Hi Marco, 

We have analyzed your issue and we are able to reproduce issue at our end. It is an defect. We have logged an issue ”Reordering is not working fine with header template”. The mentioned issue will be fixed and it will be included in the Volume 3 Service pack 2 which is expected to be rolled out by end of September month.  

Regards, 

Vignesh Natarajan