Editor inside telerik rad editor in UI for ASP.NET AJAX Editor

karamjeet

8 posts

Member since:
May 2011

Posted 31 Jan 2014 Link to this post

We are using telerik rad editor of dnn(dotnetnuke) inside jquery tabs

jQuery JavaScript Library v1.9.1
jQuery UI - v1.10.3 - 2013-05-03

DNN Version 7.2.0

Attached file is
Steps to reproduce:
Click on insert media(and also drop down buttons of it) and nothing happens, all are disabled.
Here is dotnetnuke html module code with jquery tabs enhanced

<%@ Control language="C#" Inherits="DotNetNuke.Modules.Html.EditHtml" CodeBehind="EditHtml.ascx.cs" AutoEventWireup="false" Explicit="True" %><br><%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls" %><br><%@ Register TagPrefix="dnn" TagName="label" Src="~/controls/LabelControl.ascx" %><br><%@ Register TagPrefix="dnn" TagName="texteditor" Src="~/controls/texteditor.ascx" %><br><%@ Register TagPrefix="dnnweb" Assembly="DotNetNuke.Web" Namespace="DotNetNuke.Web.UI.WebControls" %><br><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/><br> <%--<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>--%><br> <%--<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>--%><br> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"/><br> <script type="text/javascript"><br> $(function () {<br> $("#tabs").tabs();<br> });<br> </script><br><br><br> <div id="tabs"><br> <ul><br> <li><a href="#tabs-1">Nunc tincidunt</a></li><br> <li><a href="#tabs-2">Proin dolor</a></li><br> <li><a href="#tabs-3">Aenean lacinia</a></li><br> </ul><br> <div id="tabs-1"><br> <strong><dnn:texteditor id="txtContent" runat="server" height="400" width="100%"></dnn:texteditor></strong><br> </div><br> <div id="tabs-2"

><br>    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula

in ligula suscipit aliquam. Praesent in

eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p><br>  </div><br>  <div id=

"tabs-3"

><br>    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p><br>    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce

in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p><br> </div><br></div>

Thanks for any help.

karamjeet

8 posts

Member since:
May 2011

Posted 31 Jan 2014 in reply to karamjeet Link to this post

Sorry for the title, it is telerik rad editor inside jquery tabs

Marin Bratanov

Admin

5425 posts

Posted 03 Feb 2014 Link to this post

Hello,

There should be no issues with a regular RadEditor in this case. I just tried it and it seems to work fine for me.

What I can suggest at this point is the following:
- examine the attached page that attempts to repaint the editor in case it has been initially hidden or is moved in the DOM and apply such an approach to your actual case
- try upgrading your Telerik controls to the latest version
- if neither helps or is viable in your case - contact the DNN community for assistance, because it would appear the issue stems from their environment

Regards,
Marin Bratanov
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 UI for ASP.NET AJAX, subscribe to the blog feed now.

editor-in-tabs.zip

karamjeet

8 posts

Member since:
May 2011

Posted 04 Feb 2014 in reply to Marin Bratanov Link to this post

Did you test it in chrome or opera. It will work in firefox

https://dnntracker.atlassian.net/browse/DNN-4761

i am also in contact with dnn on the above ticket url

Marin Bratanov

Admin

5425 posts

Posted 05 Feb 2014 Link to this post

Hello,

This works fine on my end across all browsers.

What I can advise at this point is:
- look for JavaScript errors on the page and resolve them
- make sure you attempted my workaround that calls a couple of RadEditor's methods
- upgrade to Q3 2013 SP2 because it handles some breking changes Chrome 32 introduced
- once Q1 2014 comes out, upgrade to it, because it will bring improvements on the resizing of RadEditor
- try using a RadTabStrip and RadMultiPage instead of jQuery tabs to see if this makes a difference. The OnClientTabSelected can be used as an event to fire a function that will repaint editors, if needed.

Regards,
Marin Bratanov
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 UI for ASP.NET AJAX, subscribe to the blog feed now.