Telerik RadEditor and Treeview Navigation conflict

3 posts, 1 answers
  1. Archna
    Archna avatar
    4 posts
    Member since:
    Apr 2013

    Posted 18 Jul 2013 Link to this post

    Several of the formatting functions like alignment, numbering, tabbing, font style or size, spell check, etc. do not work intermittently. 

    Once radEditor is opened and I type in the following:

    This is the Request Search screen.
    You can search for requests in this screen

    1. one
    2. two
    3. three


    Now 
    I put my cursor after the third bullet item and pressed enter twice for a new line. Then I typed in a couple of words, highlighted them with my mouse and clicked the icon to center the text. Nothing happened but if I click a different tab on my asp page, click radEditor again, highlight the text and click the icon to center the text it works. 

    This  behavior is mostly noticed on pages that also have Telerik Treeview navigation on them. Is there a known conflict between Telerik Treeview and RadEditor?

    Also this issue cannot be replicated when I run locally on my machine but can be seen on our Development and UAT server.

    Another issue we noticed is that when RadEditor window is moved around, you can see the Treeview navigation through it.

    I have attached the screenshots.

    Here are code snippets:

    Site.master:

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Wf.Sparc.Web.SiteMasterPage" %>
    <%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

     

                                             <td valign="middle" class="rightblock">&nbsp;&nbsp; 
                                <asp:LinkButton ID="HelpPageView" runat="server" Text="View Help |" Font-Underline="true" 
                                    toolTip="View information related to this page" ></asp:LinkButton>
                                
                                <asp:Panel ID="ModalPanelView" runat="server" style="display:none; width:380px; height:330px; background-color:White; 
                                border-width:2px; border-color:Black; border-style:solid; padding:20px;" > 
                                <asp:Button ID="OKButton" runat="server" Text="Close" ForeColor="Black"  /> <br /><br />
                                <telerik:RadEditor ID="radBodyView" ToolbarMode="Default" ToolsFile="~/RadControls/ToolsFile.xml" runat="server"
                                     ContentFilters="RemoveScripts" EditModes="All" Height="250" SkinID="RadEditorSkin" Enabled="false" 
                                      BackColor="LightGray"   Width="380" EnableResize="true" style="text-align: left; overflow:auto " />
                                        <script type="text/javascript">
                                            //This script must be below the RadEditor declaration
                                            //It displays the custom toolbar icon formatting FAQ
                                            //It replaces embedded scripts from a previous version of Telerik RadEditor     
                                            Telerik.Web.UI.Editor.CommandList["FormattingFAQ"] = function (commandName, editor, args) {
                                                var args = editor.get_html(true) //returns the HTML of the selection. 
                                                editor.showExternalDialog("/RadControls/FormattingFAQ.aspx", args, 500, 470, null, null, "Formatting FAQ",
                                                    true, Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, true, true); };
                                            Telerik.Web.UI.RadEditor.prototype._markExistingEmptyParagraphs = function (content) {
                                                return content;
                                            }
                                            Telerik.Web.UI.RadEditor.prototype._fixBrokenParagraphs = function (content) {
                                                return content;
                                            }
                                        </script>
                                    <br /><br />
                            </asp:Panel>
                            
                                <ajaxToolkit:ModalPopupExtender ID="modalView" runat="server" TargetControlId="HelpPageView" PopupControlID="ModalPanelView"  
                                OkControlID="OKButton" />
                            
                                <asp:LinkButton ID="HelpPageEdit" runat="server" Text=" Edit Help |" Font-Underline="true"  
                                toolTip="Edit information related to this page" ></asp:LinkButton>

                                <asp:Panel ID="ModalPanelEdit" runat="server" style="display:none; width:480px; height:330px; background-color:White; 
                                border-width:2px; border-color:Black; border-style:solid; padding:20px;" Enabled="true"> 
                                <asp:Button ID="ButtonEdit" runat="server" Text="Close" ForeColor="Black"  /> <br /><br />

                                <telerik:RadEditor ID="radBodyEdit" ToolbarMode="Default" ToolsFile="~/RadControls/ToolsFile.xml" runat="server" Enabled="true"
                                ContentFilters="RemoveScripts" EditModes="All" Height="250" SkinID="RadEditorSkin" Width="100" EnableResize="true" />
                                        <script type="text/javascript">
                                            //This script must be below the RadEditor declaration
                                            //It displays the custom toolbar icon formatting FAQ
                                            //It replaces embedded scripts from a previous version of Telerik RadEditor     
                                            Telerik.Web.UI.Editor.CommandList["FormattingFAQ"] = function (commandName, editor, args) {
                                                var args = editor.get_html(true) //returns the HTML of the selection. 
                                                editor.showExternalDialog("/RadControls/FormattingFAQ.aspx", args, 500, 470, null, null, "Formatting FAQ",
                                                    true, Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, true, true); };
                                            Telerik.Web.UI.RadEditor.prototype._markExistingEmptyParagraphs = function (content) {
                                                return content;
                                            }
                                            Telerik.Web.UI.RadEditor.prototype._fixBrokenParagraphs = function (content) {
                                                return content;
                                            }
                                        </script>
                                    <br /><br />
                                    <asp:Button ID="SaveButtonEdit" runat="server" Text="Save" ForeColor="Black" OnClick="saveHelpContent"/> 
                                <asp:Button ID="CancelButtonEdit" runat="server" Text="Cancel" ForeColor="Black"  /> <br /><br /> <br /><br />
                            </asp:Panel>
                                    <ajaxToolkit:ModalPopupExtender ID="PopupEdit" runat="server" TargetControlId="HelpPageEdit" PopupControlID="ModalPanelEdit" 
                                CancelControlID="CancelButtonEdit" OkControlID="ButtonEdit" PopupDragHandleControlID="ModalPanelEdit"/>

     

    -----------------------------------------------------------------------------
    site.master.cs

     protected void saveHelpContent(object sender, EventArgs e)
            {
                string pagePath = System.Web.HttpContext.Current.Request.Path.ToString();
                bool pagePathfound = DbAccess.SparcHelpPathCheck(pagePath);
                if (pagePathfound == false)
                    {
                        Wf.Sparc.DAL.DbAccess.UpdSparcHelpContent("ins", pagePath, radBodyEdit.Content, int.Parse(Session["userid"].ToString()));
                        HelpPageView.Visible = true;
                        radBodyView.Content = radBodyEdit.Content;
                    }
                else
                    {
                        Wf.Sparc.DAL.DbAccess.UpdSparcHelpContent("upd", pagePath, radBodyEdit.Content, int.Parse(Session["userid"].ToString()));
                        radBodyView.Content = radBodyEdit.Content;
                    }
            }

            protected string GetRadEditorContent()
            {
                string pagePath = System.Web.HttpContext.Current.Request.Path.ToString();
                string RadContent =  DbAccess.GetSparcHelpContent(pagePath).ToString();
                return RadContent;
            }

     

    protected void Page_Load(object sender, EventArgs e)
            {

     //For View/Edit help link
                string pagePath = System.Web.HttpContext.Current.Request.Path.ToString();
                bool pagePathfound = DbAccess.SparcHelpPathCheck(pagePath);
                
                if (!IsPostBack)
                {
                    radBodyView.Content = GetRadEditorContent();
                    radBodyEdit.Content = GetRadEditorContent();
                }

                if (isHelpAdmin)
                {
                    if (pagePathfound == false) 
                    {
                        HelpPageEdit.Visible = true;
                        HelpPageView.Visible = false;
                    }
                    else
                    {
                        if ((radBodyEdit.Content == "") || (radBodyEdit.Content == "<P>&nbsp;</P>"))
                        {
                            HelpPageEdit.Visible = true;
                            HelpPageView.Visible = false;
                        }
                        else
                        {
                            HelpPageEdit.Visible = true;
                            HelpPageView.Visible = true;
                        }
                    }
                }
                else
                {
                    if (pagePathfound == false)
                    {
                        HelpPageEdit.Visible = false;
                        HelpPageView.Visible = false;
                    }
                    else
                    {
                        if ((radBodyEdit.Content == "") || (radBodyEdit.Content == "<P>&nbsp;</P>"))
                        {
                            HelpPageEdit.Visible = false;
                            HelpPageView.Visible = false;
                        }
                        else
                        {
                            HelpPageEdit.Visible = false;
                            HelpPageView.Visible = true;
                        }
                    }
                }
            }

  2. Answer
    Ianko
    Admin
    Ianko avatar
    1932 posts

    Posted 22 Jul 2013 Link to this post

    Hello Archna,

    You could find my answer in the support ticket you opened on the same issue, with title radEditor toolbar align, bullet etc buttons not working intermittently.

    To summarize here, I could not reproduce the problem locally. You can find attached the test project I have been working with and a short clip showing the test process. 

    The issue about the TreeView controls showing above the RadEditor it looks like a z-index problem to me. You could check if there are some CSS rules with this property that could be the reason to this issue.

    If you still encounter problems with this it would be very helpful providing me with a sample runnable project isolating the problematic field, so that I can investigate this issue further.

    Please in future support needed I would ask you to open only one support thread, so that we can track the information from the messages easer and respectively find you faster a correct resolution. 

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Archna
    Archna avatar
    4 posts
    Member since:
    Apr 2013

    Posted 09 Aug 2013 Link to this post

    I had to redo the whole thing in RadWindow. It is now working consistently.
    I could never figure out why RadEditor was acting up with AJAX.
Back to Top