iPhone and iPad Issues

[Mark Harold]

If you click on a dropdown in the iphone or ipad you get the keyboard popup, even though it is only a dropdown. There is no way to turn that off.

[Kalina]

Hello Mark Harold,

To prevent keyboard popup from appearing you need to make the RadComboBox "read-only”.

In case of RadComboBox without Load-On-Demand enabled the approach is to set the AllowCustomText property to "false"

If you use Load-On-Demand feature - handle client-side OnClientLoad event and set the "readOnly" property of the input:

function RadComboBox1_OnClientLoad(sender) {
   var input = sender.get_inputDomElement();
   input.readOnly = "readonly";
}

Regards,
Kalina
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Martin Roussel]

Hi, I have the inversed problem, but chose to post in here since its still a related iOS keyboard issue with the RadComboBox.

The problem in my case is I have multiple related RadCombobox in the sense that when we make a selection in the first box, the next one dropsdown by itself to reduce the user's clicking. The next box also has it's text highlighted, so the user can overwrite it if filtering is used. On all Windows browsers we tried, it works like wanted. On a iPad (iOS5) however, when selecting in the first combobox, the next box dropsdown but the keyboard is now hidden (and second control's textbox seems to have lost focus...which might explain the keyboard lost). What I would like is to keep the keyboard visible so user can use filters (and keyboard "Go" button) for navigation, if controls in screen are too small to easily tap them.

My code (let me know if you need more):

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">


                                <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="WebBlue" MarkFirstMatch="true"  AllowCustomText="true" Filter="StartsWith" CssClass="combo1" NoWrap="True" OnItemDataBound="RadComboBox1_ItemDataBound" AutoPostBack="True" OnSelectedIndexChanged="RadComboBox1_OnSelectedIndexChanged" OnClientKeyPressing="RadComboBox_OnClientKeyPressing" OnClientDropDownOpened="ShowEmptyMessage" OnClientDropDownClosed="HideEmptyMessage" OnClientLoad="RadComboBox1_OnClientLoad">
                                </telerik:RadComboBox>



                                <telerik:RadComboBox ID="RadComboBox2" runat="server" Skin="WebBlue" MarkFirstMatch="true" AllowCustomText="true" Filter="StartsWith" CssClass="combo2" NoWrap="True" OnItemDataBound="RadComboBox2_ItemDataBound" AutoPostBack="True" OnSelectedIndexChanged="RadComboBox2_OnSelectedIndexChanged" OnClientKeyPressing="RadComboBox_OnClientKeyPressing" OnClientDropDownOpened="ShowEmptyMessage" OnClientDropDownClosed="HideEmptyMessage">
                                </telerik:RadComboBox>

</telerik:RadAjaxPanel>

var gblFirstDrop = 1;
var gblCollapsed = 0;

        function RadComboBox1_OnClientLoad() {

            var i = 0;
            var combo;

            if (gblFirstDrop == 1) {
                gblFirstDrop = 0;
                return
            }

            combo = $find("<%= RadComboBox1.ClientID %>")

            i = toggleDrop(combo);

            if (i == 0) {
                combo = $find("<%= RadComboBox2.ClientID %>")
                i = toggleDrop(combo);
            }
            else {
                return
            }
}

function toggleDrop(combo) {

    if (combo == null) {
        return 1
    }

    if (combo.get_items().get_count() > 1 && combo.get_selectedIndex() == null) {
        combo.set_text(combo.get_emptyMessage());
        combo.toggleDropDown();
        return 1
    }
    else {
        return 0
    }

}

function RadComboBox_OnClientKeyPressing(sender, eventArgs) {

    var item = null;
    var items = null;

    if (eventArgs.get_domEvent().keyCode == 13) {

        var items = sender.get_items();
        item = findItemByTextLowerCase(items, sender.get_text());

        if (item) {
            item.select();
        }
        else {

            if (sender.get_visibleItems().length == 1) {

                item = sender.findItemByText(sender.get_visibleItems()[0].get_text());

                 if (item) {
                    item.select();
                 }

            }

        }

    }
}

function findItemByTextLowerCase(items, theText) {

    if (items != null) {
        var itemsCount = items.get_count();

        for (var i = 0; i < itemsCount; i++) {
            var item = items.getItem(i);
            if (item.get_text().toLowerCase() == theText.toLowerCase()) {
                return item;
            }
        }
    }

    return null;
}

function ShowEmptyMessage(sender, eventArgs) {

    if (sender.get_text() == "") {
        sender.set_text(sender.get_emptyMessage());
    }

    HighlightText(sender, eventArgs);


}

function HighlightText(sender, eventArgs) {

    setTimeout(function () {
        var input = sender.get_inputDomElement();
        if (input != null) {
            input.focus();
        }
        sender.selectText(0, sender.get_text().length);
    }, 100);

}

function HideEmptyMessage(sender, eventArgs) {

    if (sender.get_selectedIndex() == null) {
        sender.clearSelection();
    }
}

protected void RadComboBox1_OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {

        SelectComboBoxItem(ref RadComboBox1);

        FilterNext(ref RadComboBox1, ref RadComboBox2, 1, blnAlreadySelected);


    }

TIA

Martin

[Kalina]

Hello Martin Roussel,

Thank you for the additional details.

In order to help you we will need to create a working test page on our side and reproduce the issue locally.
We have already started working on it but I am afraid this can slow down our reply.
Can you open a support ticket and provide us a runnable page that we can use to reproduce the issue?
This will help us investigate the issue and provide a solution faster.

All the best,
Kalina
the Telerik team

[Martin Roussel]

Kalina, ticket was created: ticket.

I also tested the issue on multiple devices (and operating systems) and no one can pop the keyboard after selecting first item. Here is the list I tested:

iPad iOS 5.1.1 (native browser)
iPhone iOS 6.0.1 (native browser)
Android phone 2.3.4 (native and Opera Mobile 12.10 browsers)
Android tablet 4.0.3 (native, Opera Mobile 12.10 and Firefox 17.0 browsers)

TIA

Martin

[Kalina]

Hi Martin Roussel,


I am suggesting you continue our communication within the Support Ticket ID: 642090 where your question has been already answered.
Thank you in advance.

All the best,
Kalina
the Telerik team

[Tulika]

Hi,

 I have having issues with Radcombobx in IPad.It works perfectly in all other browsers and devices(including android,windows tabs,phones etc.).However in IPad when you try to open the control it doesn't do anything and it doesn't even bind data.I am using Version=2012.3.1308.35 of Telerik.Really appreciate your help.

[Dimitar]

Hi,

I would like to inform you that there is a general ASP.NET AJAX Extensions issue, concerning the new iOS 8 and OS X Safari 7.1 and 8 versions. It is affecting sites using ASP.NET 3.5. Basically, the new Safari version is not properly recognized by the AJAX framework as a browser that supports partial rendering, which breaks the AJAX technology.

In order to fix this issue, you need to edit your browser definition files so that the latest Safari is properly recognized. You can find more detailed information about the issue as well as a workaround for it in the following stackoverflow thread.

Regards,
Dimitar
Telerik