Reordering columns client side & Saving order in DB

[Guilhem]

Hello,

I was looking for a way to allow my users to customize their interface, and to choose the columns order of some grids.
I choose a client side reordering as I don't want the data to be reloaded (too long) and the ongoing modification lost (GridEditMode.Batch).

In order to save the preference of the user, I susbcribed to the "onColumnSwapped" event. Then my javascript function calls "ajaxManager.ajaxRequest" (which save the new columns order into my database)

First issue: in my "RadAjaxManager1_AjaxRequest" (server side), if I look the OrderIndex of the columns of my grid, they have their original values. Is this normal ?

I could decide to save the profil with a custom button "Save Column Order" (I tried and the OrderIndex are the correct / changed ones)  but I want to avoid adding another button to my interface.

As I already have the column order stored server side, I decided to simply send the two argument from the javascript to my server function:

var sourceIndex = eventArgs.get_gridSourceColumn().get_element().cellIndex;
var destinationIndex = eventArgs.get_gridTargetColumn().get_element().cellIndex;

Then I make the change myself server side and save it to the database.

It works well with GridClientSettings.GridColumnsReorderMethod.Swap.

However it doesn't work with GridClientSettings.GridColumnsReorderMethod.Reorder. The javascript event is called multiple times (swapping multiple time) but the ajax request is called only 1 time ! (the last time).

Example: If I move the 4th columns to position 1.
The javascript event is called 3 times with the following parameters (source, destination):
4,3
3,2
2,1

And my AjaxRequest is called only 1 time with the following parameters (source, destination):
2,1

Any suggestions ?

Thank you

[Eyup]

Hi Guilhem,

Instead of making an AJAX request every time, you can keep the new index of the columns using a HiddenField and splits its string value on code-behind every time when necessary:
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.hiddenfield(v=vs.90).aspx

Regards,
Eyup
Progress Telerik

[Guilhem]

Thank you Eyup for your answer.

But actually, it's necessary each time the user is reordering a column. Because I prefer not to ask any action to my user (and it's impossible to "detect" when the window is closed / browser is closed ...)

I tried to send the full column order and it works well. I mean when the ajax function is triggered, I successfully save the column order in my database. Here is my code:

grid.ClientSettings.AllowColumnsReorder = true;
grid.ClientSettings.ReorderColumnsOnClient = true;
grid.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder;
grid.ClientSettings.ClientEvents.OnColumnSwapped = "SaveProfil";

 

function SaveProfil(sender, eventArgs) {
   var splitID = sender.UniqueID.split('$');
   var id = splitID[splitID.length - 1];
   var columns = sender.get_masterTableView().get_columns();
   var order = "";
   for (var i = 1; i < columns.length; i++) {
       order += "," + columns[i].get_uniqueName();
   }

   var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
   ajaxManager.ajaxRequest(id + ";" + order);
}

 

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    string[] args = e.Argument.Split(';');
    if(args.Length > 1) {
        string idGrid = args[0];
        string order = args[1];

        //Save order in database
    }
}

 

However the ajax is not always triggered for some reason, even though the javscript event is always called and don't raise any errors. It just looks like my code

ajaxManager.ajaxRequest(id + ";" + order);

is being ignored sometimes.

 

Anyway, I gave up and I will simply put a button to save the current column order. That will do.