ComboBox on the iPad/iPhone

[Jake]

Many users have begun using our website on their iPads and iPhones. At present, it appears that Telerik doesn't fully support these platforms with RadControls... for example, the RadComboBox is not treated like a dropdown natively by the Safari browser (i.e. using the native picker); instead, it is displayed as it would be on a desktop browser.

Are there any plans to include full mobile Safari support in the near future?

Many thanks,

Jake

[Kamen Bundev]

Hello Jake,

The RadComboBox issue is actually a bug with the drop down positioning which I just fixed and the fix will be available with the next release.

We currently don't have any specific plans for native (as in native looking) iPhone/iPad support, though we are trying to fix any bugs that may stop our RadControls from working properly. We can't just replace RadComboBox with a normal select either since that will mean loosing more than half of its functionality. Please let us know if you come across any other missing functionality in our RadControls on the iOS platform and we will try to fix it.

Regards,
Kamen Bundev
the Telerik team

[J.J. Kane]

I am also having 2  problems with the Ipad and the radcombobox.
  1.. The combo box is bringing up the Key Pad window on the ipad

  2.. When I have a list greater then the pulldown size the
       whole screen moves not just the contents of the combo box.

Has your fix addressed these issues as well or do you have any
suggestions.   Thanks
J.J. Kane

[Jake]

J.J.'s second problem is the most troublesome - long drop-down menus are rendered useless on the iPhone (and often the iPad) because you can't scroll through the list of items.

[J.J. Kane]

I have accidently learned that in the RadCombobox (and also a Scrolling Rad Panel)
that if you can touch 2 fingers down at the EXACT same time.  Then leave one finder on the Pulldown,
moving the other finger will Scroll the list for you.   

But I do Mean EXACTLY at the same time.

But I did have to use my pc to send this since this rich text editor control does not seem to work on the IPAD.

I also found a Bit of javascript code on another thread for the keyboard problem
but alas it did not work for me.  But I have not given up yet.

• function RadComboBox1_OnClientLoad(sender) { var input = sender.get_inputDomElement();

• input.readOnly = "readonly"; }

 

 

 Scrolling also seams to work on the radgrids

 

 

 

 

 

 

[Kamen Bundev]

Hello J.J. and Jake,

RadComboBox has input type text element in it, so when it is not readonly it would invoke the virtual keyboard on iPad/iPhone/Android's browsers. Due to a bug in Android < 2.2 (Froyo), VKB is shown regardless of the readonly state of the input. However if the input is readonly the VKB shouldn't be shown in any other case. The javascript handler J.J. posted should work if it is attached to every RadComboBox' OnClientLoad event.

We will investigate the drop down issue, we probably need to take iPad's viewport into account when activating autoscrolling. We are also developing a custom scroll extender which should help with the scrolling containers in iPad/iPhone since Mobile Safari there doesn't support them. I can't give any specific time frame for that though.

Greetings,
Kamen Bundev
the Telerik team

[Daryl Skeeters]

After reading your post, I have been having an issue with asp.net ajax radtreeview on the mobile safari platform.  It seems to display fine, but cannot expand or click any nodes in the tree.  Any ideas?  We are using Q3 2009 SP2.

Thanks,
Daryl

[Kamen Bundev]

Hi Daryl,

I just tested RadTreeView from Q3 2009 SP2 and it seems to work okay on an iPad. Can you enable your development console and see if there are any javascript errors reported? Better yet, can you send us a live URL in a support ticket so that we can reproduce the issue and help you fix it?

Kind regards,
Kamen Bundev
the Telerik team

[Scott]

Is there a fix for this yet. 

RadComboBox is not treated like a dropdown natively by the Safari browser (i.e. using the native picker); instead, it is displayed as it would be on a desktop browser.

Also the problem of not being able to scroll through comboboxes with lare amounts of data

[Helen]

Hi Scott,

What is the exact version of the Telerik.Web.UI that you use?
We just tested the scrolling behavior with the latest version and it works fine.
Do you reproduce the scrolling problem at our online examples?

Otherwise do you see the virtual keyboard at this example:
http://demos.telerik.com/aspnet-ajax/combobox/examples/populatingwithdata/autocompletesql/defaultcs.aspx?

Regards,
Helen
the Telerik team

[Brian]

We have just deployed an application to our web server on the Internet. We are designing an application for use on iOS and Android 2.2+ browsers. Please feel free to view our online example. We have discovered the following:

On Android and iPad:

1. The tree nodes of our RadTreeView are not clickable 
2. The empty text in a RadTextBox doesn't disappear automatically when the user starts to type. This causes the user to start typing after the empty text. On the desktop this works as expected. (Example is the "Search" textbox in our online example)
3. The background color of the Forest skin is white, but is green when viewed on desktop.
4. The border is not showing in the RadMultiPage under the RadTabs, but does show when viewed on desktop.
5. On the QuickLinks page and the View Location Type page, there are several Telerik JavaScript errors when run in iPhone mode on Desktop Safari. When ran in normal desktop mode of Safari there are no JavaScript errors.

Access to the online demo:

1. Go to rm.CompanyAutomation.com
2. Use the default user name and password already populated and login.
3. Click the "View Location Types"

Environment:

• Telerik ASP.NET Version: 2011.1.519.40
• .NET Version: C# 4.0 traditional ASP.NET (non-MVC)
• iPad v1, iOS v4.3.2 (8H7)
• Droid X, Android v2.2.1, Hardware v2.3.340.MB810.Verizon.en.US, Motorola
• Desktop, Toshiba Windows7, Safari 5.0.3

JavaScript Error Messages while on Desktop using Safari in Mobile Safari 4.1 iPhone User Agent:

• :2001/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d4.1.50401.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a5da0a7c3-4bf6-4d4c-b5d5-f0137ca3a302%3aea597d4b%3ab25378d2:3
• SyntaxError:Parse error
• LocationType.aspx:88Error: ASP.NET Ajax client-side framework failed to load.
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Common/Core.js:2ReferenceError: Can't find variable: Type
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/FormDecorator/RadFormDecorator.js:11ReferenceError: Can't find variable: Type
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Common/Popup/PopupScripts.js:1ReferenceError: Can't find variable: Type
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Common/jQuery.js:19ReferenceError: Can't find variable: $telerik
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Common/jQueryPlugins.js:1ReferenceError: Can't find variable: $telerik
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Button/RadButton.js:1ReferenceError: Can't find variable: Type
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Input/TextBox/RadInputScript.js:1ReferenceError: Can't find variable: Type
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/Common/Navigation/NavigationScripts.js:1ReferenceError: Can't find variable: Type
• aspnet-scripts.telerikstatic.com/ajaxz/2011.1.519/TreeView/RadTreeViewScripts.js:1ReferenceError: Can't find variable: Type
• LocationType.aspx:108ReferenceError: Can't find variable: Sys
• LocationType.aspx:206ReferenceError: Can't find variable: Telerik

Resolution:
We can live with items # 2, 3, and 4. Item # 1 is a show stopper for us. Any ideas on why this is happening?

[Helen]

Hello Brian,

Since we couldn't log to your website, we tested the behaviour at our demos.
Do you experience the issue #1 at our online examples?

Regards,
Helen
the Telerik team

[Brian]

Hi Helen,

Sorry, guess the credentials were cached on my browser. Here are the credentials:

domain/ Username: CA/Scott
Password: 1234

We tested the online example for TreeView and the click event does work; however, this doesn't mean much as it is not a complex example of using multiple Telerik controls inside a User Control like ours does. BTW, the drag and drop didn't work on the Telerik online example, but we expected that. 

Thank you so much :)  We are very stuck until we can get this resolved.

[Brian]

Did you guys get a chance to review our site yet?

[Ivan Zhekov]

Hi Brian,

We reviewed the site and had the same issues.

When we looked into it, to find out why is it happening it turns out that some of the scripts could not be loaded due to a redirect based on the user agent string sent from the browser to the server.

We tried locally to reproduce this, but we were unable to get that redirect. We also noticed that you are using the scripts in CDN mode.

So it's possible that it's something in your server configuration or the CDN settings, or somewhere in between.

Could you open a support ticket with the essence of the problem explained and attach a small project with the problem (just that error page, together with styles, scripts etc should enough) so we could test locally with your settings and find the cause for the problem.

(Opening the support ticket will give you the ability to attach files)

All the best,
Ivan Zhekov
the Telerik team

[Brian]

I think I found the source of the issue, but not sure how to fix. 

We are using mobile device detection and redirection from here http://51degrees.codeplex.com/ 

We have 3 exactly identical web pages, one in a "Desktop" subdirectory, another in "Tablet", and another in "Mobile". When a user logs in, they are automatically redirected to the correct directory by the software from 51degrees. We have not made any changes to CDN on the IIS server's default installation. 

If we turn this redirect off and re-publish, the iPad loads the desktop version without any errors. If we turn the redirect back on, the errors appear again. 

The goal was to have 3 separate versions of the pages, so we could branch their code as needed for there platform. For example, for mobile, we make all the buttons bigger. 

So, it appears to be a conflict being caused by the 51Degree software. I am not sure how to go about fixing it though. I will try to put a ticket in later today.

Thanks again.

p.s. Wouldn't it be awesome if Telerik had this auto-redirect in the ASP.NET AJAX controls? It would help to set CSS and control features by device type. 

[Ivan Zhekov]

Hi Brian,

Indeed such a feature would come in handy, but as it turned out, a feature based on User Agent string does not always prove working correctly.

As for styling, there are the so called "media queries" that allow for differently capable browsers to load different styles, which in terms is the so called "responsive design".

Here is an article that explains a bit more on media queries. It might be useful.

Regards,
Ivan Zhekov
the Telerik team

[James]

Hello Brian,

I've just picked up on this post. I work at 51Degrees. FYI - You can post any 51Degrees.mobi related queries on our 51Degrees.mobi forums.

We've tried hard to recreate this problem with version 1.2.0.5 of 51Degrees.mobi and aren't able to do so. Do you have any sample code you could publish?

We've used Telerik's example code in our tests which is shown below.

<telerik:RadComboBox ID="RadComboBox_AvatarSelection" runat="server" Width="220px"
            HighlightTemplatedItems="True">
            <Items>
                <telerik:RadComboBoxItem ImageClassName="qsfexGeeky" Popularity="358" Artist="Jone Larragne"
                    Text="Geeky"></telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem ImageClassName="qsfexGirly" Popularity="1,005" Artist="Jone Larragne"
                    Text="Girly"></telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem ImageClassName="qsfexGrumpy" Popularity="1,345" Artist="Jone Larragne"
                    Text="Grumpy"></telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem ImageClassName="qsfexGroovie" Popularity="2,043" Artist="Jone Larragne"
                    Text="Groovie"></telerik:RadComboBoxItem>
            </Items>
        </telerik:RadComboBox>

We did have a similar problem in beta versions of 51Degrees.mobi and Telerik controls but this was solved before version 1.0 at the beginning of 2011.

Regarding you P.S. point about server side redirection. You're quite right. If you'd like to discuss more please use our Contact 51Degrees.mobi page.

Thanks,

James

[Sasp]

Hi,

I want to make rad combobox as iOS selector UI in iPhone devices. I have set the RenderMode = "Auto", but still it is not working. Any suggestion??

[Rumen]

Hi Sasp

Can you please set the RenderMode of RadCombobox to Native and test again on iOS?

This render mode renders the combo as a simple native html select.

Regards,
Rumen
Progress Telerik