New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Inline Editing

    Responsive Web Design

    With Telerik UI for ASP.NET AJAX you can build applications that deliver tailored user experiences for any screen. Mobile and Responsive web application, optimized for mobile, is your go-to resource for learning and testing the mobile capabilities within the UI controls and frameworks offered in the suite.

    Percentage of People Accessing the Web From Mobile Devices

    Percentage of People Accessing the Web From Mobile Devices Stats belong to eMarketer (January 2014)

    So what exactly constitutes a responsive web design?

    The original illustration belongs to Stéphanie Walter

    The concept of responsive web design (RWD) suggests that the layout of the project needs to adapt to the media that renders it. The content of the application needs to be like water and make efficient use of the available space on the screen. Additionally, the content should be easily readable with appropriate font and image sizes.

    This example shows how to use RadEditor to edit parts of the page inline, allowing authors to see the content in its final state. The predefined configuration of the control is forced by simply setting the EditType property value to "Inline". This includes changing the default value of the ContentAreaMode property to "Div" and setting the AutoResizeHeight value to true.

    You can find additional information about the editor's inline editing mode in the RadEditor - Inline editing help article.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.InlineEditing.DefaultCS"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    <link href="../Common/styles.css" rel="stylesheet" type="text/css" />
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-containers">
        <div class="demo-container">
            <div class="inlineContent">
                <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" EditType="Inline" >
                    <Content>
                    <h2>Responsive Web Design</h2>
                    With <a href="http://www.telerik.com/products/aspnet-ajax.aspx">Telerik UI for ASP.NET AJAX</a> you can build applications that deliver tailored user experiences for any screen.
                    <a href="http://demos.telerik.com/responsive-web-design-aspnet/default.aspx">Mobile and Responsive</a> web application, optimized for
                    mobile, is your go-to resource for learning and testing the mobile
                    capabilities within the UI controls and frameworks offered in the suite.<br/><br/>
                    <h3>Percentage of People Accessing the Web From Mobile Devices</h3>
                    <img alt="Percentage of People Accessing the Web From Mobile Devices" src="images/device-percentage.png" style="max-width: 100%;" />
                    <em>Stats belong to <a href="http://www.emarketer.com/Article/Middle-East-Africa-Nearly-All-Web-Users-Mobile/1010507/2">eMarketer</a> (January 2014) </em>
                    </Content>
                </telerik:RadEditor>
            </div>
            <div class="inlineContent">
                <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor2" EditType="Inline" >
                    <Content>
                    <h2>So what exactly constitutes a responsive web design?</h2>
                    <div>
                        <img src="images/content-water.png" style="margin-bottom: 5px;" width="420" />
                    </div>
                    <em>
                        The original illustration belongs to <a href="http://www.inpixelitrust.fr/">St&eacute;phanie Walter</a>
                    </em>
                    <p>The concept of responsive web design
                    (<b>RWD</b>) suggests that the layout of the project needs to adapt to the
                    media that renders it. The content of the application needs to be like
                    water and make efficient use of the available space on the screen.
                    Additionally, the content should be easily readable with appropriate
                    font and image sizes.</p>
                    </Content>
                </telerik:RadEditor>
            </div>
        </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance