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

Inline Editing

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" Theme="Default" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.InlineEditing.DefaultVB"  %>

<%@ 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