This is a migrated thread and some comments may be shown as answers.

Tabstrip with Radeditor

4 Answers 67 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Regula
Top achievements
Rank 1
Regula asked on 16 Apr 2012, 02:53 PM
Hi,

I've a scenario of 5 radtabs. In one of the radtabs I have one Radeditor.

I've noticed that when I have a large amount of text inserted in the Radeditor, when I change from one tab to another tab, it takes a long time (about 2 seconds) to change. The strange is that I don't have any postback when changing tabs, this should run smooth. I even tried to put the two radeditors outside the tabs and de behaviour is the same.

The text that is content in the radeditor is the next one:
<table width="92%" cellspacing="0" cellpadding="0" border="0"> <tbody>        <tr>            <td valign="top">            <p><strong>Description</strong></p>            </td>           
<td valign="top">            <p><strong>2012</strong></p>            </td>            <td valign="top">            <p><strong>2013</strong></p>            </td>            <td valign="top">            <p><strong>2014</strong></p>            </td>            <td valign="top">            <p><strong>2015</strong></p>            </td>            <td valign="top">            <p><strong>2016</strong></p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>Description</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>A –Publications</strong></p>            </td>           
<td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>Publications</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>Books</p>            </td>           
<td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>Books</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>A</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>1</p>            </td>            <td valign="top">            <p>3</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>A</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>B</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>B</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>B </strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>Communications</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>C</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>4</p>            </td>            <td valign="top">            <p>4</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>C</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>C</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>1</p>            </td>            <td valign="top">            <p>1</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>C</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>C –R</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>2</p>            </td>            <td valign="top">            <p>4</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>R</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>O</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>1</p>            </td>            <td valign="top">            <p>1</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>O</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>E</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>E</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>T</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>P</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>T</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>2</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>M</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p>O</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p>O</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>M</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>2</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>M</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>A</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>S</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>IP</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>PL</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>PL</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>1</p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>P</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>P</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>            <td valign="top">            <p>0</p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>P</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>O</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>            <td valign="top">            <p><strong>0</strong></p>            </td>        </tr>        <tr>            <td valign="top">            <p><strong>O</strong></p>            </td>            <td valign="top">            <p><strong> </strong></p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>            <td valign="top">            <p> </p>            </td>        </tr>    </tbody></table>


The radeditor definition is:

<telerik:RadEditor ID="3" runat="server" Width="100%" Height="200px"  StripFormattingOptions="AllExceptNewLines">          </telerik:RadEditor>



I made an experiment and replaced the radeditor for labels and I don't get any performance issue. It seems some client processing on radeditor is bringing the poor performance.

Can anybody help, please?

4 Answers, 1 is accepted

Sort by
0
Accepted
Kate
Telerik team
answered on 19 Apr 2012, 09:20 AM
Hello Regula,

At present you can take several steps to optimize the loading time
  1. Use RadScriptManager control on the page instead of the ScriptManager to combine scripts
  2. [Most important] - test the performance only when <compilation debug="false" in your web.config. When it is true, the MS AJAX debugging code kicks in and causes a severe performance hit on the client-side.
  3. [IMPORTANT] If the editor is loaded with large content disable the Undo | Redo by removing the Undo and Redo buttons as well as disable the built-in content filter: ContentFilters="None". See more information in the following live demo: Working With Large Content.
  4. Set EnableViewState = false to avoid the ViewState overhead
  5. The following two demos will provide you with some additional suggestions how to configure multiple editors for improved performance.
    Using ToolbarMode - http://demos.telerik.com/aspnet-ajax/editor/examples/toolbarmode/defaultcs.aspx
    Using ToolProviderID - http://demos.telerik.com/aspnet-ajax/editor/examples/toolprovider/defaultcs.aspx
  6. Set the CssFiles property to point to an empty file. Therefore the editor will not pick up the styles from the page.
  7. Render a single editor on the page, instead of multiple editors: Setting hidden RadEditor in edit mode on click and putting it in non editable mode onblur.
  8. You can also see the following KB article on the subject: Optimizing output, page load time and the overall performance of RadControls for ASP.NET AJAX.

To summarize the most important suggestions are:

  • Set <compilation debug="false" in the web.config
  • Remove the Undo and Redo buttons from the toolbar: Removing Toolbar Buttons.
  • Disable the Content Filters ContentFilters="None"
Set the CssFiles property to point to an empty file.

Kind regards,
Kate
the Telerik team
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 their blog feed now.
0
Regula
Top achievements
Rank 1
answered on 19 Apr 2012, 10:54 AM
Thanks a lot for your time!

One question more, if I disable the Modules and Content Filters, what alternative way do I have to treat the input text on submit?

Thanks


Note: I've noticed that you have a dead link  "Removing Toolbar Buttons" in the webpage: http://demos.telerik.com/aspnet-ajax/editor/examples/workingwithlargecontent/defaultcs.aspx
0
Regula
Top achievements
Rank 1
answered on 19 Apr 2012, 12:49 PM
Hi,

Setting ContentFilters="RemoveScripts" resolved the problem. I didn't have to change anything more.

Thanks a lot.

0
Kate
Telerik team
answered on 19 Apr 2012, 01:35 PM
Hi Regula,

I am glad you could resolve the issue and thank you for your note about the demo.

Kind regards,
Kate
the Telerik team
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 their blog feed now.
Tags
TabStrip
Asked by
Regula
Top achievements
Rank 1
Answers by
Kate
Telerik team
Regula
Top achievements
Rank 1
Share this question
or