[Solved] RadGrid columns do not follow css rules after drag-n-drop

[Matt]

Hi,
I am having problems with drag-n-drop columns into group pane, here is the declaration of gird:

<style type="text/css">
    .w130px {width: 130px;}
    .w400px {width: 400px;}
</style>

<telerik:RadGrid ID="radGrid" AutoGenerateColumns="false" runat="server" width="100%" ShowGroupPanel="true" DataSourceID="dataSource1">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="DesktopModuleID" HeaderText="DesktopModuleID" ItemStyle-CssClass="w130px" HeaderStyle-CssClass="w130px"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ModuleName" HeaderText="ModuleName"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" ItemStyle-CssClass="w400px" HeaderStyle-CssClass="w400px"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="true">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

I drop a column into the group pane, find the header and item columns not aligned. The header columns still follow css rules, which has 130px, remaining space and 400px, but each item column seems to have 1/3 of table width.

If I remove the Scrolling:UseStaticHeaders, the problems seem to go away, but I need to have data grouping and static header work together. 

Please help

[Matt]

Hello,
Does anybody has solution or workaround for this? It's frustrating for me to have less than 10 lines of codes not working and need them to work.

Thanks again

[Veli]

Hello Matt,

The recommended approach for setting your column width is through the HeaderStyle-Width property:

<telerik:GridBoundColumn DataField="ID" HeaderText="DesktopModuleID" UniqueName="DesktopModuleID"
    HeaderStyle-Width="130px" />
<telerik:GridBoundColumn DataField="Name" HeaderText="ModuleName" UniqueName="ModuleName" />
<telerik:GridBoundColumn DataField="Name" HeaderText="Description" UniqueName="Description"
        HeaderStyle-Width="400px"/>

This approach uses inline styles to set the column widths and is compatible with column calculations RadGrid performs when you have enabled static headers.

Greetings,
Veli
the Telerik team