How to hide the trackchanges?

[Hongmin]

Is there any button to hide the trackchanges temporarily?  I want to review the clean content after edit. Those tracks make the content mess although I need it later. Just like MS word, a button can show or hide those tracks?  

Thanks.
CHM

[Ianko]

Hello,

There is no such tool, that could toggle the visibility of the track changes elements.

You can implement a custom tool that adds a style rule to show and hide element based on the DOM elements created by the track Changes feature.

The following custom tool shows how the required functionality could be implemented:

ASP.NET

<telerik:RadEditor ID="RadEditor1" runat="server" ContentFilters="DefaultFilters,PdfExportFilter" EnableTrackChanges="true">
     <TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0">
       </TrackChangesSettings>
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AcceptTrackChange"/>
            <telerik:EditorTool Name="RejectTrackChange"/>
            <telerik:EditorTool Name="AcceptAllTrackChanges"/>
            <telerik:EditorTool Name="RejectAllTrackChanges"/>
            <telerik:EditorTool Name="EnableTrackChangesOverride"/>
            <%-- Custom tool to show and hide the tracking --%>
            <telerik:EditorSplitButton Name="HideShowTracking" Text="Hide/Show Tracking" ShowText="true" ShowIcon="false">
                <telerik:EditorDropDownItem Name="Hide" Value="Hide"/>
                <telerik:EditorDropDownItem Name="Show" Value="Show"/>
            </telerik:EditorSplitButton>
            <%-- End --%>
        </telerik:EditorToolGroup>
    </Tools>
    <CssFiles>
        <telerik:EditorCssFile Value="Styles/Styles.css" />
    </CssFiles>
</telerik:RadEditor>

 <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["HideShowTracking"] = function (commandName, editor, args) {
        var $ = $telerik.$,
            contentArea = $(editor.get_contentArea()),
            trackedElements = contentArea.find("del.reFormat, ins.reFormat"),
            userCssId = editor.get_userCssId();

        if (args.get_value() === "Hide") {
            trackedElements.addClass("hideTrackChanges");
            trackedElements.removeClass(userCssId)
        } else {
            trackedElements.removeClass("hideTrackChanges");
            trackedElements.addClass(userCssId);
        }
    };
</script>

Styles.css

ins.hideTrackChanges.reFormat {
     border:none;
     padding:0;
}

del.hideTrackChanges {
    display:none;
}

Regards,
Ianko
Telerik

 

 

[Hongmin]

Got it!. That is very useful.

Thanks a lot!

CHM

[Suvarna]

Has anything changed with the latest version of Telerik ? I have 2020 Q2. This is not working for me. Custom button is added as expected however nothing happens after clicking the "Hide" or "Show" options. I also noticed that adding styles file just changes editor's default style and fonts. 

I was wondering if the syntax has any changes for recent version.

[Rumen]

Hi Suvarna,

For version 2020 Q2 the custom command JS code should be updated a bit like shown in the highlighted section below:

        <telerik:RadEditor OnClientLoad="OnClientLoad" ID="RadEditor1" runat="server" ContentFilters="DefaultFilters,PdfExportFilter" EnableTrackChanges="true">
            <TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="AcceptTrackChange" />
                    <telerik:EditorTool Name="RejectTrackChange" />
                    <telerik:EditorTool Name="AcceptAllTrackChanges" />
                    <telerik:EditorTool Name="RejectAllTrackChanges" />
                    <telerik:EditorTool Name="EnableTrackChangesOverride" />
                    <%-- Custom tool to show and hide the tracking --%>
                    <telerik:EditorSplitButton Name="HideShowTracking" Text="Hide/Show Tracking" ShowText="true" ShowIcon="false">
                        <telerik:EditorDropDownItem Name="Hide" Value="Hide" />
                        <telerik:EditorDropDownItem Name="Show" Value="Show" />
                    </telerik:EditorSplitButton>
                    <%-- End --%>
                </telerik:EditorToolGroup>
            </Tools>
            <CssFiles>
                <telerik:EditorCssFile Value="~/Styles.css" />
            </CssFiles>
        </telerik:RadEditor>

        <script type="text/javascript">
            function OnClientLoad(editor) {
                Telerik.Web.UI.Editor.CommandList["HideShowTracking"] = function (commandName, editor, args) {
                    var $ = $telerik.$;
                    var contentArea = $(editor.get_contentArea());
                    var trackedElements = contentArea.find(".reFormat, del, ins");
                    var userCssId = editor.get_userCssId();


                    if (args.get_value() === "Hide") {
                        trackedElements.addClass("hideTrackChanges");
                        trackedElements.removeClass(userCssId)
                    } else {
                        trackedElements.removeClass("hideTrackChanges");
                        trackedElements.addClass(userCssId);
                    }
                };
            }
        </script>

I also wrapped the command inside the OnClientLoad function attached to the OnClientLoad event of the control. This will work for scenarios when RadEditor is created on the server too and will ensure that the editor is available on the page when the JS code gets executed.

Best Regards,
Rumen
Progress Telerik

[Suvarna]

Thanks. That worked for me.