[Solved] Radgrid misaligning collumns for static header

[Fuhai]

Hey, I know this should have been solved already, just want some quick tips to figure out what is wrong in my settings of the telerik Radgrid control.

the page using a master page, and inside one telerik ajaxpanel. here is the aspx code. and the issue is the top on the scroll bar missing a inline style for margin-right: 17px, but without any clue why it is missing. the screenshots are attached as well.

<%@ Page Language="C#" MasterPageFile="~/MasterPages/LOLA.Master" AutoEventWireup="true" CodeBehind="ReportCellTypePropertyManagement.aspx.cs" Inherits="TSi.LOLA.ReportCellTypePropertyManagement" Culture="auto" meta:resourcekey="Page" UICulture="auto" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <%--<link href="Styles\LabelManagement.css" type="text/css" rel="stylesheet" id="CSSFileCT" />--%>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

    <div class="Wrapper" style="margin-left:10px;margin-right:10px;">

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

            <div style="float: left; width: 100%">

                <tsi:TSiDropDownList runat="server" ID="DropDown_CellTypes" Meta:resourceKey="DropDown_CellTypes" DropDown-CssClass="TSIDropDownListStyle"

                    DataTextField="Name" DataValueField="ID" AutoPostBack="false"  DropDownHeight="180" Skin="Sunset" />

                <tsi:TSiButton runat="server" ID="btnGetMapForCellType" meta:resourcekey="Button_GetMapForCellType"

                    RadButton-Width="9%" OnClick="GetMapForCellType_Click" ButtonType="SkinnedButton" Skin="Sunset" />

            </div>

            <div style="float: left; width: 100%">

                <tsi:TSiDropDownList runat="server" ID="DropDown_CellProperties" DefaultMessage="<%$ Resources:DropDown_CellProperties.DefaultMessage %>" DropDown-CssClass="TSIDropDownListStyle"

                    DataTextField="Name" DataValueField="ID" AutoPostBack="false" DropDownHeight="180" Skin="Sunset" />

                <tsi:TSiButton runat="server" ID="btnGetMapForProperty" meta:resourcekey="Button_GetMapForProperty"

                    RadButton-Width="9%" OnClick="GetMapForProperty_Click" ButtonType="SkinnedButton" Skin="Sunset" />

            </div>

            <br />

            <br />

            <br />

            <div class="SearchResults">

                <%--<tsi:TSIGrid runat="server" />--%>

                <telerik:RadGrid runat="server" ID="Grid_CellTypePropertyMap" ClientIDMode="Static"

                    AutoGenerateColumns="false" OnItemDataBound="GridCellTypePropertyMap_ItemDataBound" Skin="Sunset" >

                    <ClientSettings>

                        <Scrolling AllowScroll="True" UseStaticHeaders="True" />

                    </ClientSettings>

 

                    <MasterTableView DataKeyNames="ID" ClientDataKeyNames="ID" TableLayout="Fixed">

                        <Columns>

                            <telerik:GridTemplateColumn HeaderText="<%$ Resources:ColumnAttached.HeaderText %>" UniqueName="AttachedCol" >

                                <ItemTemplate>

                                    <asp:CheckBox ID="chbAttached" runat="server" ClientIDMode="AutoID" ></asp:CheckBox>

                                </ItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridBoundColumn DataField="CellTypeName" HeaderText="<%$ Resources:ColumnCellTypeName.HeaderText %>" UniqueName="CellTypeNameCol" />

                            <telerik:GridBoundColumn DataField="CellTypeID" HeaderText="<%$ Resources:ColumnCellTypeID.HeaderText %>" UniqueName="CellTypeIDCol" />

                            <telerik:GridBoundColumn DataField="PropertyName" HeaderText="<%$ Resources:ColumnCellPropertyName.HeaderText %>" UniqueName="PropertyNameCol" />

                            <telerik:GridBoundColumn DataField="PropertyID" HeaderText="<%$ Resources:ColumnCellPropertyID.HeaderText %>" UniqueName="PropertyIDCol" />

                            <telerik:GridTemplateColumn HeaderText="<%$ Resources:ColumnDisplayOrder.HeaderText %>" UniqueName="DisplayOrderCol" >

                                <ItemTemplate>

                                    <asp:TextBox ID="txtDisplayOrder" runat="server" Width="26px" ></asp:TextBox>

                                </ItemTemplate>

                            </telerik:GridTemplateColumn>

                        </Columns>

                    </MasterTableView>

                </telerik:RadGrid>

                <br />

                <br />

                <tsi:TSiButton runat="server" ID="Button_Save" Text="<%$ Resources:Button_Save.Text %>"

                    RadButton-Width="9%" OnClick="SaveCelltypePropertyMap_Click" Visible="false" />

            </div>

            <div>

                <br />

                <br />

                <asp:PlaceHolder runat="server" ID="CellTypePropertySaveDetailsTable" Visible="true">

                    <asp:Literal ID="LabelCellTypePropertyDetail" runat="server" />

                </asp:PlaceHolder>

            </div>

        </telerik:RadAjaxPanel>

        <script type="text/javascript">

        </script>

    </div>

 

</asp:Content>


[Venelin]

Hello Fuhai,

I am afraid that the issue is not replicating with the provided sample code. Could you please provide more information like when you get the misalignment,on initial load, after some operation etc.

In the meantime you can try one of the following workarounds.

1. Try to call .repaint() method on the grid.

JavaScript:

function Grid_CellTypePropertyMap_Created(sender, eventArgs) {
    sender.repaint();
}

ASPX:

<ClientSettings>
    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    <ClientEvents OnGridCreated="Grid_CellTypePropertyMap_Created"/>
</ClientSettings>

Here OnGridCreatedEvent we attach an event handler named OnGridCreated="Grid_CellTypePropertyMap_Created in which the grid is repainted. You can also try to vary the event and choose another.

2. Try to add the following CSS rule to your page styles.

CSS:

.rgDataDiv {
    overflow-y: scroll !important;
}

The inconvenience here is that a vertical scroll bar will appear even if the total height of all records is less that the grid's height, but this won't let such displacement of the scroll.

I also attach a sample project using your markup where you can try to replicate the issue and consider what is the difference with respect to your real case. In this manner we will be able to track the issue and provide the most proper solution.

I am looking forward to your reply.

Regards,
Venelin
Telerik

[Fuhai]

Thanks Venelin,

Really appreciated your help. actually I got it fixed just one hour ago, by the comparison with the sample code Eyup send to me from another thread under the grid scope. the key is I have to remove one piece of code from the radgrid definition. it is: ClientIDMode="Static"
after I remove this piece of code, it is working as expected now. so I replied to Eyup to see if this is bug or not, because if I added this piece of code to his sample code, then the issue will be there again. but anyway I found the way to avoid that issue.

Thanks again,

Fuhai

[Venelin]

Hi Fuhai,

I am glad that you menaged to resolve the issue. As Eyup mentioned in this forum thread, ClientIDMode="Static" is not supported by RadControls and shouldn't be used.

Regards,
Venelin
Telerik