This is a migrated thread and some comments may be shown as answers.

Frozen Column Scrolling Issues

38 Answers 769 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Matthew asked on 21 Jul 2010, 10:44 PM

On a grid with varying sized columns, when I freeze some columns and then attempt to scroll horizontally, the grid scrolls very oddly.

For example, my grid columns that are scrollable (outside the frozen column count) are Last Name, First Name, SSN as well as many others. Last Name and First Name have 120px as their widths. The SSN is 60px wide. When I scroll to the right

The SSN "scrolls" left and assumes the size of the First Name. First Name goes left. The sizing is one issue. But several columns to the right of that appear to scroll first. This is not the desired effect.

I need to scroll by column only or by pixel or something. This scrolling effect isn't acceptable.

Declarations:

<telerik:RadGrid ID="grdList" runat="server" AllowPaging="True" AutoGenerateColumns="false" AllowAutomaticInserts="true" AllowSorting="True" PageSize="25" Height="600px" GroupingSettings-CaseSensitive ="false" EnableLinqExpressions="false" >

<MasterTableView TableLayout="Auto" ClientDataKeyNames="Key" EditMode="InPlace" CommandItemDisplay="TopAndBottom" AllowFilteringByColumn="true" HeaderStyle-Font-Size="10px" ItemStyle-Font-Size="10px" FilterItemStyle-Font-Size="10px">

<ClientSettings>

<Resizing AllowColumnResize="true" AllowRowResize="true" ResizeGridOnColumnResize="true" />

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

<Selecting AllowRowSelect="true" />

<ClientEvents OnCommand="RaiseCommand" />

</ClientSettings>

Remainder of the content was omitted for brevity.

Thanks,
Matt

EDIT: To clarify, the scrolling works perfectly if I do not set FrozenColumnsCount. It scrolls basically by "pixel" I would say. But when I set FrozenColumnsCount, it is like it scrolls by pixel sorta... but "snaps" to columns. And it does not do a very good job at it.

38 Answers, 1 is accepted

answered on 22 Jul 2010, 03:46 PM

The described behavior is completely unexpected...

Why would I want a column to resize as I scroll it? SSN was 60 px, now it is 120px. I don't want that. I would rather have the per-pixel scrolling or at least a smarter per-column scrolling. At times it appeared that the columns were hiding and then unhiding due to the different sizes... a column that has a header in it sized for 100 px, for example, appears to the end user as though it disappears when the column resizes to 20px because of the neighbor's size.

Whether it is expected or not, I would much rather just get a fix to the issue. The scrolling is funky and my client is not pleased with it. I need to use static headers and frozen columns with vertical and horizontal scrolling and allow for column widths to be completely different sizes for the entire grid. And it needs to make sense to the user when they are scrolling horizontally. At present, it does not.

Any ideas on how to resolve this?

Edit: Let me add some more symptoms of the problem. Perhaps I am not being totally clear. Assume I have columns in my grid and for sake of ease, we'll label them A-O
The grid is frozen on D so that I can see A, B, C and D at all times.
I have a horizontal scroll bar.
I scroll to the right by clicking the increaser, nothing happens.
I click again, nothing happens.
I click one more time and suddenly, I see movement. Woot, I think. Except that it did not work. Instead, of see A, B, C, D, F... I see...
A, B, C, D, E, F, G, I, J, K, L
Notice the missing H... why did H suddenly disappear? Where did it go? Is it coming back? How is this the way it is intended to work? To an end user this is not intuitive at all.

answered on 09 Nov 2011, 09:02 PM

old thread, but I'd like to bring up the issue again. Was this ever fixed? Because I see the same problem with the current Q3-2011 RadGrid revision. The horizontal scrolling with frozen columns enabled behavior is terrible. Vertical scrolling works fine, it's smooth. But horizontally, it jerks around or does nothing at all. I click about 20 times or so and nothing happens, then suddenly it moves over a column. Why not move over a column per click? Woudln't that make sense? The only fast way to get it to move is to grab the scroll bar handle and drag it. Another confusing aspect is the rows resize themselves sometimes depending upon which columns are now visible (that slows it down too). Therefore which rows you are looking at are no longer the same rows after the grid finishes repainting itself.

I'm re-writing a grid application from 15 years ago that used MSFlexGrid. The scrolling in that grid works perfectly. How can you say something you've developed in 2011 can't do what something in 1996 could and can still do?

I know RadGrid is more powerful and can do lots more things than MSFlexGrid can do, that's why I'm trying to utilize RadGrid. But this scrolling issue is almost a deal breaker. My grid has around 50 columns, so scrolling horizontally is essential for the end users. When I disable frozen columns, RadGrid scrolls perfectly. But that's not useful since we need to know the employee's name in column 1 and 2 at all times.

Question. is there a way to set the scrolling behavior to do this: "upon each click on the horizontal scrollbar, move the grid 1 column" and also "upon each click on the vertical scrollbar, move the grid 1 row".

I'm not trying to complain, I'm just stumped as to why such a powerful grid has such a hard time doing what seems like a simple operation (scrolling).

Thank you for your attention.

answered on 11 Nov 2011, 01:00 PM

Hi David,

Generally, when enabled, frozen columns functionality involves a lot of client side calculations and DOM operations in order to correctly determine which columns should be visible and which should be hidden while scrolling. In this scenario the number of columns has the greatest impact, since the more columns your grid has the more time these operations would last and hence the observed slow down. A large number of records rendered on the page along with static headers and frozen columns could also cause a slowdown in the client performance.

Regarding your question:
Currently there is no way to set the desired scrolling functionality, however I will forward your suggestion to our developers for further consideration.

Kind regards,
Pavlina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 24 Dec 2013, 03:28 PM

Hi Kiran,

I am really sorry for the inconvenience caused by this limitation. However, this is not a trivial problem but rather complicated one and it is related to the implementation of frozen columns functionality. Therefore, it is not so easy to fix this issue.
We think to make a research which will help us to change the frozen columns logic in order to fix the limitations that this functionality has. Unfortunately I can not give you an exact timeframe when we will plan this research and what would be the result of it.

Please do not hesitate to contact us if other questions or problems arise.

Regards,
Pavlina
Telerik

answered on 16 Sep 2014, 09:09 PM

Hi Telerik, I hope this is in the pipeline and escalated to the top priority with the grid. This is one of, if not, the most widely used component and understandably, the most complex from a control development stand-point. We have a few grids in which we can not freeze the columns, because of the in ability to see the last couple columns and the scrolling delay issue. Again if the FrozenColumnsCount is set, it cant render itself correctly with the existing columns. Without this much needed function, unfortunately, we will be required to look elsewhere for another grid control. Time and money spent to swap out the control is not what we want to do.

So can you give us a definite answer on any fix to the FrozenColumnsCount property of the grid?

Maybe a workaround with 2 grids scrolling vertically with each other, one to left has no scroll, one to right has a scroll, w/o the FrozenColumnsCount needed. Ideas? Can the vertical scroll of both grids listen to each other?

Thanks!

answered on 23 Aug 2016, 08:17 AM

1_startview.png

2_scrollright.png

3_scrollbararea.png

Hello,

I'm using the following Trial Version of Telerik UI for ASP.NET AJAX to evaluate the RadGrid:

2016.2.607.

My sample grid contains column groups for 4 rows, 2 frozen columns and 2 additional columns that are resizable. The frozen columns are assigned to the same column group.

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TelerikWebApp1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadAjaxLoadingPanel ID="ralpTest" runat="server" Width="100%" Height="100%">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel runat="server" ID="rapTest" LoadingPanelID="ralpTest">

<telerik:RadGrid RenderMode="Lightweight" ID="rgTest" runat="server" AllowSorting="false" AutoGenerateColumns="false" GroupingEnabled="true"

AllowPaging="true" AllowCustomPaging="true" PageSize="1000" VirtualItemCount="300000">

<ExportSettings HideStructureColumns="true" Excel-Format="Biff" IgnorePaging="true" ExportOnlyData="true" OpenInNewWindow="true">

</ExportSettings>

<MasterTableView TableLayout="Fixed">

<ColumnGroups>

<%-- header frozen columns --%>

<telerik:GridColumnGroup HeaderText="N." Name="cGrpN"

HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="250px">

</telerik:GridColumnGroup>

<telerik:GridColumnGroup HeaderText="D." Name="cGrpD" ParentGroupName="cGrpN"

HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="250px">

</telerik:GridColumnGroup>

<telerik:GridColumnGroup HeaderText="C." Name="cGrpC" ParentGroupName="cGrpD"

HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="250px">

</telerik:GridColumnGroup>

<telerik:GridColumnGroup HeaderText="U." Name="cGrpU" ParentGroupName="cGrpC"

HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="250px">

</telerik:GridColumnGroup>

<%-- header column 3 --%>

<telerik:GridColumnGroup HeaderText="N. 001" Name="cGrpN_Item_0"