Advanced Editor in Dialog

3 posts, 0 answers
  1. RSI
    RSI avatar
    80 posts
    Member since:
    Nov 2011

    Posted 28 Mar 2014 Link to this post

    Okay, something changed in the most recent version. We used to be able to use the advanced editor as follows.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   
        
        <%-- register the RadWindow for the Advanced Editing --%>
        <telerik:RadWindow runat="server" ID="RadWindowAdvEditor" NavigateUrl="~/RegisterPro/radeditorwindow.aspx" EnableEmbeddedBaseStylesheet="true" VisibleTitlebar="true" OnClientShow="SetDialogContent" OnClientPageLoad="SetDialogContent" Behaviors="Maximize,Close,Move" Width="800px" Modal="true" Height="700px" />

    <fieldset id="FieldSetMain" class="ui-widget ui-widget-content ui-corner-all" style="padding: 10px; width: 960px;">
            <legend id="LegendEventManager" class="ui-widget-header ui-corner-all">  Events Manager  </legend>
            <%-- Grid for add/edit/delete events (master and sub) --%>
            <div style="float: left;">
                <%-- script for the RadWindow --%>
                <telerik:RadScriptBlock ID="RadScriptBlockEditor" runat="server">
                    <script type="text/javascript">
                        //![CDATA[
     
                        var myEditorContent = null;
                        var myMessageType = "CommandExecute?";
                        var myEditor;
     
                        jQuery(function () {
                            if (typeof (RadEditorCommandList) != "undefined") {
                                Telerik.Web.UI.Editor.CommandList["RichEditor"] = function (commandName, editor, args) {
                                    myEditor = editor;                                      // set editor object so we can use it from window return - SetEditorContent
                                    myEditorContent = editor.get_html(true);              //get RadEditor content
                                    $find("<%= RadWindowAdvEditor.ClientID%>").show();     //open RadWindow
                                        }
                                    }
                                })
     
                                function SetEditorContent(content) {
                                    //set content to RadEditor on the main page from RadWindow                                               
                                    myEditor.set_html(content);
                                }
     
                                function SetDialogContent(oWnd) {
                                    var myContentWindow = oWnd.get_contentFrame().contentWindow;
                                    if (myContentWindow && myContentWindow.setContent) {
                                        window.setTimeout(function () {
                                            //pass and set the content from the mane page to RadEditor in RadWindow                                                       
                                            myContentWindow.setContent(myEditorContent);
                                        }, 500);
                                    }
                                }

    <telerik:RadGrid runat="server" ID="RadGridEventMaster" Height="100%" Width="97%" AllowMultiRowSelection="false" AutoGenerateColumns="True" ShowHeader="False" AllowAutomaticUpdates="false" AllowAutomaticInserts="false">
                            <MasterTableView CommandItemDisplay="Top" NoMasterRecordsText="There are no events to display..." DataKeyNames="EventMasterId" EditMode="EditForms" AllowAutomaticUpdates="false" AllowAutomaticInserts="false">
                                <CommandItemTemplate>
     
     
                                <%-- Edit form master event template --%>
                                <EditFormSettings EditFormType="Template">
                                    <FormTemplate>
     
                                            <telerik:RadGrid runat="server" ID="RadGridEventSub" Height="100%" Width="100%" AllowMultiRowSelection="false" AutoGenerateColumns="false" OnItemCommand="RadGridEventSub_ItemCommand" OnDeleteCommand="RadGridEventSub_DeleteCommand" OnInsertCommand="RadGridEventSub_InsertCommand" OnUpdateCommand="RadGridEventSub_UpdateCommand" OnNeedDataSource="RadGridEventSub_NeedDataSource"
                                                OnItemDataBound="RadGridEventSub_ItemDataBound" OnItemCreated="RadGridEventSub_ItemCreated" AllowAutomaticUpdates="true" AllowAutomaticInserts="true">
                                                <MasterTableView CommandItemDisplay="Top" NoMasterRecordsText="There are no events to display..." DataKeyNames="EventMasterId, EventSubId, GroupId, Name, EventTypeId, BoardPositionId" EditMode="EditForms">
                                                    <CommandItemSettings AddNewRecordText="Add a new sub event" ShowRefreshButton="false" />
     
     
     
                                                                                        <div>
                                                                                            <telerik:RadEditor runat="server" ID="RadEditorEmailNotificationMsg" ToolsWidth="100%" Height="200px" Width="100%" EnableResize="false" ContentAreaMode="Div" Content='<%# Eval("EmailNotificationMsg") %>'>
                                                                                                <Tools>
                                                                                                    <telerik:EditorToolGroup>
                                                                                                        <telerik:EditorTool Name="RichEditor" Text="Open Advanced Editor" />
                                                                                                        <telerik:EditorTool Name="Bold" />
                                                                                                        <telerik:EditorTool Name="Italic" />
                                                                                                        <telerik:EditorTool Name="Underline" />
                                                                                                        <telerik:EditorTool Name="Cut" />
                                                                                                        <telerik:EditorTool Name="Copy" />
                                                                                                        <telerik:EditorTool Name="Paste" />
                                                                                                        <telerik:EditorTool Name="FontName" />
                                                                                                        <telerik:EditorTool Name="RealFontSize" />
                                                                                                    </telerik:EditorToolGroup>
                                                                                                </Tools>
                                                                                            </telerik:RadEditor>
                                                                                        </div>

                                        </div>
                                    </FormTemplate>
                                </EditFormSettings>
                                <%-- Edit form template --%>
                            </MasterTableView>
                        </telerik:RadGrid>
                    </div>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>


    Okay instead of putting 10000 lines of code i took pieces out to show what we are doing and was working. 

    We declare a RadWindow at the beginning of code (line 150) - "RadWindowAdvEditor"
    We set code for the Editor before the Grid (which worked (line 208) - moving after the grid didnt matter (line 1472)) - "RadScriptBlockEditor"

    We have 2 Grids, 1 Grid holds a master record (line 259) and when in edit mode it shows another Grid (line 466) which hold sub items of the master record. So you edit one of the sub items from the sub grid and it shows 3 editors and lots of other stuff. All in a EditFormSettings->FormTemplate of the sub grid. 

    The user, before the update Q1 2014, was able to click on the RichEditor icon and open up the RadWindow to edit and it sent back the content and updated the RadEditor embedded in the EditForm correctly. This worked for years, we were on a 2013 version. You can see from the last code snippet that the RadEditors are indeed embedded in 2 grids.

    Now we tried to change it around, put the script at the end. We cant put it after the RadEditor object declare due to it being in a Edit form. The reason is all of a sudden the clients are getting the dreaded "The command RichEditor is not implemented yet."   

    We have other forms w/o the Grids and Edit Forms - just laying on a WebForm and it works fine. The code is BEFORE the declaration of the RadEditor and we dont have a problem.

    Please advise! We have clients who can not use the advanced editor for the their registration emails that we provide for them.

    Thanks Telerik!







  2. RSI
    RSI avatar
    80 posts
    Member since:
    Nov 2011

    Posted 28 Mar 2014 in reply to RSI Link to this post

    okay Telerik

    we were able to get it to work but we have errors coming back from the advanced editor. We put 

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                                                                                <script type="text/javascript">
                                                                                                    //![CDATA[         
     
                                                                                                    var myEditorContentNotification = null;
                                                                                                    var myEditorNotification;
     
                                                                                                    jQuery(function () {
     
                                                                                                        if (typeof (RadEditorCommandList) != "undefined") {
     
                                                                                                            Telerik.Web.UI.Editor.CommandList["RichEditorNotification"] = function (commandName, editor, args) {
                                                                                                                myEditorNotification = editor;                                      // set editor object so we can use it from window return - SetEditorContent
                                                                                                                myEditorContentNotification = editor.get_html(true);              //get RadEditor content
                                                                                                                $find("<%= RadWindowAdvEditor.ClientID%>").show();     //open RadWindow
                                                                                                            }
                                                                                                        }
                                                                                                    })
     
                                                                                                    function SetEditorContent(content) {
                                                                                                        //set content to RadEditor on the main page from RadWindow                                               
                                                                                                        myEditorNotification.set_html(content);
                                                                                                    }
     
     
                                                                                                    //]]>
                                                                                                </script>
                                                                                            </telerik:RadScriptBlock>

    after the first RadEditor and it seemed ok. We need to test some more but for the most part it seems ok. But here are the errors

    Ever seen these errors?

    first error
    Error while executing filter StripScriptsFilter - TypeError: b is null

    second
    Error while executing filter EncodeScriptsFilter - TypeError: b is null

    third
    Error while executing filter MozillaKeepStylesString - TypeError: b is null

    fourth
    Error while executing filter ConvertTagsFilter - TypeError: a is null

    Saving and close brings the data back successfuly. 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. RSI
    RSI avatar
    80 posts
    Member since:
    Nov 2011

    Posted 28 Mar 2014 in reply to RSI Link to this post

    Well we got it all working. It had to be separated out now. Something had changed from a past release.

    The script code is now in the editform

    first editor
    <telerik:RadEditor runat="server" ID="RadEditorEmailNotificationMsg" ToolsWidth="100%" Height="200px" Width="100%" EnableResize="false" ContentAreaMode="Div" Content='<%# Eval("EmailNotificationMsg") %>'>
                                                                                                <Tools>
                                                                                                    <telerik:EditorToolGroup>
                                                                                                        <telerik:EditorTool Name="RichEditorNotification" Text="Open Advanced Editor" />
                                                                                                        <telerik:EditorTool Name="Bold" />
                                                                                                        <telerik:EditorTool Name="Italic" />
                                                                                                        <telerik:EditorTool Name="Underline" />
                                                                                                        <telerik:EditorTool Name="Cut" />
                                                                                                        <telerik:EditorTool Name="Copy" />
                                                                                                        <telerik:EditorTool Name="Paste" />
                                                                                                        <telerik:EditorTool Name="FontName" />
                                                                                                        <telerik:EditorTool Name="RealFontSize" />
                                                                                                    </telerik:EditorToolGroup>
                                                                                                </Tools>
                                                                                            </telerik:RadEditor>
                                                                                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                                                                                <script type="text/javascript">
                                                                                                    //![CDATA[         
                                                                                                             
                                                                                                    Telerik.Web.UI.Editor.CommandList["RichEditorNotification"] = function (commandName, editor, args) {
                                                                                                        myEditor = editor;                                      // set editor object so we can use it from window return - SetEditorContent
                                                                                                        myEditorContentNotification = editor.get_html(true);                //get RadEditor content
                                                                                                        $find("<%= RadWindowAdvEditorNotification.ClientID%>").show();                  //open RadWindow
                                                                                                    };
                                                                                                                                                                                                     
                                                                                                    //]]>
                                                                                                </script>
                                                                                            </telerik:RadScriptBlock>

    second editor
    <telerik:RadEditor runat="server" ID="RadEditorEmailReminderMsg" ToolsWidth="100%" Height="200px" Width="100%" EnableResize="false" ContentAreaMode="Div" Content='<%# Eval("EmailReminderMsg") %>'>
                                                                                                <Tools>
                                                                                                    <telerik:EditorToolGroup>
                                                                                                        <telerik:EditorTool Name="RichEditorReminder" Text="Open Advanced Editor" />
                                                                                                        <telerik:EditorTool Name="Bold" />
                                                                                                        <telerik:EditorTool Name="Italic" />
                                                                                                        <telerik:EditorTool Name="Underline" />
                                                                                                        <telerik:EditorTool Name="Cut" />
                                                                                                        <telerik:EditorTool Name="Copy" />
                                                                                                        <telerik:EditorTool Name="Paste" />
                                                                                                        <telerik:EditorTool Name="FontName" />
                                                                                                        <telerik:EditorTool Name="RealFontSize" />
                                                                                                    </telerik:EditorToolGroup>
                                                                                                </Tools>
                                                                                            </telerik:RadEditor>
                                                                                            <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                                                                                <script type="text/javascript">
                                                                                                    //![CDATA[         
                                                                                                     
                                                                                                    Telerik.Web.UI.Editor.CommandList["RichEditorReminder"] = function (commandName, editor, args) {
                                                                                                        myEditor = editor;                                      // set editor object so we can use it from window return - SetEditorContent
                                                                                                        myEditorContentReminder = editor.get_html(true);                //get RadEditor content
                                                                                                        $find("<%= RadWindowAdvEditorReminder.ClientID%>").show();                  //open RadWindow
                                                                                                    };
                                                                                                     
                                                                                                    //]]>
                                                                                                </script>
                                                                                            </telerik:RadScriptBlock>

    third editor
    <telerik:RadEditor runat="server" ID="RadEditorEmailWarningMsg" ToolsWidth="100%" Height="200px" Width="100%" EnableResize="false" ContentAreaMode="Div" Content='<%# Eval("EmailWarningMsg") %>'>
                                                                                                <Tools>
                                                                                                    <telerik:EditorToolGroup>
                                                                                                        <telerik:EditorTool Name="RichEditorWarning" Text="Open Advanced Editor" />
                                                                                                        <telerik:EditorTool Name="Bold" />
                                                                                                        <telerik:EditorTool Name="Italic" />
                                                                                                        <telerik:EditorTool Name="Underline" />
                                                                                                        <telerik:EditorTool Name="Cut" />
                                                                                                        <telerik:EditorTool Name="Copy" />
                                                                                                        <telerik:EditorTool Name="Paste" />
                                                                                                        <telerik:EditorTool Name="FontName" />
                                                                                                        <telerik:EditorTool Name="RealFontSize" />
                                                                                                    </telerik:EditorToolGroup>
                                                                                                </Tools>
                                                                                            </telerik:RadEditor>
                                                                                            <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                                                                                                <script type="text/javascript">
                                                                                                    //![CDATA[         
                                                                                                     
                                                                                                    Telerik.Web.UI.Editor.CommandList["RichEditorWarning"] = function (commandName, editor, args) {
                                                                                                        myEditor = editor;                                      // set editor object so we can use it from window return - SetEditorContent
                                                                                                        myEditorContentWarning = editor.get_html(true);                //get RadEditor content
                                                                                                        $find("<%= RadWindowAdvEditorWarning.ClientID%>").show();                  //open RadWindow
                                                                                                    };
     
                                                                                                    function SetEditorContent(content) {
                                                                                                        //set content to RadEditor on the main page from RadWindow                                               
                                                                                                        myEditor.set_html(content);
                                                                                                    }
                                                                                                     
                                                                                                    //]]>
                                                                                                </script>
                                                                                            </telerik:RadScriptBlock>

    The third one has the content code to send to the editors

    then at the end of the aspx file
    <%-- script for the RadWindow --%>
        <telerik:RadScriptBlock ID="RadScriptBlockEditor" runat="server">
            <script type="text/javascript">
                //![CDATA[
     
               var myMessageType = "CommandExecute?";
     
                function SetDialogContentReminder(oWnd) {
                    var myContentWindow = oWnd.get_contentFrame().contentWindow;
                    if (myContentWindow && myContentWindow.setContent) {
                        window.setTimeout(function () {
                            //pass and set the content from the mane page to RadEditor in RadWindow                                                       
                            myContentWindow.setContent(myEditorContentReminder);
                        }, 500);
                    }
                }

    and at the beginning
    <script type="text/javascript" >
             
            var myEditor;
            var myEditorContentReminder = null;
            var myEditorContentNotification = null;
            var myEditorContentWarning = null;

    ...and of course the windows
    <%-- register the RadWindow for the Advanced Editing --%>
        <telerik:RadWindow runat="server" ID="RadWindowAdvEditorReminder" NavigateUrl="~/RegisterPro/radeditorwindow.aspx" EnableEmbeddedBaseStylesheet="true" VisibleTitlebar="true" OnClientShow="SetDialogContentReminder" OnClientPageLoad="SetDialogContentReminder" Behaviors="Maximize,Close,Move" Width="800px" Modal="true" Height="700px" />
        <telerik:RadWindow runat="server" ID="RadWindowAdvEditorNotification" NavigateUrl="~/RegisterPro/radeditorwindow.aspx" EnableEmbeddedBaseStylesheet="true" VisibleTitlebar="true" OnClientShow="SetDialogContentNotification" OnClientPageLoad="SetDialogContentNotification" Behaviors="Maximize,Close,Move" Width="800px" Modal="true" Height="700px" />
        <telerik:RadWindow runat="server" ID="RadWindowAdvEditorWarning" NavigateUrl="~/RegisterPro/radeditorwindow.aspx" EnableEmbeddedBaseStylesheet="true" VisibleTitlebar="true" OnClientShow="SetDialogContentWarning" OnClientPageLoad="SetDialogContentWarning" Behaviors="Maximize,Close,Move" Width="800px" Modal="true" Height="700px" />


    I dont know what happened Telerik, but we had to change all this to get it to work again. any reasons you can think of? breaking change somewhere?

    Hopefully this will help put others

    Thanks!

Back to Top