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

Track Changes

  • AcceptTrackChange
  • RejectTrackChange
  • AddComment
  • RemoveComment
  • 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
  • Configure User Settings
Author Name
Can Accept Track Changes
Css Class Name
reU0

Track Changes feature enables end-users to keep track of the changes made when editing the content in the RadEditor. You can enable this feature in the RadEditor by setting the EnableTrackChanges property to true and add the built-in tools to allow users to enabled/disable the Track Changes, accept and reject the changes.

In this demo you can examine:

  • How to enable the feature and configure the Track Changes tools via ToolsFile;
  • How changes in the content are tracked upon user interaction;
  • The dialog pop-up showing details about the selected tracked change;
  • All commands, which are supported by the Track Changes functionality;
  • What HTML code is generated by the Track Changes functionality and how attributes are used for the pop-up details;
  • How altering the user settings affect the stylization and the functionality of the changes in the content.

The User Settings configurator enables you to change the Author, UserCssId and CanAcceptTrackChanges properties and examine their functionality:

  • Author-the name with which the editor to be recognized
  • UserCssId-the class name that defines the color of the changes made in the content. There are ten ready-to-use, predefined classes ( reU0, reU1, reU2, reU3, reU4, reU5, reU6, reU7, reU8, reU9).
  • CanAcceptTrackChanges-a Boolean property that defines whether the user can accept and reject changes.

With the user settings you can simulate a real-live scenario with Multiuser Support. This allows you to examine how different users could edit one document and still be able to track the changes. Subsequently, based on the set CanAcceptTrackChanges, the configured user would be able to accept or reject changes, and finalize the document.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • EditorContentArea.css
    • EditorContentArea.css
    • styles.css
  • ToolsFile.xml
<%@ Page Theme="Default" Language="C#" 
    CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TrackChanges.DefaultCS" %>

<!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">
            <telerik:RadEditor RenderMode="Lightweight" ID="theEditor" EnableTrackChanges="true" runat="server" Width="750px"
                Height="400px" ToolsFile="ToolsFile.xml">
                <TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>
                <Content>
                    <p>
                        <span style="font-size: 11pt; background-color: #ffffff; font-family: Times New Roman;"><strong title="Formatted by RadEditorUser on 9/30/2014, 5:57:29 PM" timestamp="1412089049675" command="Bold" class="reFormat reU0" author="RadEditorUser">RadEditor</strong> is not simply an <strong title="Formatted by RadEditorUser on 9/30/2014, 5:57:34 PM" timestamp="1412089054118" command="Bold" class="reFormat reU0" author="RadEditorUser">HTML</strong> <em title="Formatted by RadEditorUser on 9/30/2014, 5:57:36 PM" timestamp="1412089056325" command="Italic" class="reFormat reU0" author="RadEditorUser">Editor</em>. It is what Microsoft chose to use in <em title="Formatted by RadEditorUser on 9/30/2014, 5:57:43 PM" timestamp="1412089063852" command="Italic" class="reFormat reU0" author="RadEditorUser">MSDN, CodePlex,
                        <del title="Deleted by RadEditorUser on 9/30/2014, 5:57:47 PM" timestamp="1412089067178" command="Delete" class="reU0" author="RadEditorUser">                        TechNet</del>, MCMS</em> and even as an alternative to the default editor in SharePoint. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean XHTML output, fast rendering, widest cross-browser support, and tons of features.</span>
                    </p>
                        <p title="Formatted by RadEditorUser on 9/30/2014, 5:57:58 PM" timestamp="1412089078691" command="Indent" class="reFormat reU0" author="RadEditorUser" cssproperty="marginLeft" style="margin-left: 40px;">
                        <strong><em title="Formatted by RadEditorUser on 9/30/2014, 5:58:07 PM" timestamp="1412089087767" command="Italic" class="reFormat reU0" author="RadEditorUser">Single-file, drag-and-drop deployment</em></strong><span style="font-size: 11pt; background-color: #ffffff; font-family: Times New Roman;"> - RadEditor takes full advantage of .NET embedded resources, enabling you to deploy RadEditor with a single assembly file and jump-start your development process.</span>
                    </p>
                    <p title="Formatted by RadEditorUser on 9/30/2014, 5:58:17 PM" timestamp="1412089097709" command="Indent" class="reFormat reU0" author="RadEditorUser" cssproperty="marginLeft" style="margin-left: 80px;">
                        <strong><em title="Formatted by RadEditorUser on 9/30/2014, 5:58:23 PM" timestamp="1412089103985" command="Italic" class="reFormat reU0" author="RadEditorUser">Built on top of ASP.NET AJAX</em></strong><span style="font-size: 11pt; background-color: #ffffff; font-family: Times New Roman;"> - RadEditor is a native .Net
                        <del title="Deleted by RadEditorUser on 9/30/2014, 5:58:29 PM" timestamp="1412089109867" command="Delete" class="reU0" author="RadEditorUser">                        2.0</del> component, designed upon ASP.NET AJAX, utilizing its common client-side framework and programming model. This allows for previously impossible performance and architecture optimizations to offer a small-size, efficient and optimized component with industry-unique level of performance.</span>
                    </p>
                    <p style="padding-top: 10px; border-top: 1px solid #555555;">
                        <a id="HTMLDescription">
                            <sup title="Formatted by RadEditorUser on 9/30/2014, 5:58:35 PM" timestamp="1412089115955" command="Superscript" class="reFormat reU0" author="RadEditorUser">1</sup>.
                        </a>The computer language used to create world-wide-web pages which are read by browsers.
                    </p>
                </Content>
            </telerik:RadEditor>
        </div>
    </div>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="theEditor" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Configure User Settings">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Author Name">
                    <qsf:TextBox runat="server" ID="UserName" AutoPostBack="true" OnTextChanged="UserName_TextChanged"></qsf:TextBox>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Can Accept Track Changes">
                    <qsf:RadioButtonList runat="server" ID="AcceptTrackChanges" Width="160px" 
                        Orientation="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="AcceptTrackChanges_SelectedIndexChanged">
                        <Items>
                            <asp:ListItem Text="True" Value="True" />
                            <asp:ListItem Text="False" Value="False" />
                        </Items>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Css Class Name">
                    <qsf:DropDownList runat="server" ID="CssClassName" Width="160px" AutoPostBack="true" OnItemSelected="CssClassName_ItemSelected">
                        <Items>
                            <telerik:DropDownListItem Text="reU0" Value="reU0" />
                            <telerik:DropDownListItem Text="reU1" Value="reU1" />
                            <telerik:DropDownListItem Text="reU2" Value="reU2" />
                            <telerik:DropDownListItem Text="reU3" Value="reU3" />
                            <telerik:DropDownListItem Text="reU4" Value="reU4" />
                            <telerik:DropDownListItem Text="reU5" Value="reU5" />
                            <telerik:DropDownListItem Text="reU6" Value="reU6" />
                            <telerik:DropDownListItem Text="reU7" Value="reU7" />
                            <telerik:DropDownListItem Text="reU8" Value="reU8" />
                            <telerik:DropDownListItem Text="reU9" Value="reU9" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance