RadGrid Column width issues after upgrade to Telerik 2013.2.611 version

[Karthik]

Hi,

Yesterday I upgraded the telerik version to the latest 611 release and found that the RadGrid is not working fine as it was previously doing.
I have my RadGrid with some 10 columns and I have the ItemStyle-Width and the HeaderStyle-width set for each of the columns.
The grid renders fine for the first time when there is a postback performed the column settings are messed up for the headings.

I went in to check with the firebug tool and found that the colGroup settings are messed up when there is a postback.

 

<telerik:GridTemplateColumn HeaderText="One" SortExpression="One" DataField="One"
    UniqueName="One" ItemStyle-Width="10%" HeaderStyle-Width="10%">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "One").ToString%>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Two" SortExpression="Two"
    UniqueName="Two" DataField="Two" ItemStyle-Width="15%" HeaderStyle-Width="15%">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "Two").ToString().Split(" ")(0)%>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Three" SortExpression="Three" DataField="Three"
    UniqueName="Three" ItemStyle-Width="20%" HeaderStyle-Width="20%">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "Three").ToString%>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Four" SortExpression="Four" DataField="Four"
    UniqueName="Four" ItemStyle-Width="20%" HeaderStyle-Width="20%">
    <ItemTemplate>
    <%# DataBinder.Eval(Container.DataItem, "Four").ToString.Replace(Chr(13),"</br>")%>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Five" SortExpression="Five"
    UniqueName="Five" DataField="Five" ItemStyle-Width="20%" HeaderStyle-Width="20%">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "Five").ToString%>
    </ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Six" SortExpression="Six"
    UniqueName="Six" DataField="Six" ItemStyle-Width="8%" HeaderStyle-Width="8%">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "Six").ToString().Split(" ")(0)%>
    </ItemTemplate>
</telerik:GridTemplateColumn>

Column settings for the colGroup changes during a postback. I found an extra set of col width setting inserted after postback which has the width set in pixels. Where as the width settings for the tbody contents are fine. I have attached an image showing the width settings rendered before and after postback below.

Please do let me know how this issue can be fixed.

Thanks,
Karthik

[Ryan Dotson]

I am experiencing this same issue.  It does not seem to be specific to any browsers (as your sample HTML would suggest)  Any resolution?

[Karthik]

As of now I don't have a solution. The help documents which I referred advises to have one column with no width settings and also to have only the HeaderStyle-Width set for the other columns. I tried with those settings but it didn't help.

[Gary]

The same issue here...and it buggs me alot as with each major update something so obvious is getting messed up...

<telerik:RadGrid ID="gridCustomers" EnableLinqExpressions="false" Width="100%"
        Height="350" OnNeedDataSource="gridCustomers_NeedDataSource" onitemcommand="gridCustomers_ItemCommand" OnInit="gridCustomers_Init" runat="server"
        AllowPaging="true" AllowCustomPaging="true" PageSize="10"
        EnableAjaxSkinRendering="true" GridLines="None" AllowSorting="true"
        style="border:none !important;">
        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"  />
        <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" AllowColumnsReorder="false" Resizing-AllowColumnResize="false">
            <Scrolling SaveScrollPosition="true" AllowScroll="true" UseStaticHeaders="true" />
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
        <HeaderStyle Wrap="false" />
        <ItemStyle Wrap="false" Font-Size="11px" CssClass="gridCursor" />
        <AlternatingItemStyle Wrap="false" Font-Size="11px" CssClass="gridCursor" />
        <GroupingSettings CaseSensitive="false" />
        <MasterTableView DataKeyNames="CustomerID" GroupLoadMode="Server" NoMasterRecordsText="No Customers available for display..." TableLayout="Auto" AutoGenerateColumns="false" AllowFilteringByColumn="true">
            <FilterItemStyle HorizontalAlign="Left" />
            <HeaderStyle HorizontalAlign="Left" />
            <Columns>
                <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID" SortExpression="CustomerID" HeaderStyle-Width="140px" HeaderText="Customer ID" CurrentFilterFunction="Contains" FilterControlWidth="100px" ItemStyle-HorizontalAlign="Left" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="AccountNumber" HeaderStyle-Width="120px" HeaderText="Account" CurrentFilterFunction="Contains" FilterControlWidth="80px" ItemStyle-HorizontalAlign="Left" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderStyle-Width="120px" HeaderText="First Name" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="80px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="LastName" HeaderStyle-Width="120px" HeaderText="Last Name" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="80px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="OfficePhone" HeaderStyle-Width="110px" HeaderText="Office Phone" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="60px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PracticeName" HeaderStyle-Width="170px" HeaderText="Practice Name" ItemStyle-HorizontalAlign="Left" HtmlEncode="true" HeaderStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="130px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Cell" HeaderStyle-Width="100px" HeaderText="Cell Phone" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="60px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Address1" HeaderStyle-Width="160px" HeaderText="Address 1" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="120px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="City" HeaderStyle-Width="100px" HeaderText="City" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="60px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="State" HeaderStyle-Width="70px"  HeaderText="State" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="30px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ZipCode" HeaderStyle-Width="90px" HeaderText="Zip Code" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="50px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Country" HeaderStyle-Width="90px" HeaderText="Country" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="50px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Email" HeaderStyle-Width="230px" HeaderText="Email" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" FilterControlWidth="190px" AutoPostBackOnFilter="true"></telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

[Tommy]

Hi,

I have the same issue. Seems to me that it has something to do with the "UseStaticHeader" attribute. If I set it to false, the grid looks normal. But I need it to be set to true.

I need a fix for this. Thank you.

Thomas

[Karthik]

Hi Thomas,

I have the issue for the grids which does not have the scrolls enabled. I have the AllowScroll, UseStaticHeaders set to false. It didn't help.
For me the grid looks fine during the initial load. But when there is a postback performed the grid column width settings are messed up.

Karthik

[Maria Ilieva]

Hello Karthik,

I suppose that the issue you are facing is related to the problem we have discovered in the latest official Q2 2013 release and which is described in the sticky thread below:
http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-layout-breaks-on-postback-in-q2-2013-release.aspx

Review the thread and verify if removing the problematic <FilterMenu></FilterMenu> tags helps.

Regards,
Maria Ilieva
Telerik

[Cyril Iselin]

Hello

Only remove the Tag "<FilterMenu></FilterMenu>" don't work for me.
But the internal build hast fixed my errors too.

Best Greetings

Cyril Iselin

[Kyle]

We were losing our column widths on postback.

We commented out the FilterMenu per the link and it worked for us.  

You may also want to try removing:

RowIndicatorColumn
ExpandCollapseColumn
EditFormSettings

[msigman]

Removing <FilterMenu></FilterMenu> fixed it for us.

[Dennis]

Having this problem, no <FilterMenu> tags defined nor any of the other tags mentioned.  Any other ideas?

[Maria Ilieva]

Hi Dennis,

Could I kindly ask you to open a separate forum thread or a support ticket where you could share more information on the exact issue you are currently facing? Sharing what is the control's version you are using, the browsers where the issue appear and the exact setting you have on your page will be of a big help for further researching the issue and provide proper solution for your specific case.


Regards,
Maria Ilieva
Telerik

[Karthik]

Hi All,

Try upgrading to the latest version of Telerik Controls. Telerik has the issues fixed it with the latest versions. Use the version 2013.2.717 or above.

Regards
Karthikeyan S