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

Save in Database

If you encounter problems, make sure the ASPNET system process has "write" privileges for the directory. How?
 
  • 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
DeleteEditDateText
4DeleteEdit2/26/2010 5:53:54 PMRadEditor
Unmatched Loading Speed and Performance

The Telerik Editor control for ASP.NET AJAX puts an end to the “functionality vs speed” trade-off. The unique “load as needed” processes will only load the code on client browsers for the features that are being used. This minimalist script size results in tremendously swifter page loading. In addition, the editor’s CSS Sprites-based semantic rendering leads to even more optimized loading speed and customization through simple CSS.
5DeleteEdit2/26/2010 5:54:06 PMRadEditor
Microsoft Word-like Spell-checking

RadEditor for ASP.NET AJAX comes with a full-featured multilingual spell-checker (technically, a separate component called RadSpell). You can choose between a dialog-mode and an inline AJAX spell-checker. You can check your spelling asynchronously and all your mistaken words will be highlighted inline.
See demo
6DeleteEdit2/26/2010 5:54:30 PMRadEditor
Modules and Add-ons

RadEditor for ASP.NET AJAX comes with four System Modules. You can even create your own modules and plug them in the editor:

  • Tag Inspector - displays the tag hierarchy of the current selection and allows you to add/remove/modify a tag.
  • Properties Inspector - gives you quick access to most of the properties of the current tag, eliminating the need to open dialogs.
  • Real-time HTML View - similar to the Split mode of Microsoft Office FrontPage - if you make a change in either the WYSIWYG or the HTML window, the other one will be automatically updated. Great fine-tuning tool for advanced users.
  • Statistics module - provides word/character count or other content analysis.
See demo

The main way to save the RadEditor's content in a database is to add your own asp button with database-saving code attached in the button click event handler.The above example does this using an asp datagrid to view the updated content of the database as well as Edit and Delete the content. The Content property is used to get and set the editor content.

Please, note that the page is not XHTML compliant due to that the <a> tags loaded in RadEditor contain target="_blank" attributes. There isn't a target attribute in XHTML specification.

Note: If you encounter problems with the demo, make sure the ASP.NET system process has "write" privileges for the directory:

Here's how:

  • Right-click on the web application folder, and select Properties.
  • Select the "Security" tab.
  • Click "Add..." to add a user.
  • On the new dialog click "Advanced...".
  • On the new dialog click "Find now...".
  • Select ASP.NET user from the list of available users.
  • When you go back to the "Security" tab select the ASPNET user and give it full permissions.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.SaveInDatabase.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" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        If you encounter problems, make sure the
            ASPNET system process has "write" privileges for the directory. <a href="#data-base-issues">How?</a>
    </qsf:MessageBox>

    <div class="demo-container size-custom">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <input type="hidden" name="EditedNews" runat="server" id="EditedNews" />
  
            <asp:RequiredFieldValidator runat="server" ID="NewsTextValidator" 
                ControlToValidate="NewsEditor" Display="Static" ForeColor="Red" BackColor="Wheat">
                Please, fill in text to submit!
            </asp:RequiredFieldValidator>

            <telerik:RadEditor RenderMode="Lightweight" ID="NewsEditor" runat="server" Width="1000px" Height="450px" SkinID="DefaultSetOfTools">
                <Modules>
                    <telerik:EditorModule Name="RadEditorStatistics" Visible="false" Enabled="true"></telerik:EditorModule>
                    <telerik:EditorModule Name="RadEditorDomInspector" Visible="false" Enabled="true"></telerik:EditorModule>
                    <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" Enabled="true"></telerik:EditorModule>
                    <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="false" Enabled="true"></telerik:EditorModule>
                </Modules>
            </telerik:RadEditor>

            

            <telerik:RadButton RenderMode="Lightweight" ID="btnSubmit" runat="server" Text="Submit to Database" OnClick="btnSubmit_Click" CssClass="submit-button"></telerik:RadButton>

            <telerik:RadGrid RenderMode="Lightweight" CssClass="borderedGrid" ID="NewsGrid" Width="1000px" runat="server" ShowHeader="True"
                BorderWidth="1" CellPadding="3" AutoGenerateColumns="false" OnItemCommand="NewsGrid_ItemCommand"
                DataSourceID="SqlDataSource1" AllowAutomaticDeletes="true" AllowAutomaticInserts="true"
                AllowAutomaticUpdates="true">
                <HeaderStyle CssClass="newsTextCentered gridHeader" Font-Names="Verdana" ForeColor="Black"
                    BackColor="#d3e5fa"></HeaderStyle>
                <MasterTableView EditMode="InPlace" DataKeyNames="NewsID">
                    <Columns>
                        <telerik:GridBoundColumn DataField="NewsID" UniqueName="NewsID" Display="false" ReadOnly="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn ButtonType="LinkButton" ItemStyle-CssClass="newsTextCentered"
                            CommandName="Delete" ItemStyle-Width="50px" HeaderText="Delete" Text="Delete">
                        </telerik:GridButtonColumn>
                        <telerik:GridButtonColumn ButtonType="LinkButton" ItemStyle-CssClass="newsTextCentered"
                            CommandName="Edit" ItemStyle-Width="50px" HeaderText="Edit" Text="Edit">
                        </telerik:GridButtonColumn>
                        <telerik:GridBoundColumn ItemStyle-CssClass="NewsText" ItemStyle-Width="70px" DataField="NewsDate"
                            HeaderText="Date" ReadOnly="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="NewsText" UniqueName="NewsText" ItemStyle-CssClass="text"
                            HeaderText="Text" ReadOnly="true">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                DeleteCommand="DELETE FROM [News] WHERE [NewsID] = @NewsID" InsertCommand="INSERT INTO [News] ([NewsText], [NewsDate]) VALUES (@NewsText, GETDATE())"
                SelectCommand="SELECT * FROM [News]" UpdateCommand="UPDATE [News] SET [NewsText] = @NewsText WHERE [NewsID] = @NewsID">
                <DeleteParameters>
                    <asp:Parameter Name="NewsID" Type="Int32"></asp:Parameter>
                </DeleteParameters>
            </asp:SqlDataSource>

        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance