usestaticheaders property in radgrid

[gila]

Hello,
I have radgrid, and using the property: <Scrolling UseStaticHeaders="true" and causes my grid having the headers tio be frozen, but when there is scroll in grid, the header above the scrool looks like half of it gets the style color and half gets white color.
I attached a picture for example how the grid looks like.

Thanks,
gila

[Pavlina]

Hi Gila,

The observed behavior is expected as you can see from the online example linked below:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx

Regards,
Pavlina
the Telerik team

[gila]

Hi,
thanks for the reply but it  didnt help me.
I have set all the properties written there but still the grid looks like the pic above.
Actually in your link, i saw that above the scroll there is no backcolor as other columnsw headers, but in my screen there is backcolor  - but just half.
Here is my code:

<

 

Controls:MyGrid AllowPaging="true" Skin="Vista" ID="gridMultiInvitedList" runat="server"

 

 

AutoGenerateColumns="False" OnNeedDataSource="gridMultiInvitedList_NeedDataSource"

 

 

OnPreRender="gridMultiInvitedList_PreRender" OnItemCreated="gridMultiInvitedList_ItemCreated"

 

 

OnItemDataBound="gridMultiInvitedList_ItemDataBound" AllowMultiRowSelection="true"

 

 

Height="340px" HeaderStyle-ForeColor="#1280e6"

 

 

>

 

 

<ClientSettings Selecting-AllowRowSelect="true" EnableRowHoverStyle="true">

 

 

<ClientEvents OnRowDblClick="OnRowDblClick" />

 

 

<Selecting AllowRowSelect="True" />

 

 

<Scrolling ScrollHeight="100%"

 

 

 

AllowScroll="True" UseStaticHeaders="true" />

 

 

</ClientSettings>

 

 

<MasterTableView AllowNaturalSort="false" PageSize="10" DataKeyNames="InvitedId,VisitId"

 

 

TabIndex="1" ClientDataKeyNames="InvitedId,VisitId" NoMasterRecordsText="" AllowSorting="true" Width="100%">

 

 

<PagerTemplate>

 

 

<asp:panel id="PagerPanel" style="line-height: 30px;" runat="server">

 

 

<div align="center">

 

[

<a id="A1" name="aFirstPrev" href="#" runat="server" onclick="changePage('first'); return false;"><%= Project809Resources.Resource809.PageFirst%></a>]

 

 

[

<a id="A2" name="aFirstPrev" href="#" runat="server" onclick="changePage('prev'); return false;"><%= Project809Resources.Resource809.PagePrev%></a>]

 

 

[

<a id="A3" name="aNextLast" href="#" runat="server" onclick="changePage('next'); return false;"><%= Project809Resources.Resource809.PageNext%></a>]

 

 

[

<a id="A4" name="aNextLast" href="#" runat="server" onclick="changePage('last'); return false;"><%= Project809Resources.Resource809.PageLast%></a>]

 

 

 

</div>

 

 

</asp:panel>

 

 

</PagerTemplate>

 

<Columns>
.....etc

Thanks,
gila

[Pavlina]

Hi Gila,

When using RadGrid scrolling with static headers, there is some empty space above the vertical scrollbar. By default it is filled with a background image, which is aligned if the header row is single-lined. Unfortunately, the background image cannot expand automatically to match any header row height.

I suggest you to remove the background image by setting

<telerik:RadGrid CssClass="rgNoScrollImage" />


Alternatively, create and apply a custom background image, adjusted to match the header row height in your specific scenario. The custom image should be set like this:

ASPX

<telerik:RadGrid CssClass="MyCustomScrollImage" />


CSS

div.MyCustomScrollImage .rgHeaderDiv
{
background:0 0 repeat-x url("...............") ;
}


Greetings,
Pavlina
the Telerik team

[gila]

Hi,
frist - thanks for your reply. Now it seems better.
Actually i want to use the second solution, but my grid uses skin="vista" anf if i want to put in CSS the images witch vista gives me - where do i have it? i want the header above scroll to be the same as the background of other columns.

Thzanks,
gila

[Pavlina]

Hello Gila,

I followed your scenario and prepared a simple working project which handles the desired functionality. Please check it out and let me know if it works for you or if I am leaving something out.

All the best,
Pavlina
the Telerik team

[Gajanana]

Hello,

Rad grid horizontal scroll bar does not display properly after adding UseStaticHeaders="true"

Please have a look at attached image for more clarity. FYI, Grid columns are dynamically generated at code behind.

Thanks
Gajanana

[Pavlina]

Hi Gajanana,

Can you please elaborate a bit more on your scenario? Did you perform any special steps to replicate the issue? What is the VS version and browser version?

Kind regards,
Pavlina
the Telerik team

[Gajanana]

Hello,

it works fine with IE broswer. But does not work with Firefox browser.
I am using Firefox 5.0.1 and Telerik.Web.UI.dll -2011.2.712.35

Step1. All grid columns are generated at code behind.
step2. Data is queried from database and DataSet is bind to grid control.

<

 

ClientSettings>
<Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true" FrozenColumnsCount="3">

 

 

</Scrolling>

 

 

<Selecting AllowRowSelect="true" />

 

 

<ClientEvents OnRowClick="RowClick" OnRowContextMenu="RowContextMenu" OnRowDblClick="RowDblClick"

 

 

OnGridCreated="GridCreated" />

 

 

</ClientSettings>

 

Thanks,
Gajanana

[Princy]

Hello Gajanana,

This is so because RadGrid renders header cells and ordinary cells in two different tables when Scrolling is enabled and UseStaticHeaders is set to "True". For more information, please review the following KB article which elaborates on this subject.
How to align RadGrid cells when using Scrolling and GridLines

Thanks,
Princy.