Reordering columns client side & Saving order in DB

3 posts, 0 answers
  1. Guilhem
    Guilhem avatar
    14 posts
    Member since:
    Aug 2016

    Posted 09 Jun 2017 Link to this post

    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

  2. Eyup
    Admin
    Eyup avatar
    4074 posts

    Posted 13 Jun 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Guilhem
    Guilhem avatar
    14 posts
    Member since:
    Aug 2016

    Posted 14 Jun 2017 Link to this post

    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.

Back to Top