Frozen Columns problems on mobile (dragging/swiping related)

1 posts, 0 answers
  1. Thomas
    Thomas avatar
    1 posts
    Member since:
    Sep 2017

    Posted 18 Sep 2017 Link to this post

    I have a fairly standard grid, nothing fancy. My company made our own custom control derived from the RadGrid. So the example I'm providing will reflect that. 

    <Efficio:EfficioGridView runat="server" ID="grdIncrease" AllowSorting="True" RetainDataInViewState="True">
        <MasterTableView Width="100%">
            <Columns>
                <Efficio:EfficioGridTemplateColumn HeaderText="Account" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" SortExpression="AdvertiserName">
                    <ItemTemplate>
                        <asp:HyperLink CssClass="ListLineCEL" ID="lnkAdvertizer" NavigateUrl='<%# "/Efficio/Account/AccountSummary.aspx?aid=" + DataBinder.Eval(Container.DataItem, "advertiserguid") %>' Text='<%# DataBinder.Eval(Container.DataItem, "advertisername") %>' runat="server" />
                    </ItemTemplate>
                </Efficio:EfficioGridTemplateColumn>
                <Efficio:EfficioGridTemplateColumn HeaderText="This Year" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" SortExpression="ThisYearAmount" DataType="System.Int32">
                    <ItemTemplate>
                        <%# Common.Utilities.FormatMoney(Convert.ToString(DataBinder.Eval(Container.DataItem, "ThisYearAmount")), true)%>
                    </ItemTemplate>
                </Efficio:EfficioGridTemplateColumn>
                <Efficio:EfficioGridTemplateColumn HeaderText="Last Year" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" SortExpression="LastYearAmount" DataType="System.Int32">
                    <ItemTemplate>
                        <%# Common.Utilities.FormatMoney(Convert.ToString(DataBinder.Eval(Container.DataItem, "LastYearAmount")), true)%>
                    </ItemTemplate>
                </Efficio:EfficioGridTemplateColumn>
                <Efficio:EfficioBoundDifferenceColumn HeaderText="$ Diff" DataField="DiffAmount" SortExpression="DiffAmount" DifferenceType="Money" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" DataType="System.Int32">
                </Efficio:EfficioBoundDifferenceColumn>
                <Efficio:EfficioBoundDifferenceColumn HeaderText="% Diff" DataField="PercentAmount" SortExpression="PercentAmount" DifferenceType="Percentage" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" DataType="System.Int32">
                </Efficio:EfficioBoundDifferenceColumn>
            </Columns>
        </MasterTableView>
    </Efficio:EfficioGridView>

    In my code behind, I'm using mobile detection and enabling all the standard stuff for frozen columns:

    if (State.IsMobileDevice(Page.Request.UserAgent))
    {
        grdIncrease.ClientSettings.Scrolling.AllowScroll = true;
        grdIncrease.ClientSettings.Scrolling.UseStaticHeaders = true;
        grdIncrease.ClientSettings.Scrolling.FrozenColumnsCount = 1;
        grdIncrease.MasterTableView.TableLayout = GridTableLayout.Fixed;
        grdIncrease.HeaderStyle.Width = 200;
    }

    The end result is this. The scrollbar at the bottom scrolls through the locked columns as expected. But when I drag or swipe within the grid body, the static headers don't move at all and the frozen columns do not stay frozen. Its like the grid content is scrolling around in the direction I drag or swipe my finger and does not stay lined up with the headers at all. 

Back to Top