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

[Liu Peng]

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?

[Princy]

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.

[Liu Peng]

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

[Liu Peng]

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