ListBox on Mobile Phone

2 posts, 0 answers
  1. Michael
    Michael avatar
    2 posts
    Member since:
    Jun 2011

    Posted 25 Nov 2015 Link to this post

    We are using a RadListBox on a mobile phone site - test url is  http://photo.lenos.us  

    We want the list of contacts to scroll. If you access this on a mobile andriod phone w/ Chrome it will scroll very 'rough' only in small increments. BUT - if on Chrome, you click on the menu item   REQUEST DESKTOP SITE - it will reload the page and the listbox scrolling will be perfect, smooth and graceful

    Code is attached.

    I would expect the smooth scroll / flick-scroll effect when it is loaded as a mobile site.

    Any help would be appreciated.

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <style type="text/css">
        html, body{
        margin: 0px;
        height: 98vh;
        min-height: 98vh;
    }
    </style>

        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

    </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>
            <telerik:RadSkinManager Runat="server" Skin="Bootstrap"></telerik:RadSkinManager>
            <script type="text/javascript">
                //Put your JavaScript code here.
            </script>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager>
                 
            <div style="width: 100%;">
                <div style="width: 100%; height: 100%;" >
                    <telerik:RadNavigation runat="server" ID="Nav1">
                        <Nodes>
                            <telerik:NavigationNode Text="Pep Locations" BackColor="Yellow">
                                <Nodes>
                                    <telerik:NavigationNode Text="Cincinnati"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Panama"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Chicago"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Pittsburg"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Boston"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Skillman"></telerik:NavigationNode>
                                </Nodes>
                            </telerik:NavigationNode>
                            <telerik:NavigationNode Text="Pep Clients">
                                <Nodes>
                                    <telerik:NavigationNode Text="Kraft"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="P&G"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Georgia Pacific"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Heinz"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Johnson & Johnson"></telerik:NavigationNode>
                                    <telerik:NavigationNode Text="Wells Fargo"></telerik:NavigationNode>
                                </Nodes>
                            </telerik:NavigationNode>
                        </Nodes>
                    </telerik:RadNavigation>
                </div>
                <div style="width: 100%; height: 94vh;" >
                    <telerik:RadListBox runat="server" ID="RadListBoxSource" Height="100%" Width="100%" RenderMode="mobile" style="">
                        <ItemTemplate>
                             <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/bell.jpg" style="border-radius:90px" height="75px" Width="75px" />
                             <asp:label runat="server" Text="Bell,Steph" /><br />
                             <a href="tel:847-555-5555">847-555-5555</a> 
                        </ItemTemplate>
                        <Items>
                            <telerik:RadListBoxItem> </telerik:RadListBoxItem >
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
                        </Items>
                    </telerik:RadListBox>
                </div>
            </div>
        </form>
    </body>
    </html>

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 26 Nov 2015 Link to this post

    Hello,

    In this scenario, it appears that the issue is related to the TouchScrollExtender widget, which is used in mobile browsers. You may disable the widget with the following snippet:

    <script type="text/javascript">
        Telerik.Web.UI.TouchScrollExtender.prototype.initialize = function () {
        };
    </script>

    Thus, you will use the native mobile browser scroll behavior.

    Regards,
    Dimitar
    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
Back to Top