Toggle Mode is not working in preview Mode and working functionality got break after telerik upgrade

[Afroz khan]

Hello Team,

I am facing the problem after Telerik and IE 11 upgrade , earlier working functionality got break.

Toggle is not working in Preview Mode

I am using Telerik Rad Control 2015, 2, 623, 40 with IE 11 

Here is the example ,which I am using

<telerik:RadEditor ContentAreaCssFile="~/Styles/EditorContentAreaCss.css" ID="txtNotes" OnClientModeChange="OnClientModeChange"
runat="server" EditModes="Preview" EnableResize="false" Height="490px" OnClientLoad="EditorMaxLengthvalidationNoCount"
NewLineBr="false" NewLineMode="P" Style="border: 1px solid Navy;
overflow: hidden; background-color: White" ToolsFile="~/App_Data/RadControls/Editor/ToolsFile.xml"
Width="1065px">
<CssFiles>
<telerik:EditorCssFile Value="~/Styles/Editor.css" />
</CssFiles>
</telerik:RadEditor>

function OnClientModeChange(editor, args) {
var mode = editor.get_mode();
switch (mode) {
case 1:
//Design mode
break;
case 2:
//HTML mode
break;
case 4:
setTimeout(function () {

editor.set_editable(false);
editor.enableEditing(false);
var tool = editor.getToolByName("ToggleScreenMode");
tool.setState(0);
}, 0);
//Preview mode
break;
}
}

[Danail Vasilev]

Hi Afroz,

From the provided code it seems that you are disabling the editor toolbar and content area when switched in Preview Mode, which is actually the default behavior of the editor.

If, however, I disable the toolbar and the content area in design view - this works as expected on my side with Telerik UI 2015.2.623 in IE11:

JavaScript:

case 1:
    //Design mode
    setTimeout(function () {

        editor.set_editable(false);
        editor.enableEditing(false);
        var tool = editor.getToolByName("ToggleScreenMode");
        tool.setState(0);
    }, 0);
    break;
case 2:

Could you please elaborate more about the actual and the expected behavior of the control?

Regards,
Danail Vasilev
Telerik

[Afroz khan]

Thanks Danail for Reply.

Actually I need to disable editing because data shows on read-only mode and only need to show the toggle button to view the content on full screen

[Danail Vasilev]

Hello Afroz,

RadEditor toolbar is disabled by default in Preview mode. That being said such enabling with code and operating with the toolbar in this mode is not an officially supported scenario and we cannot guarantee whether it will work or not.

Nevertheless you can try the workaround below which will help you achieve the desired scenario. Note, however, that this workaround hasn't been gone through a full QA process, so that we cannot confirm whether it will work in all cases.

ASPX:

<telerik:RadEditor __ContentAreaCssFile="~/Styles/EditorContentAreaCss.css" ID="txtNotes" OnClientLoad="OnClientLoad" OnClientModeChange="OnClientModeChange"
    runat="server" EditModes="Preview" EnableResize="false" Height="490px"
    NewLineBr="false" NewLineMode="P" Style="border: 1px solid Navy; overflow: hidden; background-color: White"
    __ToolsFile="~/App_Data/RadControls/Editor/ToolsFile.xml"
    Width="1065px">
    <CssFiles>
        <%--<telerik:EditorCssFile Value="~/Styles/Editor.css" />--%>
    </CssFiles>
</telerik:RadEditor>
<script>
    function OnClientLoad(sender, args) {
        Telerik.Web.UI.RadEditor.prototype._nonEditableCommands.push("ToggleScreenMode");
    }

    function OnClientModeChange(editor, args) {
        var mode = editor.get_mode();
        switch (mode) {
            case 1:
                //Design mode
                break;
            case 2:
                //HTML mode
                break;
            case 4:
                setTimeout(function () {

                    editor.set_editable(false);
                    editor.enableEditing(false);
                    var tool = editor.getToolByName("ToggleScreenMode");

                    tool.setState(0);
                }, 0);
                //Preview mode
                break;
        }
    }
</script>

Regards,
Danail Vasilev
Telerik

[Afroz khan]

Thanks Danail , it worked :)