StaticHeaders, ClientBinding - display wrong

[Stepan]

Hello Telerik,


We have:

• RadGrid with client binding
• AllowScroll="True"
• UseStaticHeaders="True"

The grid then appears incorrectly (please see attached screenshot).
How do we fix the appearance?

Excerpt from grid definition:

<telerik:RadGrid ID="RadGridSearchDog" runat="server" GridLines="None"

Height="460px" Width="740px" AutoGenerateColumns="False"

OnPreRender="RadGrid_PreRender" EnableEmbeddedSkins="False"

AllowSorting="True" Culture="ru-RU">

<ClientSettings>

<DataBinding FilterParameterType="Linq" Location="FinanceService.asmx"

SelectMethod="GetDogovorDataLinq" SortParameterType="Linq">

</DataBinding>

<Selecting AllowRowSelect="True" />

<ClientEvents OnCommand="function(){}" OnRowDblClick="OnRowDblClickDogGrid"

OnDataBinding="RadGridDogovor_DataBinding"

OnDataBound="OnDataBoundGridDog" OnRowDataBound="OnRowDataBoundDog" />

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

</ClientSettings>

<MasterTableView ClientDataKeyNames="CTR_ID" NoMasterRecordsText="Нет данных для отображения">

<Columns>

<telerik:GridBoundColumn DataField="CTR_ID"

HeaderText="Код" UniqueName="CTR_ID" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CTR_NUM"

HeaderText="№ Договора" UniqueName="CTR_NUM">

<HeaderStyle Width="120px"></HeaderStyle>

<ItemStyle Width="120px"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CTR_DATE_REG" HeaderText="Регистрация" DataType="System.DateTime"

UniqueName="CTR_DATE_REG" DataFormatString="{0:dd.MM.yyyy}" Visible="false">

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Right"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CTR_CONTENT"

HeaderText="Содержание"

UniqueName="CTR_CONTENT">

<HeaderStyle Width="400px"></HeaderStyle>

<ItemStyle Width="400px"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CTR_STATUS_EXPLAINED"

HeaderText="Статус"

UniqueName="CTR_STATUS_EXPLAINED">

<HeaderStyle Width="100px"></HeaderStyle>

<ItemStyle Width="100px"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridCalculatedColumn DataFields="CTR_AMOUNT" HeaderText="Сумма" DataType="System.Decimal"

UniqueName="CTR_AMOUNT" Expression="{0}" SortExpression="CTR_AMOUNT">

<HeaderStyle Width="100px" HorizontalAlign="Center" ></HeaderStyle>

<ItemStyle Width="100px" HorizontalAlign="Right"></ItemStyle >

</telerik:GridCalculatedColumn>

</Columns>

</MasterTableView>
* * *

Best regards,
Maxim

[Pavlina]

Hi Maxim,

Try setting TableLayout property of the MasterTableView to Fixed and use only HeaderStyle-Width property to  set columns width. Note that using ItemStyle-Width is not recommended.

Regards,
Pavlina
the Telerik team

[Stepan]

Sorry, no luck so far.
What else could we try except the TableLayout="Fixed"

<telerik:RadGrid ID="RadGridSearchDog" runat="server" GridLines="None"
Height="460px" Width="700px" AutoGenerateColumns="False"
OnPreRender="RadGrid_PreRender" EnableEmbeddedSkins="False"
AllowSorting="True" Culture="ru-RU">
<ClientSettings>
<DataBinding FilterParameterType="Linq" Location="FinanceService.asmx"
SelectMethod="GetDogovorDataLinq" SortParameterType="Linq">
</DataBinding>
<Selecting AllowRowSelect="True" />
<ClientEvents OnCommand="function(){}" OnRowDblClick="OnRowDblClickDogGrid"
OnDataBinding="RadGridDogovor_DataBinding"
OnDataBound="OnDataBoundGridDog" OnRowDataBound="OnRowDataBoundDog" />
<Scrolling AllowScroll="True" UseStaticHeaders="True"/>
</ClientSettings>
<MasterTableView ClientDataKeyNames="CTR_ID" NoMasterRecordsText="Нет данных для отображения" TableLayout="Fixed">
<Columns>
<telerik:GridBoundColumn DataField="CTR_ID"
HeaderText="Код" UniqueName="CTR_ID" Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CTR_NUM"
HeaderText="№ Договора" UniqueName="CTR_NUM">
<HeaderStyle Width="100px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CTR_CONTENT"
HeaderText="Содержание"
UniqueName="CTR_CONTENT">
<HeaderStyle Width="200px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CTR_STATUS_EXPLAINED"
HeaderText="Статус"
UniqueName="CTR_STATUS_EXPLAINED">
<HeaderStyle Width="70px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridCalculatedColumn DataFields="CTR_AMOUNT" HeaderText="Сумма" DataType="System.Decimal"
UniqueName="CTR_AMOUNT" Expression="{0}" SortExpression="CTR_AMOUNT">
<HeaderStyle Width="100px" HorizontalAlign="Center" ></HeaderStyle>
<ItemStyle HorizontalAlign="Right"></ItemStyle >
</telerik:GridCalculatedColumn>
</Columns>
</MasterTableView>
<HeaderStyle HorizontalAlign="Center" />
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"
EnableEmbeddedSkins="False"></HeaderContextMenu>
</telerik:RadGrid>

[Pavlina]

Hello Maxim,

Can you please verify that you are using version 2011.2 915 of RadControls in your application?

Kind regards,
Pavlina
the Telerik team

[Stepan]

Hello Pavlina,

We are on 2011.2.915.40

Just noticed, that the grid will look perfect, if we have repaint method called in the grid's OnDataBound handler.

Best regards,
Maxim

[Pavlina]

Hello Maxim,

I tried to reproduce the alignment issue with the provided code, but to no avail. Please find the sample project which I used for testing attached to this message. Give it a try and let me know what is the difference in your case.

Kind regards,
Pavlina
the Telerik team

[Stepan]

Thank you, it seems that things are getting clearer now.

If you increase maximumRows in the GetData method, let's say, to value of 50, then grid will become distorted.

As we understand, it is the proportion of PageSize and Height properties, which determines the way the grid will look.

Case A
PageSize=10, Height<290 : the scroll bar will be on the right of last column, and grid looks properly.

Case B
PageSize=10, Height>290 : the scroll bar appears only after the data will be inserted in the grid, in the wrong position.
 

In our projects, we are setting AllowPaging property depending on the browser in use, on page's initial load.
It would be nice, if the scroll bar would be drawn consistently to the right from most right column (case A).


Best regards,
Maxim

[Pavlina]

Hi Maxim,

Please examine the help article below and let me know if it helps to achieve your goal:
http://www.telerik.com/help/aspnet-ajax/grid-resize-grid-with-scrolling-when-less-data.html

Kind regards,
Pavlina
the Telerik team

[Stepan]

Thanks,  it seems the approach, taken in the article is OK.

Best regards,
Max