Frozen Column Scrolling Issues

39 posts, 0 answers
  1. Ravi
    Ravi avatar
    7 posts
    Member since:
    Sep 2015

    Posted 02 Dec 2015 in reply to Pavlina Link to this post

    HI Pavlina,

    I am using Kendo UI Beta v2015.3.916

    Same problem I am facing that if ,
    I have locked some number of columns,

    and when I tried to scroll the horizontally unlocked columns

    Expected result: locked columns should not be flicker

    Actual result: Locked columns are flickering with respect to unlocked columns

  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 04 Dec 2015 Link to this post

    Hello,

    I am sorry to hear that you encounter the same problem with Kendo UI, however in order to get more accurate answer why the locked columns of Kendo UI grid are flickering I suggest you open a separate ticket for the corresponding product.

    Regards,
    Pavlina
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. Ravi
    Ravi avatar
    7 posts
    Member since:
    Sep 2015

    Posted 04 Dec 2015 in reply to Pavlina Link to this post

    Hi Pavlina,

    Thanks for reply I have solved the issue by updating the kendo ui version.. :)

    Regards

    Ravi

  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 07 Dec 2015 Link to this post

    Hello,

    I am glad to hear that this problem is resolved in the latest Kendo UI version. Good luck with your project.

    Regards,
    Pavlina
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  5. Karl-Heinz
    Karl-Heinz avatar
    10 posts
    Member since:
    Jun 2012

    Posted 23 Aug 2016 Link to this post

    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">
     
    <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"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup HeaderText="D. 001" Name="cGrpD_Item_0" ParentGroupName="cGrpN_Item_0"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup HeaderText="C. 001" Name="cGrpC_Item_0" ParentGroupName="cGrpD_Item_0"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup HeaderText="U. 001" Name="cGrpU_Item_0" ParentGroupName="cGrpC_Item_0"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
     
                            <%-- header column 4 --%>
                            <telerik:GridColumnGroup HeaderText="N. 002" Name="cGrpN_Item_1"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup HeaderText="D. 002" Name="cGrpD_Item_1" ParentGroupName="cGrpN_Item_1"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup HeaderText="C. 002" Name="cGrpC_Item_1" ParentGroupName="cGrpD_Item_1"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup HeaderText="U. 002" Name="cGrpU_Item_1" ParentGroupName="cGrpC_Item_1"
                                HeaderStyle-HorizontalAlign="Left">
                            </telerik:GridColumnGroup>
                        </ColumnGroups>
                        <Columns>
                            <%-- frozen columns --%>
                            <telerik:GridBoundColumn HeaderText="Value 1:" DataField="Test1" DataType="System.Int32" ColumnGroupName="cGrpU"
                                AllowSorting="false" Resizable="false" HeaderStyle-Width="125px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Value 2:" DataField="Test1" DataType="System.Int32" ColumnGroupName="cGrpU"
                                AllowSorting="false" Resizable="false" HeaderStyle-Width="125px">
                            </telerik:GridBoundColumn>
     
                            <%-- column 3 --%>
                            <telerik:GridBoundColumn HeaderText="Value 3:" DataField="Test2" DataType="System.Int32" ColumnGroupName="cGrpU_Item_0"
                                AllowSorting="false" Resizable="true">
                            </telerik:GridBoundColumn>
     
                            <%-- column 4 --%>
                            <telerik:GridBoundColumn HeaderText="Value 4:" DataField="Test3" DataType="System.Int32" ColumnGroupName="cGrpU_Item_1"
                                AllowSorting="false" Resizable="true">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <SortExpressions>
                        </SortExpressions>
                    </MasterTableView>
                    <ClientSettings>
                        <Virtualization EnableVirtualization="true" LoadingPanelID="ralpTest" InitiallyCachedItemsCount="2000" ItemsPerView="100" />
                        <Resizing AllowColumnResize="True" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="2" />
                    </ClientSettings>
                </telerik:RadGrid>
            </telerik:RadAjaxPanel>
        </div>
        </form>
    </body>
    </html>

     

    As expected, the horizontal scrollbar is visible after increasing the width of the third column. But Scrolling to the right causes the following effect: The first 2 column groups are showing the header text of the invisible third column. Screenshots: 1_StartView.png, 2_ScrollRight.png.

     

    Additionally: If the width of the third column is decreased, the scrollbar area is still visible. Screenshot: 3_ScrollbarArea.png.

     

    Would it be possible to avoid this behaviour?

     

     

     

     

  6. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 24 Aug 2016 Link to this post

    Hi,

    Not really. The grid needs to render a different horizontal scrollbar. When having frozen columns the widths of the columns should be adjusted so the horizontal scrollbar is always visible initially. The grid performs a lot of initializations and additional calculations on initial load so the frozen columns feature can work correctly. However if the horizontal scrollbar is not visible initially these calculations are not performed which causes the problematic behavior.
    Possible workarounds are to use the client-side freeze / unfreeze options of the header context menu of the grid to set a frozen columns after the grid is loaded on the page. This can also be set by using the _toggleFreeze method of the grid column but EnableColumnClientFreeze option should be set to "true" in this case: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/persisting-frozen-columns-client-side in this case it does not matter if the grid has initial scrolling or not.

    Another option is perform a postback and fresh the page after the column resizing has completed - this way the grid will render again with the correct initialization of the horizontal scroll for frozen columns.

    I hope this helps. Let me know if you have any other questions.

    Regards,
    Marin
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Suresh Krishna
    Suresh Krishna avatar
    30 posts
    Member since:
    Sep 2009

    Posted 20 Jul 2018 in reply to Pavlina Link to this post

    hi,

    I'm facing a similar issue with this version 2018.2.516. 40 , This happens when FrozenColumnsCount=1 is set and the resolution of the screen is set to 1366 x768. Grid has autogenerated columns.

  8. Alvin
    Alvin avatar
    1 posts
    Member since:
    Jun 2017

    Posted 13 Oct 2020 in reply to Pavlina Link to this post

    Pavlina,

     

    Currently, I suffered the same issue when scroll horizontally to the far right column using version 2020.2.6.17. Was the problem fixed in Q1 2015 release? I also spot the same bug at the demo website of the frozen column at telerik UI for Ajax. 

  9. Doncho
    Admin
    Doncho avatar
    96 posts

    Posted 16 Oct 2020 Link to this post

    Hi Alvin,

    Thank you for the sketch!

    I am afraid that the issue you are describing is not among these that have been solved in Q1 2015, see UI for ASP.NET AJAX Q1 2015

    This inconsistency in the appearance is indeed expected when scrolling with frozen columns.
    When the RadGrid is scrolled horizontally to its end, the sum of widths of the displayed columns could be lower than the current width of the RadGrid itself. Therefore, all the displayed columns are auto resized to fulfill the RadGrid width.

    In addition, when using Frozen Columns the Static Headers need to be enabled as well and so, that will require the columns to be set to a specific width using pixels, see Scroll with Static Headers article.
    A specific case in which you can avoid the issue is In case all columns have equal widths you can predefine an absolute width(in pixels) for the Grid so that it is a multiple of the column width. For instance width of columns 200px and Grid width 1200px.

    If the columns are auto-generated, in order to set the width per column individually you could use the ColumnCreated event of the Grid which fires for every column, see Working with Autogenerated Columns. Or you could use the PreRender event and loop through the columns of the Grid. In that event, you will need to Rebind() the Grid once you set the Width for the columns. 

    Here is a Forum post for setting the Width of auto-generated columns: Auto generated columns set width.

    Kind regards,
    Doncho
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top