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

5 posts, 0 answers
  1. Afroz khan
    Afroz khan avatar
    38 posts
    Member since:
    Dec 2009

    Posted 09 Jul 2015 Link to this post

    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;
    }
    }

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 14 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Afroz khan
    Afroz khan avatar
    38 posts
    Member since:
    Dec 2009

    Posted 14 Jul 2015 in reply to Danail Vasilev Link to this post

    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

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 17 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Afroz khan
    Afroz khan avatar
    38 posts
    Member since:
    Dec 2009

    Posted 18 Aug 2015 in reply to Danail Vasilev Link to this post

    Thanks Danail , it worked :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017