RadGrid on iPad - width flickering

[Dev]

I have a RadGrid in a RadWindow.  On an iPad3 when it loads up the width of it jumps as if it's trying to make room for a scrollbar and then jumps back.  This happens several times a second and is quite annoying.  If you zoom or drag the page around at all the flickering stops, but it'd be better if it didn't do it at all.

It doesn't seem to happen to all grids, so before I go to the trouble of figuring out exactly what triggers it has anyone else seen the same issue?

[Marin]

Hello,

 We have not identified such issue before. It will be helpful if you could share sample markup so we can check the configuration. For example it depends whether the grid is inside another container and if it has any custom CSS or dimensions specified.

Regards,
Marin
the Telerik team

[Dev]

I've investigated a little further and the issue seems to be triggered by a combination of UseStaticHeaders="True" with AllowScroll="True" where the content is wide enough to force text line breaks within the cells.  Rather than investigate further however I'm just setting             UseStaticHeaders = False in the code behind for the problem data.

[Marin]

Hello,

 If disabling the static headers is acceptable and it resolves the issue in your case then you can freely use this approach.

Regards,
Marin
the Telerik team

[Paul McNamara]

We are having the same issue on the iPad, and disabling off the static headers works, however, thats not an option for us. Is there any other solution to it?

Our page is based on a master page and in the content the only thing we have is:

<asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server">         
    <div id="divGridResults" runat="server" style="height: 100%;" class="GridBox">                         
        <telerik:RadGrid ID="gridResults" runat="server" AllowSorting="True" EnableEmbeddedSkins="false"                             
                RegisterWithScriptManager="true" Height="100%" CssClass="rgNoScrollImage" 
                EnableLinqExpressions="false">             
            <ItemStyle Height="20px" Wrap="false"></ItemStyle>             
            <AlternatingItemStyle Height="20px" Wrap="false"></AlternatingItemStyle>             
            <SortingSettings EnableSkinSortStyles="true"></SortingSettings>             
            <ClientSettings EnableRowHoverStyle="true">                 
                <ClientEvents >                 
                </ClientEvents>                                 
                <Selecting AllowRowSelect="true"></Selecting>                 
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />             
            </ClientSettings>             
            <ExportSettings ExportOnlyData="true"></ExportSettings>             
            <HeaderStyle Height="20px" Wrap="false"></HeaderStyle>             
            <MasterTableView Width="100%" AllowNaturalSort="false"
                             AutoGenerateColumns="true" 

            </MasterTableView> 
        </telerik:RadGrid>     
    </div> 
</asp:Content>

On the server side the only thing that we are doing is get the dataset from a view in the database and then do the below on Page_PreRender:
gridResults.DataSource = dsResults         
gridResults.DataBind()

Also have the below ColumnCreated event for the grid that sets the grids column width:

Private Sub gridResults_ColumnCreated(sender As Object, e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles gridResults.ColumnCreated         
    If _columnSizes.ContainsKey(e.Column.UniqueName) Then e.Column.HeaderStyle.Width = Unit.Percentage(20)
End Sub

P.S: The above only happens when we open the page in a RadWindow but doesnt happen if I open as a iPad Safari browser tab. 
Also the only time it happens when the number of columns returned are a lot more than the width of the radwindow

[Marin]

Hello,

 I replied to the support ticket that you have opened on the same issue. We can continue the communication there in order to avoid duplicate posts.

Regards,
Marin
Telerik

[Sabaratnam]

Why not share the solution or a link to the solution so that we can all benefit and contribute. I am having a similar issue.

[quote]Marin said:Hello,

 I replied to the support ticket that you have opened on the same issue. We can continue the communication there in order to avoid duplicate posts.

Regards,
Marin
Telerik

 

 

[/quote]

[Pavlina]

Hello,

Below you can see the answer of my colleague Marin in the mentioned support ticket:
When using static headers the grid executes javascript code to properly adjust its column widths and table layout (this is in order to avoid misaligning between the column headers and rest of the table), but normally this does not cause any kind of flickering. All browsers execute the javascript fast enough to avoid any noticeable adjustment. You can also see this if the page is open in a standard browser tab outside of other content. I'm not sure whether opening the page inside the iframe of a RadWindow causes any kind of slowdown and is simply a limitation of the Safari browser which does not handle well this particular case.
In order to try to further investigate the issue and see if there is a way to avoid the flickering it will be helpful if you can send us a sample runnable project that replicates the issue so we can check it on our side and let you what can be done in this case.

As pointed in the reply it would be best to send a sample project via support ticket where the issue can be observed. Also confirm that the issue can be observed with the latest Telerik UI version.

Regards,
Pavlina
Telerik