RadGrid Frozen Columns Problem on Safari Browser in Apple IPAD

33 posts, 0 answers
  1. Daniel
    Daniel  avatar
    1 posts
    Member since:
    Jan 2011

    Posted 08 Feb 2011 Link to this post

    I am using RadGrid  with static headers and frozen column for bulk update of data exactly as provided by your LiveDemo: Grid-Dataediting-ClientEditBatchUpdates.

    The Rad Grid is working as expected for all browsers (IE on windows, Safari on windows, Firefox on windows) , but we are facing problems on horizontal scroll in safari on IPad.

     

    Problem : The horizontal scroll on the grid does not move the headers, but it moves the data content. The expected behavior : on horizontal scroll, the headers and data should move on scroll.

    Remember we have frozen columns on the grid.

    This behavior is not working  only on mobile Safari . The control works as expected on  IE - windows, Safari - windows, Firefox - windows.

     

    The only difference between the livedemo Grid-Dataediting-ClientEditBatchUpdates and my code is I have added frozen column ( first 2) on the grid.

  2. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 11 Feb 2011 Link to this post

    Hello Daniel,

    This functionality (Frozen columns) is not supported in mobile browsers.
    Please excuse us for any inconvenience caused.

    Regards,
    Daniel
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeremy
    Jeremy  avatar
    7 posts
    Member since:
    Nov 2010

    Posted 22 Feb 2011 Link to this post

    Wille there be any future support for this in the mobile browsers?

  5. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 25 Feb 2011 Link to this post

    Hello Jeremy,

    Unfortunately the Frozen columns are a quite complicated functionality that is very sensitive to cross-browser issues. Furthermore it is not suitable for mobile use due to the fact that it requires more resources because of the intensive use of DOM operations.

    Regards,
    Daniel
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. karthi
    karthi avatar
    1 posts
    Member since:
    Apr 2011

    Posted 25 Apr 2011 Link to this post

    HI
       Is there any way to implement frozen column using telerik grid in ipad.

    Regards
    Karthikeyan.
  7. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 25 Apr 2011 Link to this post

    Hello Jeremy,

    I'm afraid it is not possible to use this functionality in mobile browsers.

    Regards,
    Daniel
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. John Fetherolf
    John Fetherolf avatar
    17 posts
    Member since:
    Sep 2008

    Posted 06 May 2013 Link to this post

    Has this ever been updated?  We are seeing it in 2012 Q3.

    Thanks,
    Kevin

    Kevin M. Betts
    Lead Microsoft Developer
    Kimball Midwest
  9. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 07 May 2013 Link to this post

    Hello Kevin,

    The frozen columns functionality will be supported on mobile devices but I'm afraid I can't give you a timeframe at this point. Please excuse us for any inconvenience caused.

    Best regards,
    Daniel
    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.
  10. John Fetherolf
    John Fetherolf avatar
    17 posts
    Member since:
    Sep 2008

    Posted 07 May 2013 Link to this post

    Daniel,

    Thanks for the response.  We will just keep an eye on the release notes for future versions of the grid.

    Kevin M. Betts
    Lead Microsoft Developer
    Kimball Midwest               
  11. Isabelle
    Isabelle avatar
    11 posts
    Member since:
    May 2014

    Posted 22 May 2014 in reply to John Fetherolf Link to this post

    Has this ever been updated?
  12. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 26 May 2014 Link to this post

    Hello,

    I have created a feature request for adding RadGrid Frozen Columns support for touchscreen devices at the Telerik UI for ASP.NET AJAX Ideas & Feedback Portal. There you may vote for this feature, comment it and track its status.

    Regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Prabhu
    Prabhu avatar
    1 posts
    Member since:
    Oct 2014

    Posted 20 May Link to this post

    is this issue fixed?
  14. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 20 May Link to this post

    Hello,

    The RadGrid provides Frozen columns with next/prev buttons, which may be used for mobile devices. Check the second RadGrid on the Frozen Columns demo. In order to use Frozen Columns, you need to use the Prev/Next buttons.

    Regards,
    Dimitar
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  15. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 07 Jul Link to this post

    I have enabled ClientSettings -> Scrolling -> FrozenColumnsCount but I can't see previous and next button.

     

    please help me with this.

    I am trying to test it on Mobile safari and mobile android.

    Thanks 

  16. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 08 Jul Link to this post

    Hi,

    As specified in the demo information, it is required that you set EnableNextPrevFrozenColumns="true" in addition to setting value to the FrozenColumnsCount property. And I would like to note that "Frozen columns with next/prev buttons" feature has been introduced in Q1 2015. If you are testing with an older product version, this feature is unavailable.

    Regards,
    Dimitar
    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.
  17. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 13 Jul in reply to Dimitar Link to this post

    I am using 2016 version.

     

    thanks!!!

  18. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 14 Jul Link to this post

    Hi,

    Did you enable the buttons as specified in my previous reply?

    Regards,
    Dimitar
    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.
  19. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 14 Jul in reply to Dimitar Link to this post

    I am using

    <ClientSettings>

    <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="2" SaveScrollPosition="true" EnableNextPrevFrozenColumns="true">
    </ClientSettings>

  20. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 18 Jul Link to this post

    Hi,
     I am afraid that the issue is not reproducible on my side with the settings provided.

    In order to assist you in the most efficient way I would suggest that you to open a new support ticket and provide us with a very simplified runnable project that demonstrates the behavior that you describe. Thus, we could test your exact scenario locally and determine what might be causing the issue that you are experiencing. You can find guidelines how to prepare such a sample in the Isolating a problem in a sample project blog post. It would be helful, if you provide some screenshots of the issue as well.

    Regards,
    Dimitar
    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.
  21. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 19 Jul in reply to Dimitar Link to this post

    I will make a working solution for it .

    I am using the following code please let me know if you find a problem with it.

     

     

                <div class="row mar-left-0 mar-right-0">
                            <telerik:RadGrid ID="rgProvrAtndcInvNew" runat="server"  AllowPaging="True" GridLines="Both"
                                CssClass="table-responsive rad-width" AutoGenerateColumns="false" ShowGroupPanel="false"
                                 MasterTableView-ExpandCollapseColumn-Visible="false" MasterTableView-ExpandCollapseColumn-Display="false"
                                 PageSize="25" OnNeedDataSource="rgProvrAtndcInvNew_NeedDataSource" OnBatchEditCommand="rgProvrAtndcInvNew_BatchEditCommand" OnItemCreated="rgProvrAtndcInvNew_ItemCreated" >
                                <ClientSettings>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="2" SaveScrollPosition="true" />
                                    <ClientEvents  OnBatchEditOpening="BatcheditOpening" OnBatchEditOpened="BatcheditOpened" OnUserAction="userAction"  />
                                </ClientSettings>
                       <AlternatingItemStyle Font-Size="11px" HorizontalAlign="Center" />
                                <HeaderStyle Font-Bold="True" Font-Size="11px" Height="25px" HorizontalAlign="Center"   />
                                <ItemStyle Font-Size="11px" HorizontalAlign="Center" />
                                      <PagerStyle PagerTextFormat="{4}{5} records in {1} pages" />
                        <MasterTableView AutoGenerateColumns="False" ShowHeadersWhenNoRecords="true"  EditMode="Batch" TableLayout="fixed"  Width="100%" CssClass="radgridtest table table-striped table-hover table-bordered text-center" >
                            <BatchEditingSettings EditType ="cell" OpenEditingEvent="MouseOver" />

                            <ColumnGroups>
                                <telerik:GridColumnGroup Name="ClientName" HeaderText="&nbsp;"></telerik:GridColumnGroup>
                                <telerik:GridColumnGroup Name="Day1" ></telerik:GridColumnGroup>
                                <telerik:GridColumnGroup Name="Day2" HeaderText="2"></telerik:GridColumnGroup>
                                .
    .
    .
    .
                                <telerik:GridColumnGroup Name="Day30" HeaderText="30"></telerik:GridColumnGroup>
                                <telerik:GridColumnGroup Name="Day31" HeaderText="31"></telerik:GridColumnGroup>
                            </ColumnGroups>
                            <Columns>
                                <telerik:GridTemplateColumn HeaderText="" UniqueName="NAM_CLIENT" ColumnGroupName="ClientName" HeaderStyle-Width="150px" >
                                    <HeaderTemplate>
                                        <b>Sort By: </b>
                                        <asp:DropDownList ID="ddlSortBy" runat="server"  AutoPostBack="true">
                                            <asp:ListItem Text="Care Level" Value="CL"></asp:ListItem>
                                            <asp:ListItem Text="Last Name" Value="LN"></asp:ListItem>
                                            <asp:ListItem Text="Caretaker" Value="CN"></asp:ListItem>
                                            <asp:ListItem Text="Uploaded" Value="UP"></asp:ListItem>
                                        </asp:DropDownList>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblClientName" runat="server" Text='<%# Eval("NAM_CLIENT") %>'></asp:Label>
                                       
                                                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" Wrap="true" />
                                    <HeaderStyle Width="150px"></HeaderStyle>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="NC" DataField="IND_CHANGE_NO" UniqueName="IND_CHANGE_NO" ColumnGroupName="ClientName"  HeaderStyle-Width="25px">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkNoChange" runat="server" />
                                        <asp:Label ID="lblNoChange" runat="server" Visible="false" Text='<%# Eval("IND_CHANGE_NO") %>'></asp:Label>
                                        <asp:Label ID="lblNoChangeInd" runat="server" Visible="false" Text='<%# Eval("IND_CHANGE") %>'></asp:Label>
                                    </ItemTemplate>

                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="1" UniqueName="CDE_TYPE_UNIT_CARE_1" ColumnGroupName="Day1"  HeaderStyle-Width="25px">
                                     <ItemTemplate>
                                                 <asp:Label ID="lblday1" runat="server" Text='<%# Eval("CDE_TYPE_UNIT_CARE_1") %>'  ></asp:Label>
                                     </ItemTemplate>
                                    <EditItemTemplate>
                                            <asp:DropDownList runat="server" ID="ddCareUnit1" DataTextField="DISPLAYVALUE" DataValueField="KEYVALUE" CssClass="expected-dd"> </asp:DropDownList>
                                            </EditItemTemplate>

                                </telerik:GridTemplateColumn>

    ….
    ….

                                <telerik:GridTemplateColumn HeaderText="31" UniqueName="CDE_TYPE_UNIT_CARE_31" ColumnGroupName="Day31"  HeaderStyle-Width="25px">
                                       <ItemTemplate>
                                        <asp:Label ID="lblday31" runat="server" Text='<%# Eval("CDE_TYPE_UNIT_CARE_31") %>'  ></asp:Label>                                  
                                    </ItemTemplate>
                                     <EditItemTemplate>

                                                <asp:DropDownList runat="server" ID="ddCareUnit31"  DataTextField="DISPLAYVALUE" DataValueField="KEYVALUE" CssClass="expected-dd"> </asp:DropDownList>
                                            </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>
                    </div>

     

     

    Thanks !!

  22. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 19 Jul Link to this post

    Adding to previous post , in the grid I have total 34-35 column and I am trying to freeze first two column with static header.

     

     

    Thanks !!!

  23. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 19 Jul in reply to shashi Link to this post

    I am using it even though i missed this part while posting the code.

    <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="2" SaveScrollPosition="true" EnableNextPrevFrozenColumns="true">

     

    Thanks !!!

  24. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 20 Jul Link to this post

    Hi,

    Reviewing your RadGrid settings helped me identify the cause of the issue faced.
    As the Prev/Next buttons are command items, you need to set the MasterTableView-CommandItemDisplay property to a value other than None. It is None by default. Set it to Top for example and the buttons will be available above your RadGrid.

    Regards,
    Dimitar
    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.
  25. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 20 Jul in reply to Dimitar Link to this post

    Thanks !!!! Now I can see prev and next button but when I click on the next or previous button nothing happens.

    in android tablet and mobile frozen column and static header are not working.

    it just has a horizontal scroll bar which moves full data.

     

    please help me to solve this issue.

     

  26. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 20 Jul in reply to shashi Link to this post

    I just tested again it is working on android phone only issue is with iPad and iPhone.

     

    Thanks !!!!

  27. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 20 Jul Link to this post

    Can I only show commanditem row for small or mobile view using cuss or jquery ?

     

  28. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 22 Jul Link to this post

    After making all changes its not working for IPad and iPhone .

    its working fine in android phone and tablet .

    please help me with it .

     

  29. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 25 Jul Link to this post

    Hello,

    You may use the RadDeviceDetectionFramework, which would allow you to enable the command item row only on devices with small or medium screen size in code behind for example.
    I am afraid that I cannot reproduce the reported behavior that the Prev/Next buttons do not work on iOS devices only. In order to assist you in the most efficient way I would suggest that you provide a very simplified runnable project that demonstrates the behavior that you describe. It may include aspx, code behind, web.config, dummy data source, as well as any other files you find necessary. Thus, we could test your exact scenario locally and determine what might be causing the issue that you are experiencing. You can find guidelines how to prepare such a sample in the Isolating a problem in a sample project blog post.

    Regards,
    Dimitar
    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.
  30. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 11 Aug in reply to Dimitar Link to this post

    I am creating the solution , will post it here.

    Can we use this feature in android phone/ tablet and use horizontal scroll in iPhone /iPad .

    can I achieve this by using jquery if yes can you please guide me to implement this.

     

    Thanks !!!!

  31. shashi
    shashi avatar
    24 posts
    Member since:
    Jan 2016

    Posted 11 Aug Link to this post

    i have created the solution but where to upload it ?

    I don't have a support ticket.

     

    Thanks !!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017