Frozen Column Scrolling Issues

36 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
    6084 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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

  5. Pavlina
    Admin
    Pavlina avatar
    6084 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
  6. Karl-Heinz
    Karl-Heinz avatar
    8 posts
    Member since:
    Jun 2012

    Posted 23 Aug 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?

     

     

     

     

  7. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 24 Aug 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017