[C#/RadGrid] Issue with headers

[Michiel Peeters]

Dear Telerik Community,

Currently i have a problem with my radgrid where i autoload my data in it. I use for this auto generation autogeneratecolumns set to true, but before i add my dynamic data i set one column in the codebehind. This is an GridClientSelectColumn with a width of 30 pixels. When i render my page the headers of the columns overflows! I have searched and looked into a solution but i cannot find any possible solution.

The rest of the text is a further detailed information about my problem:

Development: Visual Studio 2010 Professional Edition
Telerik Version: Latest version of Telerik Ajax Controls

Snippits:

Radgrid

<cc1:TabContainer ID="tcObjects" CssClass="ajaxtab" runat="server">
    <cc1:TabPanel ID="tpSearchResults" runat="server" TabIndex="0" Visible="false" CssClass="css_div_gridpanel">
        <ContentTemplate>
            <div class="css_div_control">
                <div class="css_div_titlebar">
                    <div style="float:left; height: 24px; width: 24px; margin: 2px;">
                        <asp:Image ID="imgSearchResults" runat="server" Width="24px" Height="24px" />
                    </div>
                    <div class="css_div_title">
                        <span class="css_title_lbl">
                            <asp:Label ID="lblSearchResults" runat="server"></asp:Label>
                        </span>
                    </div>
                    <asp:Panel ID="pSearchResults" CssClass="css_div_actions" runat="server">
                        <asp:LinkButton ID="btnAttach" OnClick="AttachObjects" runat="server">
                            <div class="css_action_item_enabled" style="float: right;">
                                <div class="css_action_item_icon_add">
                                </div>
                                <span class="css_action_link">
                                    <asp:Label runat="server" ID="lblAttach"></asp:Label>
                                </span>
                            </div>
                        </asp:LinkButton>
                    </asp:Panel>
                </div>
                <div class="css_div_datacontrol_content">
                    <div class="css_div_datacontrol_data">
                        <asp:Panel ID="GridPanel" runat="server" CssClass="css_div_gridpanel">
                            <telerik:RadGrid ID="rgSearchResults" OnNeedDataSource="rgSearchResults_NeedDataSource" AutoGenerateColumns="true"
                            HeaderStyle-Wrap="false" AllowMultiRowSelection="true" GridLines="None" Skin="Sunset" EnableViewState="true"
                            EnableEmbeddedScripts="false" EnableEmbeddedSkins="false" AllowSorting="true" EnableEmbeddedBaseStylesheet="false"
                            RegisterWithScriptManager="false" AllowFilteringByColumn="true" runat="server">
                                <MasterTableView Width="100%"></MasterTableView>
                                <GroupingSettings CaseSensitive="false" />
                                <HeaderStyle Width="150px" />
                                <ClientSettings EnableRowHoverStyle="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true"
                                Resizing-AllowRowResize="false" ColumnsReorderMethod="Reorder" Resizing-AllowColumnResize="true" Resizing-ResizeGridOnColumnResize="true"
                                Resizing-EnableRealTimeResize="true" Scrolling-AllowScroll="true">
                                    <Scrolling UseStaticHeaders="true" AllowScroll="true" />
                                    <Selecting AllowRowSelect="true" />
                                    <ClientEvents OnGridCreated="GridCreated" />
                                </ClientSettings>
                            </telerik:RadGrid>
                        </asp:Panel>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

Javascript

function GridCreated(sender, args) {
    var grid = sender;
    var masterTable = sender.get_masterTableView();
    masterTable.selectAllItems(true);
}

Codebehind

GridClientSelectColumn column = new GridClientSelectColumn();
this.rgSearchResults.Columns.Add(column);
column.Reorderable = false;
column.Resizable = false;
column.ItemStyle.Width = Unit.Pixel(30);
column.HeaderStyle.Width = Unit.Pixel(30);

this.rgSearchResults.DataSource = table;
this.rgSearchResults.DataBind();

An image is attached to this post where the problem is marked.

For the rest i have tried the following topics / websites:
http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-autogeneratecolumns-false-issue.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/header-and-detail-columns-are-misaligned.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/there-is-a-shift-between-the-header-and-the-columns.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/headers-and-items-don-t-line-up.aspx
http://www.telerik.com/community/forums/aspnet-ajax/grid/gridclientselectcolumn-header-checkbox-does-not-clear.aspx

[Martin]

Hello Michiel Peeters,

Since you are using a custom skin I am afraid that we will need a runnable project that we could inspect locally. My suggestion is to open a formal support ticket and send us a small sample that demonstrates the glitch. This way we will be able to provide you with more to the point resolution.

Regards,
Martin
the Telerik team