Enabling Grid Scrolling with static headers removes grid filters

[Keith]

When I enable grid scrolling with static headers the grid filters disappear. How do I get both visible and functional and still have static headers?

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

Thanks in advance.

Keith E.

[Pavlina]

Hello Keith,

Unfortunately I was not able to replicate the issue locally. However, I am sending you a simple test project which is working properly. Please examine it and let me know what is the difference in your case.

Sincerely yours,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Keith]

Well for starters our implementation of the grid is a lot more complex.

 

<telerik:RadGrid ID="rgFolderDocs" runat="server" GridLines="None" AllowPaging="true" width="99%" Height="86%"

 

 

AllowFilteringByColumn="true" AllowSorting="true" AutoGenerateColumns="false" EnableLinqExpressions="true"

 

 

OnItemDataBound="rgFolderDocs_ItemDataBound" PageSize="50" ShowStatusBar="False"

 

 

OnPageIndexChanged="rgFolderDocs_PageIndexChanged" AllowMultiRowSelection="true" AllowCustomPaging="true" OnNeedDataSource="rgFolderDocs_NeedDataSource">

 

 

<PagerStyle Mode="NextPrevNumericAndAdvanced" Position="TopAndBottom" AlwaysVisible="true" />

 

 

<GroupingSettings CaseSensitive="false" />

 

 

<MasterTableView DataKeyNames="DocumentID, LinkID">

 

 

<Columns>

 

 

<telerik:GridBoundColumn UniqueName="DocumentID" DataField="DocumentID" HeaderText="DocumentID"

 

 

Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="UniqueID" DataField="UniqueID" Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="LinkID" DataField="LinkID" HeaderText="LinkID"

 

 

Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="LinkUrl" DataField="LinkUrl" HeaderText="LinkUrl"

 

 

Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn UniqueName="Type" HeaderText="Type" HeaderStyle-Width="28px"

 

 

AllowFiltering="false" SortExpression="Extension" ItemStyle-HorizontalAlign="Center">

 

 

<ItemTemplate>

 

 

<asp:Image id="imgType" runat="server">

 

 

</asp:Image>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn UniqueName="Vetted" HeaderImageUrl="/App_Themes/AFKN/Images/vetted.gif" HeaderStyle-Width="15px"

 

 

AllowFiltering="false" SortExpression="Vetted" HeaderTooltip="Vetted">

 

 

<ItemTemplate>

 

 

<asp:Image id="imgVetted" runat="server" ImageUrl="/App_Themes/AFKN/Images/vetted.gif">

 

 

</asp:Image>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn UniqueName="Rating" HeaderImageUrl="/App_Themes/AFKN/Images/NetworkNow/star.png" HeaderStyle-Width="25px" HeaderStyle-HorizontalAlign="Center"

 

 

AllowFiltering="false" HeaderTooltip="Rating" DataField="AverageRating"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="DisplayName" DataField="DisplayName"

 

 

HeaderText="Title" SortExpression="DisplayName" FilterControlWidth="85%">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="FileName" DataField="FileName" Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="OwnerID" DataField="Owner" FilterControlWidth="85px" HeaderStyle-Width="105px"

 

 

HeaderText="OwnerID" Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="OwnerName" DataField="OwnerName" HeaderStyle-Width="100px" Visible="false"

 

 

HeaderText="Owner" SortExpression="OwnerName">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="OwnerEmail" HeaderText="Owner Email" Display="false">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn UniqueName="FileSize" HeaderText="Size" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Right"

 

 

AllowFiltering="false" SortExpression="FileSize">

 

 

<ItemTemplate>

 

 

<asp:Label ID="lblSize" runat="server"></asp:Label>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn UniqueName="Accessed" DataField="DateLastAccessed" FilterControlWidth="60%" HeaderStyle-Width="75px" ItemStyle-HorizontalAlign="Right"

 

 

HeaderText="Accessed" SortExpression="DateLastAccessed">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="Modified" DataField="ModifiedDate" FilterControlWidth="60%" HeaderStyle-Width="75px" ItemStyle-HorizontalAlign="Right"

 

 

HeaderText="Modified" SortExpression="ModifiedDate">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="ReviewDue" DataField="ReviewNext" FilterControlWidth="60%" HeaderStyle-Width="75px" ItemStyle-HorizontalAlign="Right"

 

 

HeaderText="Review Due" SortExpression="ReviewNext">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn UniqueName="Views" DataField="ViewCount" FilterControlWidth="20px" HeaderStyle-Width="50px" HeaderText="Views" SortExpression="ViewCount" ItemStyle-HorizontalAlign="Right">

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

<ClientSettings AllowColumnsReorder="false" AllowDragToGroup="false" AllowRowHide="true"

 

 

AllowColumnHide="true" ReorderColumnsOnClient="true" AllowRowsDragDrop="false">

 

 

<Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="True">

 

 

</Scrolling>

 

 

<ClientEvents OnRowSelected="onRowSelected" OnRowDeselected="onRowSelected"

 

 

OnMasterTableViewCreated="onRowSelected" />

 

 

</ClientSettings>

 

 

</telerik:RadGrid>

 

[Keith]

I think we may have partially solved the mystery. If I change the skin id to a built-in skin, all is well. SO, I am now trying to determine what in the custom skin that was created causes the behavior.

Keith E.

[Keith]

One of the custom tweak we made was causing the filters to disappear when scrolling was enable. So, we removed the tweak.

Now there is a more global problem. Even when we are not using the custom skin and switch to the built-in Office2007 skin, The grid only displays correctly in IE 7. All other browsers Firefox 3.5.9 and 3.6.3, Safari 4.0.3, IE 8.0, Chrome 4.1.2 show the grid incorrectly.

Attached is a file with the IE7 display and a sample of how all the others display the grid; filtering and scrolling with static headers enabled with a Office2007 skin.

Keith E.73

[Pavlina]

Hi Keith,

Please try to use the ScrollHeight property instead of Height and let me know about the result. For more information, refer to this help topic:
Height vs. ScrollHeight

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Keith]

Thanks! That fixed it.

I do have one additional question. There is a difference between in rendering between browsers. In IE, The header goes all the way to the right, while all other browsers Firefox 3.5.9 and 3.6.3, Safari 4.0.3, IE 8.0, Chrome 4.1.2 display a gap between the last column and the edge of the grid.

A sample image is attached.

The same is true for the online demo oof scrolling at http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx

Inspecting the DOM shows that the table that contains the header parts does indeed end at the left edge of the scrollbar and is 100% of the parent container, so I figure it is just a difference in browser rendering. Just wanted to confirm my reality and ask if there is any tweak for removing the gap?

Thanks in advance,

Keith E.

[Pavlina]

Hi Keith,

The visual glitch in Firefox 3 is caused by:

http://blogs.telerik.com/dimodimov/posts/08-07-23/browser_inconsistencies_with_scrolling_and_padding.aspx

I recommend you to create an image, which looks like the RadGrid header row and set it as a background image to the RadGrid outer div:

CSS

div.RadGrid_Office2007
{
     background: url(.....) 100% 0 repeat-x;
}

Alternatively, you can leave the empty space in the top-right corner in Firefox 3 as is - in previous versions RadGrid looked that way in all browsers.

The 16px right padding corresponds to the standard scrollbar width. It is set on the server and recalculated on the client.

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Keith]

Thanks, but I already tried that and it made no difference. Guess we'll live with the gap.

Keith E.

[Pavlina]

Hi Keith,

Please, go through the following forum thread which elaborates on this matter and let me know if it helps to resolve the problem:
http://www.telerik.com/community/forums/aspnet-ajax/grid/272176-radgrid-issues.aspx

Best wishes,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.