Enabling Track Changes Styles in Preview/Non-Edit Mode

3 posts, 1 answers
  1. Murray
    Murray avatar
    2 posts
    Member since:
    Aug 2012

    Posted 27 Feb 2015 Link to this post

    We have a use case where a student submits an essay and an instructor annotates the student's content. We are using the track changes functionality in the Editor to display the annotations. When the editor is not in edit mode, the color indicators do not display. Is there a way to enable the styles that the instructor can see while editing the content?
  2. Murray
    Murray avatar
    2 posts
    Member since:
    Aug 2012

    Posted 02 Mar 2015 Link to this post

    Just to be clear, the students do not see the colored styles because the control is not in edit mode. We want to enable those styles in read-only mode.  :) 
  3. DevCraft R3 2016 release webinar banner
  4. Answer
    Ianko avatar
    1507 posts

    Posted 04 Mar 2015 Link to this post

    Hello Murray,

    The decoration of the tracked changes applied (by the instructor) are visible only when in edit mode. This is because the CSS file applying the decoration is added to the content area only when editor is enabled. When disabled, this CSS file is not loaded.

    The easiest way to achieve the desired functionality is to apply a custom decoration for the changes (more details are available in this help article). By that, the styles will exist in both modes. The following code example showcases this scenario and also, shows that when the RadEditor is disabled, decoration still applies the changes made:
    <style type="text/css">
        ins.reU10, del.reU10 {
            color: #00FFCC !important;
            /* user border colors */
            ins.reU10 table,
            del.reU10 table,
            ins.reU10 td,
            ins.reU10 img,
            del.reU10 td,
            del.reU10 img,
            .reComment.reU10 {
                border-color: #00FFCC;
        .reFormat {
            border-style: solid;
            border-width: 0 2px;
            padding: 0 2px;
    <asp:Button Text="Toggle Edit Mode" ID="ToggleEditMode" runat="server" OnClick="ToggleEditMode_Click" />
    <br />
     <br />
    <br />
    <telerik:RadEditor runat="server" ID="RadEditor1" EnableTrackChanges="true">
        <TrackChangesSettings Author="AuthorName" UserCssId="reU10" CanAcceptTrackChanges="true" />
                Text <strong class="reFormat reU10" title="Formatted by AuthorName on 3/4/2015, 1:47:35 PM" timestamp="1425469655519" command="Bold"
                    author="AuthorName">from</strong> <del class="reU10" title="Deleted by AuthorName on 3/4/2015, 1:43:31 PM" timestamp="1425469411619"
                    command="Delete" author="AuthorName">student</del>
                <ins class="reU10" title="Inserted by AuthorName on 3/4/2015, 1:43:31 PM" timestamp="1425469411629" command="Insert" author="AuthorName">instructor</ins>.

    Note that if there are CSS files added to the CssFiles collection, this technique will not work. You will have to add the same rules in one of the CSS files added to the collection.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top