RadGrid Frozen Columns Problem on Safari Browser in Apple IPAD

[Daniel]

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.

[Daniel]

Hello Daniel,

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

Regards,
Daniel
the Telerik team

[Jeremy]

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

[Daniel]

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

[karthi]

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

Regards
Karthikeyan.

[Daniel]

Hello Jeremy,

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

Regards,
Daniel
the Telerik team

[John Fetherolf]

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

Thanks,
Kevin

Kevin M. Betts
Lead Microsoft Developer
Kimball Midwest

[Daniel]

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

[John Fetherolf]

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               

[Isabelle]

Has this ever been updated?

[Dimitar]

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

 

 

[Prabhu]

is this issue fixed?

[Dimitar]

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

[shashi]

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 

[Dimitar]

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

[shashi]

I am using 2016 version.

 

thanks!!!

[Dimitar]

Hi,

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

Regards,
Dimitar
Telerik by Progress

[shashi]

I am using

<ClientSettings>

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

[Dimitar]

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

[shashi]

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 !!

[shashi]

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 !!!

[shashi]

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 !!!

[Dimitar]

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

[shashi]

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.

 

[shashi]

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

 

Thanks !!!!

[shashi]

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

 

[shashi]

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

its working fine in android phone and tablet .

please help me with it .

 

[Dimitar]

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

[shashi]

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 !!!!

[shashi]

i have created the solution but where to upload it ?

I don't have a support ticket.

 

Thanks !!

[Dimitar]

Hi,

I have contacted our team responsible for user licenses. They will contact you and will assist you with the process of license purchasing. After that you will have access to our support system.

Regards,
Dimitar
Telerik by Progress

[shashi]

I am using licensed telerik controls. It's not trial version it's corporate license.

what do I need to create a support ticket with it .please can you guide it.

 

thanks !!!

[Dimo]

Hello Shashi,

Please ask the current license holder at your company to login at telerik.com and visit the following page:

https://www.telerik.com/account/manage-licensed-users

(The page is accessible from the "Your Account" page after clicking on "Products & Subscriptions".) 

There the license holder will be able to assign you as a licensed developer, and this will allow you to benefit from our support service and submit tickets with a 24h response time.

If you need help or have questions about the above procedure, please contact [e-mail] and we will readily assist.

Regards,
Dimo
Telerik by Progress