Tabstrip with Radeditor

5 posts, 1 answers
  1. Regula
    Regula avatar
    43 posts
    Member since:
    Sep 2005

    Posted 16 Apr 2012 Link to this post

    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?
  2. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Regula
    Regula avatar
    43 posts
    Member since:
    Sep 2005

    Posted 19 Apr 2012 Link to this post

    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
  5. Regula
    Regula avatar
    43 posts
    Member since:
    Sep 2005

    Posted 19 Apr 2012 Link to this post

    Hi,

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

    Thanks a lot.

  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Apr 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017