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

Server-side API

  • 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
  • Demo Configurator
Add Empty Toolbar
Remove Last Toolbar
Tool List
Toolgroup Index
Add New Tool
Add New Color
Paragraph Items
Add Paragraph

In this demo you can examine how using the server-side API of the RadEditor control you can modify the tools in the toolbar and manage the built-in collections.


  1. Add Empty Toolbar - adds an additional empty toolbar/toolgroup.
  2. Remove Last Toolbar - removes the last toolbar/toolgroup of the editor.


  1. Tool List - you can select a built-in tool from this dropdown.
  2. Toolgroup Index - selects the toolgruop in which the selected tool to be added.
  3. Add New Tool - adds the selected tool in the selected toolgroup.

Color Collection

  1. Color - dropdown with predefined list of colors' HEX codes.
  2. Add New Color - adds the new color to the Color Collection. You can examine the new colors via the ForeColor or BackColor tools.

Format Block Tool

  1. Paragraph Items - list of predefined Paragraph items.
  2. Add Paragraph - adds the selected paragraph item to the Format Block tool's dropdown.

Server-Side API

RadEditor's server-side API provides intuitive collections and methods for managing the various sets of colors, fonts, paragraphs, symbols, links, and toolbars:

  • RadEditor.FontNames - collection of the available fonts
  • RadEditor.FontSizes - collection of the available font sizes
  • RadEditor.Colors - collection of the available colors
  • RadEditor.Symbols - collection of the available symbols
  • RadEditor.Paragraphs - collection of the available block formatting paragraphs
  • RadEditor.Snippets - collection of the available HTML snippets
  • RadEditor.CssClasses - collection of the available CSS classes
  • RadEditor.Tools - collection of the available toolbars
  • RadEditor.Modules - collection of the available system modules
  • RadEditor.Links - collection of the available custom links

You can find a full list of the available methods, properties and collections in the RadEditor Server-side API article.

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" Width="800px" Height="270px">
                <telerik:EditorToolGroup Tag="MainToolbar">
                    <telerik:EditorTool Name="AjaxSpellCheck" />
                    <telerik:EditorTool Name="FindAndReplace" />
                    <telerik:EditorSeparator Visible="true" />
                    <telerik:EditorTool Name="Undo" />
                    <telerik:EditorTool Name="Redo" />
                    <telerik:EditorSeparator Visible="true" />
                    <telerik:EditorTool Name="Cut" />
                    <telerik:EditorTool Name="Copy" />
                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+!" />
                <telerik:EditorToolGroup Tag="Formatting">
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                    <telerik:EditorSeparator Visible="true" />
                    <telerik:EditorTool Name="ForeColor" />
                    <telerik:EditorTool Name="BackColor" />
                    <telerik:EditorSeparator Visible="true" />
                    <telerik:EditorTool Name="FontName" />
                    <telerik:EditorTool Name="RealFontSize" />
                    <telerik:EditorTool Name="FormatBlock" />
                    <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
                        <li><em>Single-file, drag-and-drop deployment</em></li>
                        <li><em>Built on top of ASP.NET AJAX</em></li>
                        <li><em>Unmatched loading speed with new semantic rendering </em></li>
                        <li><em>Full keyboard accessibility</em></li>
                        <li><em>Flexible Skinning mechanism</em></li>
                        <li><em>Simplified and intuitive toolbar configuration</em></li>
                        <li><em>Out-of-the-box XHTML-enabled output</em></li>

    <telerik:RadAjaxManager runat="server" ID="AjaxManager1">
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="LoadingPanel1" />

    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
            <qsf:View runat="server" Title="Toolbar">
                <qsf:ConfiguratorColumn runat="server" Title="Add Empty Toolbar" Size="Narrow">
                    <qsf:Button ID="btnAddNewToolBar" runat="server" Text="Add" OnClick="btnAddNewToolBar_Click"
                        UseSubmitBehavior="false" Size="Medium">
                <qsf:ConfiguratorColumn runat="server" Title="Remove Last Toolbar" Size="Narrow">
                    <qsf:Button ID="btnRemoveLastTool" runat="server" Text="Remove" OnClick="btnRemoveLastTool_Click"
                        UseSubmitBehavior="false" Size="Medium">
            <qsf:View runat="server" Title="Tools">
                <qsf:ConfiguratorColumn runat="server" Title="Tool List" Size="Narrow">
                    <qsf:DropDownList ID="ddTools" runat="server" Size="Wide" DropDownHeight="300px">
                <qsf:ConfiguratorColumn runat="server" Title="Toolgroup Index" Size="Narrow">
                    <qsf:DropDownList ID="ddToolBars" runat="server" Size="Medium">
                <qsf:ConfiguratorColumn runat="server" Title="Add New Tool" Size="Narrow">
                    <qsf:Button ID="btnAddNewTool" runat="server" Text="Add" OnClick="btnAddNewTool_Click"
                        UseSubmitBehavior="false" Size="Medium">
            <qsf:View runat="server" Title="Color Collection">
                <qsf:ConfiguratorColumn runat="server" Title="Color" Size="Narrow">
                    <qsf:DropDownList ID="ddColors1" runat="server" Size="Medium">
                            <telerik:DropDownListItem Text="#000000" Value="#000000"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="#0066EE" Value="#0066EE"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="#FFFFFF" Value="#FFFFFF"></telerik:DropDownListItem>
                <qsf:ConfiguratorColumn runat="server" Title="Add New Color" Size="Narrow">
                    <qsf:Button ID="btnAddNewColor" runat="server" Text="Add" OnClick="btnAddNewColor_Click"
                        UseSubmitBehavior="false" Size="Medium">
            <qsf:View runat="server" Title="Format Block Tool">
                <qsf:ConfiguratorColumn runat="server" Title="Paragraph Items" Size="Narrow">
                    <qsf:DropDownList ID="ddParagraphs" runat="server" Size="Medium">
                            <telerik:DropDownListItem Text="H1" Value="H1"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="H2" Value="H2"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="H3" Value="H3"></telerik:DropDownListItem>
                            <telerik:DropDownListItem Text="H4" Value="H4"></telerik:DropDownListItem>
                <qsf:ConfiguratorColumn runat="server" Title="Add Paragraph" Size="Narrow">
                    <qsf:Button ID="btnParagraphs" runat="server" Text="Add" OnClick="btnParagraphs_Click"
                        UseSubmitBehavior="false" Size="Medium"></qsf:Button>

Support & Learning Resources

Find Assistance