Support for iPhone / iPad browser

Article Info

Rating: 4

Article information

Article relates to

 RadEditor for ASP.NET AJAX
 Telerik.Web.UI.dll

Created by

 Rumen Zhekov


HOW-TO
Provide support for iPhone / iPad browser.

DESCRIPTION
Safari for iPhone / iPad still does not offer a Rich Text Editing engine that the web WYSIWYG editors use to provide the ability to edit and format rich text content. The code solution below demonstrates how to replace the editor with a standard TextBox control when the page is browsed from an iPhone.

SOLUTION
Put RadEditor and a textbox on the page (the textbox should be hidden by default):

<asp:TextBox ID="textarea" TextMode="MultiLine" Rows="20" Columns="60" runat="server" Visible="false"></asp:TextBox> 
<telerik:RadEditor ID="editor" runat="server"></telerik:RadEditor> 
 

Here is a sample page that sets and gets the content in the editor or textbox depending on what the browser is (iPhone or other):

public string EditorContent 
    get 
    { 
        if (isiPhone()) 
        { 
            return textarea.Text; 
        } 
        else 
        { 
            return editor.Content; 
        } 
    } 
    set 
    { 
        if (isiPhone()) 
        { 
            textarea.Text = value; 
        } 
        else 
        { 
            editor.Content = value; 
        } 
    } 
private bool isiPhone() 
    string userAgent = Request.Headers["User-Agent"]; 
    if (!string.IsNullOrEmpty(userAgent)) 
    { 
        return userAgent.ToLowerInvariant().Contains("iphone"); 
    } 
    else 
    { 
        return false
    } 
private void SetControlsVisibility() 
    textarea.Visible = isiPhone(); 
    editor.Visible = !isiPhone(); 
    protected void Page_Load(object sender, EventArgs e) 
    if (!IsPostBack) 
    { 
        SetControlsVisibility(); 
        //set initial content 
        EditorContent = "initial content"
    } 
    else 
    { 
        //postback - Update content in database 
        string content = EditorContent; 
        //...code that updates DB 
    } 

The above code checks whether an iPhone is used on the first request and hides/shows the appropriate control. It also abstracts the editor content in a separate property (EditorContent) so you can use it anywhere on the page and have only one check for the browser/device.


Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.