While using frozen column horizontal scroll Disappears on Window resize

[Prosen]

I am using 3 frozen columns in my grid. And then there are other columns that are dynamically added to the grid.
A horizontal scroll appears when the columns exceeds the maximum width. Till now it works great.
Now if I scroll the horizontal scroll to extreme right and resize my browser window, the horizontal scroll disappears making the the initial non frozen columns inaccessible.
This issue does not occur when forzen columns is removed.

Here is my grid's markup:

<telerik:radgrid id="pptGrid" runat="server" height="450px" Width="1024px" CssClass="pptGrid" OnItemDataBound="pptGrid_ItemDataBound" AutoGenerateColumns="false">
    <HeaderStyle CssClass="centeredTableHeader"></HeaderStyle>
    <ItemStyle CssClass="pptGridItem"></ItemStyle>
    <AlternatingItemStyle CssClass="pptGridItem"></AlternatingItemStyle>
    <ClientSettings Scrolling-AllowScroll="True">
        <Resizing AllowColumnResize="False" EnableRealTimeResize="false" ClipCellContentOnResize="false">
        </Resizing>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" FrozenColumnsCount="3" EnableVirtualScrollPaging="true">
        </Scrolling>
        <ClientEvents OnGridCreated="scrollDiv" />
    </ClientSettings>

    <MasterTableView autogeneratecolumns="false" TableLayout="fixed">
        <Columns>

        </Columns>
    </MasterTableView>
    <HeaderContextMenu EnableAutoScroll="True">
    </HeaderContextMenu>
</telerik:radgrid>

Is there any additional property setting I need to use? Please suggest ?

[Dimo]

Hello Prosen,

This is an existing issue and I am afraid there is no known workaround. Sorry about the inconvenience.

Best wishes,
Dimo
the Telerik team

[Jack]

What are you plans for fixing this?

I have the exact same problem. If anyone tries to develop using frozen columns they will inevitably run into this problem.

How long has this been an issue for?

[Dimo]

Hello Mark,

We have researched this issue and have found no good fix so far. I am afraid I can't provide specific timeframe as to when the problem will be resolved.

Regards,
Dimo
the Telerik team

[Richie]

We are seeing the same issue. This is a HUGE problem for us. In IE 8 we see this issue but we don't see it in compatibility mode.

[Jesse]

We're seeing this as well (and a number of related items). Do you have the link to the bug in the public bug list? I'm unable to find the related issues. Otherwise I'll submit them to the database.

[Dimo]

Hello Jesse,

There is a related item in our issue tracking system, which I have now made public, so it will appear in PITS after the next synchronization (once in 24 hours).

http://www.telerik.com/support/pits.aspx

Regards,
Dimo
the Telerik team

[Srikanth]

Hello, 

Did you get any chance to look at this problem. I'm also facing the same problem, If I placed Compatibility view then the frozen column is working, else no horizontal scroll and all the data is becoming clumsy.. But if I go through Compatibility view, My default Master page Css is blurring.

What to do, Can you check for a fix for this at the earliest..

Thanks.
Srikanth,.

[Dimo]

Hello Srikanth,

I am afraid this issue has a lower priority, compared to other tasks we currently have and we haven't researched it yet.

Greetings,
Dimo
the Telerik team

[Lana]

We found a workaround that worked for us.

Apparently the scrollbar disappears when header height changes while scrolling, i.e. when column header text wraps into different number of rows for different columns. So, setting the header height to the maximum expected column header height allows to avoid the problem. For example:
<MasterTableView>
    <HeaderStyle Height="60px" />

 

[Jon]

Any update on this issue? I have run into the same situation. The "resolution" of setting a height in the headerstyle of the RadGrid did not work for me.

Regards,
Jon

[Pavlina]

Hello Jon,

Unfortunately we cannot say for sure when this problem will be fixed. It is a high priority for our developers, and hopefully we might see the problem resolved soon.

Regards,
Pavlina
the Telerik team

[Stanley]

I have found in my case that if I resize to any resolution less than 1280 x 1024 then the scroll bar will not appear. Anything equal or above this then it will appear.

[Galin]

Hi Stanley,

Thank you for your suggestion. I forward it to our developers and they will point the notice.

Regards,
Galin
the Telerik team

[Pavlina]

Hi Richie,

I am glad to announce that this bug is already fixed and the fix is available in Q2 2011 SP release of RadControls for ASP.NET AJAX.

All the best,
Pavlina
the Telerik team

[Stanley]

I'm sorry Pavlina but unless we are talking about a different issue I am still getting a problem that if I resize my screen to less than 1280 x 1024 then no horizontal scroll bar appears. 

I have installed the latest version of the DLL's.

[Pavlina]

Hello Stanley,

Can you please verify that after you resize the browser window the RadGrid control does not fit in the allowed space and still needs a horizontal scroll to show its data?

If the problem still persists, please send us a sample project via support ticket where the issue can be observed, so we can provide a solution/fix.

Regards,
Pavlina
the Telerik team

[Stanley]

Please see the attached screens.


As you can see in screen 1 there is a horizontal bar showing with my current resolution of 1680 x 1050

When I resize to 1280 x 768 no horizontal bar appears.

Cheers

[Martin]

Hello Stanley,

I have already addressed the support ticket you have opened on the same topic. To make my post available for our community I am pasting it here as well:

"I am afraid that I can not confirm whether in this particular scenario you have hit a bug or a limitation of the control. However, I am forwarding your report to our developers for further investigation. Once I have any feedback on the matter, I will get back to you with the details."

Regards,
Martin
the Telerik team

[Galin]

Hi Stanley,

I have tested the provided markup as well and as Martin said before, the problem is not replicated on our side. Based on your information and the screenshot I guess there is a problem with the page layout and any element on this position will be partially hidden. 

Also, could you try to repaint the RadGrid after every change of its dimensions?

Please note that the bug described in this forum appears only when horizontal scroll is to extreme right and resize the browser window. It seems that your case is different. 

As I said above, we did not manage to replicate the issue that you are facing, so we cannot be sure what exactly causes it. Therefore, if it persists, please send us a small running project that we can use to reproduce the problem.

Additionally, in order to avoid duplicate posts, I suggest that we continue the communication in the support ticket.

All the best,
Galin
the Telerik team

[Stacie]

Hello,

I'm having the same issue as the initial post on:
http://www.telerik.com/community/forums/aspnet-ajax/grid/while-using-frozen-column-horizontal-scroll-disappears-on-window-resize.aspx

Is there a fix for this?
When I'm using static headers and scroll to the right, the grid renders the first column and I'm unable
to access the last column when scrolling all the way to the right.

Need a fix ASAP in order to turn in our project.

Thank you in advance. 

[Tsvetina]

Hi Carlos,

Can you confirm that you replicate this behavior with the latest version of RadControls (Q2 2012)?

Regards,
Tsvetina
the Telerik team

[Stacie]

I just ran the update within Visual Studio and it seems to have been fixed.
That said, the performance is really slow. I do have data loaded dynamically as the user is scrolling.

Is there way to improve performance? It's mostly anything to do with AJAX.

Thank You.

[Tsvetina]

Hi Carlos,

There is probably too much content being rendered and the javascript needed to perform the scroll slows down the page. Things that you can consider for improving performance are limiting the number of columns displayed; if you display any script controls in the grid - replace them with simpler components or remove them entirely.

All the best,
Tsvetina
the Telerik team

[Pierre]

Hi,

I have the same issue (cf. print screen) with RadControls Q2 2012 (2012.2.607.40).
I use the following ClientSettings :

<ClientSettings AllowColumnsReorder="True" ColumnsReorderMethod="Reorder">
    <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="True"></Resizing>
    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" FrozenColumnsCount="2"></Scrolling>
</ClientSettings>

How to fix it ?

Thank you in advance. 

[Tsvetina]

Hello Pierre,

I tried to reproduce the issue on my side by copying your settings to a simple grid built using Q2 2012 but to no avail. Can you take a look at the sample attached to this message and let me know if there is anything missing in it?

Regards,
Tsvetina
the Telerik team

[Rock]

I can't still fix the horizantal scroll Disappears when window is at maximize beharior. I am using IE9 right. Can please help me?

[Pierre]

Hi Tsvetina,

I try to reproduce the issue with your sample and I succeed (cf. print screen).
If FrozenColumnsCount have a value the bottom of grid isn't resize but if FrozenColumnsCount is missing it's fine.

[Richard]

Hi, I have the same problem as the original poster and I am using the latest version (2012.2.607.35).
To reproduce:

1. Run the app in a maximized window
2. Make the window smaller so that the horizontal scroll bar appear
3. Scroll to the right so that some columns are hidden
4. Maximize the window: columns that were hidden are no longer visible

I was able to reproduce it on IE 8 and IE 9 with compatibility view. On IE 9 without the compatibility view it seems to be better but there still was some strange display issue (when executing step #4 the columns that were hidden reappear but they are not aligned with the header). I could not reproduce it with Chrome and FireFox.

I did a small project to reproduce the problem. Here is my code (there is no code on the server side):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GridResizeTest.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript">

        var props = null;

        function BindGridView() {

            var mtv = $find('RadGrid2').get_masterTableView();
            mtv.set_dataSource(props);
            mtv.dataBind();
        }


        function pageLoad(sender, args) {

            var propsStr =
                '[{"Id":1000239080,"IsInternalProp":true,"MapReference":"A","Name":"Property 1","Type":"Mixed Use","Address":"Houston, TX, 77055","YearBuilt":"1926","YearReno":"N/A","Size":"72500","UnitsOfMeasure":"Sq Ft",' +
                    '"OccupancyPct":73.1034482758621,"OccupancyAsOfDate":"\/Date(1310446800000)\/","OriginationDate":"\/Date(1166076000000)\/","OriginalBalance":4900000,"CurrentBalance":4558242.42,"LTV":0.7538,' +
                    '"AppraisalDate":"\/Date(1199983239017)\/","MaturityDate":"06/11/2012","Status":"On Book (Funded)","Latitude":29.7970042,"Longitude":-95.4830243,"PropertyTypeId":1000000100,"QuotedMeasureId":0,"ActualStatus":"Funded/Watchlist"},' +
                '{"Id":1011246890,"IsInternalProp":false,"MapReference":"B","Name":"Property 2","Type":"Mixed Use","Address":"4601 Washington Avenue, Houston, TX, 77007","YearBuilt":"2009","YearReno":"N/A","Size":"49461",' +
                    '"UnitsOfMeasure":"Sq Ft","OccupancyPct":88.94,"OccupancyAsOfDate":"\/Date(1314853200000)\/","OriginationDate":"\/Date(1320123600000)\/","OriginalBalance":10430021.66,"CurrentBalance":10878245.18,"LTV":0,' +
                    '"AppraisalDate":"\/Date(1320732000000)\/","MaturityDate":"11/05/2021","Status":"Active","Latitude":29.7703016,"Longitude":-95.4076239,"PropertyTypeId":1000000100,"QuotedMeasureId":0,"ActualStatus":"Performing"}]';
            props = $.parseJSON(propsStr);

            BindGridView();

        }

        function RadGrid2_Command(sender, args) {
        }

    </script>
</head>

<body>
    <form id="form1" runat="server">
    <asp:scriptmanager runat="server"></asp:scriptmanager>
    <div id="divGrid" style="width:100%">
        <telerik:RadGrid ID="RadGrid2" runat="server" Width="100%" >
            <MasterTableView DataKeyNames="ID" TableLayout="Fixed" Width="1275px">
                <Columns>
                    <telerik:GridBoundColumn UniqueName="PropertyId" DataField="Id" Visible="false" />
                    <telerik:GridBoundColumn UniqueName="IsInternalProp" DataField="IsInternalProp" Visible="false" />
                    <telerik:GridImageColumn UniqueName="TreppIcon" SortExpression="IsInternalProp" HeaderText="Src" HeaderStyle-Width="30px" ImageUrl="~/images/clear.gif" />
                    <telerik:GridBoundColumn UniqueName="MapReference" DataField="MapReference" HeaderImageUrl="~/images/google-marker.png" SortExpression="MapReference" HeaderStyle-Width="30px" />
                    <telerik:GridImageColumn UniqueName="HideProperties" HeaderText="" HeaderStyle-Width="30px" ImageUrl="~/images/clear.gif" />
                    <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Property" SortExpression="Name" HeaderStyle-Width="120px" />
                    <telerik:GridBoundColumn UniqueName="PropertyType" DataField="Type" HeaderText="Type" SortExpression="Type" HeaderStyle-Width="70px" />
                    <telerik:GridBoundColumn UniqueName="Address" DataField="Address" HeaderText="Address" SortExpression="Address" HeaderStyle-Width="140px" />
                    <telerik:GridBoundColumn UniqueName="YearBuilt" DataField="YearBuilt" HeaderText="Built" SortExpression="YearBuilt" HeaderStyle-Width="50px" />
                    <telerik:GridBoundColumn UniqueName="YearReno" DataField="YearReno" HeaderText="Reno" SortExpression="YearReno" HeaderStyle-Width="50px" />
                    <telerik:GridBoundColumn UniqueName="PropSize" DataField="Size" HeaderText="Size" SortExpression="Size" HeaderStyle-Width="80px" />
                    <telerik:GridBoundColumn UniqueName="OccPct" DataField="OccupancyPct" HeaderText="Occ %" SortExpression="OccupancyPct" HeaderStyle-Width="60px" DataFormatString="{0:N1}%" />
                    <telerik:GridBoundColumn UniqueName="OccupancyAsOfDate" DataField="OccupancyAsOfDate" HeaderText="Occ As Of" SortExpression="OccupancyAsOfDate" HeaderStyle-Width="80px" DataFormatString="{0:MM/dd/yyyy}" />
                    <telerik:GridBoundColumn UniqueName="OriginationDate" DataField="OriginationDate" HeaderText="Orig Date" SortExpression="OriginationDate" HeaderStyle-Width="80px" DataFormatString="{0:MM/dd/yyyy}"/>
                    <telerik:GridBoundColumn UniqueName="OriginalAmount" DataField="OriginalBalance" HeaderText="Orig Bal" SortExpression="OriginalBalance" HeaderStyle-Width="85px" DataFormatString="{0:C0}" />
                    <telerik:GridBoundColumn UniqueName="CurrentBalance" DataField="CurrentBalance" HeaderText="Curr Bal" SortExpression="CurrentBalance" HeaderStyle-Width="85px" DataFormatString="{0:C0}" />
                    <telerik:GridBoundColumn UniqueName="LTV" DataField="LTV" HeaderText="LTV" SortExpression="LTV" HeaderStyle-Width="65px" DataFormatString="{0:P1}" />
                    <telerik:GridBoundColumn UniqueName="AppraisalDate" DataField="AppraisalDate" HeaderText="Appraisal" SortExpression="AppraisalDate" HeaderStyle-Width="80px" DataFormatString="{0:MM/dd/yyyy}" />
                    <telerik:GridBoundColumn UniqueName="MaturityDate" DataField="MaturityDate" HeaderText="Maturity" SortExpression="MaturityDate" HeaderStyle-Width="80px" />
                    <telerik:GridBoundColumn UniqueName="LoanStatus" DataField="Status" HeaderText="Status" SortExpression="Status" HeaderStyle-Width="60px"/>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnCommand="RadGrid2_Command" />
                <Scrolling AllowScroll="true" FrozenColumnsCount="6" UseStaticHeaders="true" />
            </ClientSettings>
        </telerik:RadGrid>

    </div>
    </form>
</body>
</html>

Am I missing something?
Thanks,
Richard.

[Galin]

Hi Pierre

Following your scenario it seems that the scrollbar disappearing is expected. As you showed in the print screen, this happens without frozen columns too.
However, the problem here is in the additional empty space; therefore I am forwarding this issue to our developers so they could further research on the presented issue.
Thank you for reporting us this problem.

Richard,

On RadGrid resizing, there is no scrolling event and this is the reason for the new columns to not appear in the additional empty space.  This issue will also be forwarded to our dev team for further investigation.
Thank you for your cooperation and reporting this to us.
In the meantime, as a possible workaround I would suggest you to force scrolling on window resizing.
I hope this helps.

Regards,

Galin
the Telerik team

[Richard]

Hi Galin,
thanks for your answer. Is it possible to force the scrolling on the client side? If so could you give me a tip on how to do it?

Richard.

[Galin]

Hi Richard,

I can suggest you the following JavaScript function. Please check it out and let me know how it goes.

function pageLoad() {
    window.onresize = function () {
        var grid = "<%= RadGrid1.ClientID %>",
            frozenScroll = $get(grid + "_Frozen");
        frozenScroll.scrollLeft--;
        frozenScroll.scrollLeft++;
    }
};

Regards,
Galin
the Telerik team

[Richard]

Hi Galin,
I know it's been a while, but I yes, your solution worked fine!

Thanks for your help,
Richard.

[Ashok]

Hi

               Frozen colum not working in ie9..can u pls send ur code

[Galin]

Hello Ashok,

As you can see the live demo the frozen column feature works on all supported browser including the IE9.
Therefore in case the issue persists please give us more details on what you are trying to achieve or possibly a small running project that we can use to reproduce the case.

Regards,
Galin
Telerik

[Gourav]

Put this into a css part and it will work

[id$='_Frozen']
        {
            height: 16px !important;
        }

[Alfonso]

[quote]Gourav said:

Put this into a css part and it will work

[id$='_Frozen']
        {
            height: 16px !important;
        }

[/quote]

 

 

I had the same problem, and this solved it.

 

Thanks Gourav.