How to keep column's width and horizontal align when reorder one column?

4 posts, 0 answers
  1. Liu Peng
    Liu Peng avatar
    18 posts
    Member since:
    Oct 2006

    Posted 02 Jun 2009 Link to this post

    Hi,

    My grid's column reorder settings:
    _radGrid.ClientSettings.AllowColumnsReorder = true
    _radGrid.ClientSettings.ReorderColumnsOnClient = true
    _radGrid.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder; 

    And have two columns: A and B, A's width is large and align left, B's width is small and align right, After reorder these two columns, the header and data swapped but can not keep its width and align attribute: A became small and align left, B is large and align right!

    How to keep column's width and horizontal align?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Jun 2009 Link to this post

    Hello Liu Peng,

    Which version of RadGrid are you using? I could not replicate this with the Q1 2009 version (2009.1.311.20). If you are using an older version try upgrading your controls to the latest version. The following kb article should probably help you out in upgrading your controls.
    Updating RadControls for ASP.NET to another version or license

    -Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Liu Peng
    Liu Peng avatar
    18 posts
    Member since:
    Oct 2006

    Posted 02 Jun 2009 Link to this post

    I'm using v2009.1.402.20
    you can replicate it at http://demos.telerik.com/aspnet-ajax/grid/examples/client/resizing/defaultcs.aspx :
    Change the column width for CustomerID and CustomerName to let them have different width and then change these two columns's order.

    My expected behavior is that when you move a column, it keep its width and horizontal align.

    thanks,
    LP



  5. Liu Peng
    Liu Peng avatar
    18 posts
    Member since:
    Oct 2006

    Posted 03 Jun 2009 Link to this post

    I have find a solution:
    for the column width, I using OnColumnSwapped event:
    // Column reorder settings 
    _radGrid.ClientSettings.AllowColumnsReorder = true
    _radGrid.ClientSettings.ReorderColumnsOnClient = true
    _radGrid.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder; 
    _radGrid.ClientSettings.ClientEvents.OnColumnSwapped = "OnColumnSwapped"
     

    function OnColumnSwapped(sender, eventArgs) 
        var sourceWidth, targetWidth; 
        var sourceIndex = eventArgs.get_gridSourceColumn().get_element().cellIndex; 
        var targetIndex = eventArgs.get_gridTargetColumn().get_element().cellIndex; 
        var tableView = sender.get_masterTableViewHeader(); 
         
        if (tableView  
            && tableView.ColGroup.Cols[sourceIndex] 
            && tableView.ColGroup.Cols[sourceIndex].width != '') { 
            sourceWidth = parseInt(tableView.ColGroup.Cols[sourceIndex].width); 
        } 
         
        if (tableView  
            && tableView.ColGroup.Cols[targetIndex] 
            && tableView.ColGroup.Cols[targetIndex].width != '') { 
            targetWidth = parseInt(tableView.ColGroup.Cols[targetIndex].width); 
        } 
         
        if (sourceWidth > 0 && targetWidth > 0) { 
            tableView.resizeColumn(sourceIndex, targetWidth); 
            tableView.resizeColumn(targetIndex, sourceWidth); 
        } 

    For the horizontal align, I replace setting ItemStyle.HorizontalAlign with ItemStyle.CssClass, because of cell's cssclass will be swapped normally.

    ;-)
    LP
Back to Top