Enabling Track Changes Styles in Preview/Non-Edit Mode

[Murray]

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?

[Murray]

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.  :) 

[Ianko]

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 */
        .reFormat.reU10,
        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;
    }
</style>

<asp:Button Text="Toggle Edit Mode" ID="ToggleEditMode" runat="server" OnClick="ToggleEditMode_Click" />

<br />
Content:
 <br />
<br />

<telerik:RadEditor runat="server" ID="RadEditor1" EnableTrackChanges="true">
    <TrackChangesSettings Author="AuthorName" UserCssId="reU10" CanAcceptTrackChanges="true" />
    <Content>
            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>.
    </Content>
</telerik:RadEditor>

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.

Regards,
Ianko
Telerik