This is a migrated thread and some comments may be shown as answers.

How to hide the trackchanges?

5 Answers 16 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Hongmin
Top achievements
Rank 1
Hongmin asked on 14 Jul 2014, 10:16 PM
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

5 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 17 Jul 2014, 10:57 AM
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
 

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.

 
0
Hongmin
Top achievements
Rank 1
answered on 18 Jul 2014, 08:13 PM
Got it!. That is very useful.

Thanks a lot!

CHM
0
Suvarna
Top achievements
Rank 1
answered on 29 Oct 2020, 06:50 PM

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.

0
Rumen
Telerik team
answered on 30 Oct 2020, 12:26 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Suvarna
Top achievements
Rank 1
answered on 30 Oct 2020, 01:24 PM
Thanks. That worked for me.
Tags
Editor
Asked by
Hongmin
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Hongmin
Top achievements
Rank 1
Suvarna
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or