Community & Support
Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > General Discussions > Client side performance using a lot of rad controls on one page

Not answered Client side performance using a lot of rad controls on one page

Feed from this thread
  • cayates avatar

    Posted on Jun 9, 2008 (permalink)

    Hello,  I need guidance as to how to improve client side performance when using a lot of rad controls on one page.  I am creating an application that will be used by several hundred police officers in a county with a population of 380k so as you can see it needs to be very reliable and fast.

    One major requirement for this application is that it should have all of the fields on one page without the need to navigate between pages to enter the information needed.  This is mainly due to the fact that many police officers may have several weeks to 2 months in between using the application so it has to be easy to use and navigate.

    Subsequently, there are 2 RadMenu's, 38 RadTextBox's, 12 RadMaskedTextBox's, 2 RadDateInput's, 16 RadComboBox's, 5 RadGrid's, 2 RadEditor's, 3 RadWindow's, and 1 RadAjaxManager currently on one page.  There may be a few more controls added but that should be 95% of the fields.

    I enabled tracing and the server side complets in 1 second exactly every time.  The problem is at the client side.  Once the page loads into the browser there is a long pause and I'm assuming it's some sort of Telerik initialization javascript code running.  During this pause the mask shows in the RadMaskedTexBox's and the page will not respond to events...as soon as the pause is over the masks disappear (as I have HideOnBlur set to true) and then the page will respond to clicks and you can begin using the form.  The pause lasts around 6 to 8 seconds on my computer, however, it's a very fast computer and I'm afraid slower PC's will be even worse.

    Is there any general guidance you can give me to reduce this client-side pause?  Thank you.

    Reply

  • Jeff B. avatar

    Posted on Jun 9, 2008 (permalink)

    Personally, the first thing I would look at is verifying that debug="false".  Having debug="true" can add a tremendous amount of network traffic which can slow things down significantly (I was seeing over 1.5 mb additional bandwitch on a recent project). 

    Second, if you don't need to use RadTextBox's then don't.  The regular textbox is much lighter and can be skinned to look similar to the radtextbox.

    RadCombobox's are also much heavier than a regular combobox.  If you don't need them then just stick w/ the regular combobox.

    You probably already know to turn off viewstate wherever you don't need it.  Another thing you can do is store your viewstate in a session variable so that it doesn't need to be sent across the wire.  With that many controls, if you have viewstate on it has to be gigantic.

    5 radgrids on a single page is alot.  The bottom line is that, even though you want to keep this simple, it just sounds like you have way too much going on on a single page (just my opinion).  If it were me I would rethink my approach.  You can still provide simplicity without having everything on a single page.

    Also, use something like HttpWatch (free version can found on their site at httpwatch.com) to see exactly what's happening.  You can see your page size, how much data is being transferred, etc.  Also, another step to improving performance is using an HttpCompression module.  There are several available on the web that give you the ability to turn on/off compression on a variety of pages or other resources.  I've had a little difficulty getting this to work with the new telerik controls but with some tweaking you can still significanly lighten the load.

    There's also an article on improving radgrid performance:  http://www.telerik.com/help/aspnet-ajax/grdviewstatereductiontechniques.html

    Much of this probably isn't the answer you were looking for but I hope it helps anyway.

    Reply

  • cayates avatar

    Posted on Jun 9, 2008 (permalink)

    Jeff,

    Thank you for the suggestions, I will definitely look into those.

    The main problem seems to be after the page has been sent to the client, however.  It takes about a second for the server to render the page and less than a second to send the page to the client because this will be run internally on a high speed LAN.  So decreasing the size of the viewstate, turning on compression, etc. I don't think will help me a whole lot in my current environment because I don't believe the physical size of the page is the problem, or should I say bandwidth is not the bottleneck.

    It seems to be the javascript processing of the rad controls after the page has been loaded into the browser when the pause occurs.  I do believe I can get away with using regular text boxes for the RadTextBoxes, but it would take a lot of work to get the look and feel of the RadComboBox that I'm using now.  The same goes with the MaskedTextBox and the RadDateInput.

    Actually, here is a link to a video I made of the pause: http://www.iyates.com/files/pause_example.avi.  Each of the blue links reveal hidden divs with various telerik controls in them.  As you can see, the pause happens after the entire page is loaded into the browser.

    I will read the article you linked to and try converting some of the telerik controls to normal ones.  It would be rather disappointing, however, to purchase a product and then be forced to write my own lighter version of the controls.  Kind of defeats the purpose.

    Thanks again,

    Chris

    Reply

  • Jeff B. avatar

    Posted on Jun 9, 2008 (permalink)

    That link isn't working for me.

    What is the rendered page size with all these controls?

    Reply

  • cayates avatar

    Posted on Jun 9, 2008 (permalink)

    That's strange, I double checked the URL and it worked for me.  You might have to right click it and use Save Target As?

    I downloaded HttpWatch Basic and used it, that is a very nice tool.  It sais downloaded data is 335kb.  I can transfer files at sever mb per second between my client and the server so 335kb should take less than a second.  It does show 2.8 seconds as elapsed time to get the page.  It's after that 2.8 seconds that a 6 to 8 second wait happens before you can actually use the controls.

    Edit: Scratch that, it's 335k for the aspx file and 267k for the Telerik.Web.UI.WebResource.axd file bringing the grand total to a whopping 617k.  Obviously this is too large for an internet based app and I should try to get this smaller and definitely enable compression but I still don't think it's the source of my problem.

    Reply

  • cayates avatar

    Posted on Jun 9, 2008 (permalink)

    I also believe this HttpWatch revealed something.  The main page load takes 1.090 seconds to load.  Each request after that takes in the hundredths of a second, the js and css files, etc. and the time increments accordingly.

    However, in between a gif file and this url:

    http://cmcfs1/CJIS/WebResource.axd?d=IGAfTU57YAFtSIa5UqoUX-bmLG54S3sdYLF2lU0Myfi96Ff5kxJnRcO9oDTU8Ti12mRVgnV-I-aD5Oq8Qzypzw2&t=633438056340000000

    It shows a 4 second gap and the result is 404.  I was also able to repeat it and every time the pause I'm complaining about is appearantly it's inability to load that WebResource.axd url.

    Reply

  • Jeff B. avatar

    Posted on Jun 9, 2008 (permalink)

    That is definitely a very large set of data.  As for the axd problem, I'm not sure how to determine from which assembly an axd is working on to pull the resource.  I do know that the radcontrols for asp.net ajax embeds everything from js to images to css so there's alot of stuff being pulled from there.  However, that doesn't mean that telerik's code is the cause of the problem.

    When I run into issues like this I will sometimes put all of the markup into a separate test application/site where I can start commenting out sections of markup to try to identify the culprit.  By putting it in a separate project you can eliminate most of the code-behind and just focus on the markup and browser rendering.  You know, start by commenting out your 5 radgrid's and see how much things improve, etc.

    Reply

  • cayates avatar

    Posted on Jun 10, 2008 (permalink)

    Well, I followed your suggestion of putting it into a seperate project and slowly removing code to find the culprit.

    The culprit is:

    <telerik:RadEditor ID="Facts" runat="server" Width="100%" 
        Height="200">  
    </telerik:RadEditor> 

    When I remove the RadEditor HttpWatch shows a total elapsed time of 1.06 seconds and the 404 WebResource.axd request is gone.  When I put it back in the elapsed time jumps to 6 seconds.  The pause is still there without the RadEditor but it's much shorter.

    Any idea why the RadEditor is causing this?  The markup above is in my main aspx file.  I also have this in my Skin file:

    <telerik:RadEditor runat="Server" Skin="CJIS" 
        EnableEmbeddedSkins="false" 
        ImagesPath="/CJIS/App_Themes/CJIS/Editor/" 
        EditModes="Design" 
        ToolsFile="~\App_Themes\CJIS\Editor\MinimumEditorTools.xml">  
    </telerik:RadEditor> 

    And MinimumEditorTools.xml is this:

    <root> 
      <modules> 
        <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true"/>  
      </modules> 
      <tools name="MainToolbar" isribbon="false" dockable="false">  
        <tool name="AjaxSpellCheck"/>  
        <tool name="FindAndReplace" shortcut="CTRL+F"/>  
        <tool name="Copy" shortcut="CTRL+C"/>  
        <tool name="Paste" shortcut="CTRL+V"/>  
        <tool name="PasteFromWord" /> 
        <tool name="PasteFromWordNoFontsNoSizes" /> 
        <tool name="PastePlainText" /> 
        <tool name="PasteAsHtml"  /> 
        <tool separator="true"/>  
        <tool name="Undo" shortcut="CTRL+Z"/>  
        <tool name="Redo" shortcut="CTRL+Y"/>  
        <tool separator="true"/>  
        <tool name="Bold" shortcut="CTRL+B"/>  
        <tool name="Italic" shortcut="CTRL+I"/>  
        <tool name="Underline" shortcut="CTRL+U"/>  
        <tool name="StrikeThrough" /> 
        <tool separator="true"/>  
        <tool name="JustifyLeft" /> 
        <tool name="JustifyCenter" /> 
        <tool name="JustifyRight" /> 
        <tool separator="true"/>  
        <tool name="FontName"/>  
        <tool name="FontSize"/>  
        <tool name="ForeColor"/>  
        <tool separator="true"/>  
        <tool name="InsertDate" /> 
        <tool name="InsertTime" /> 
      </tools> 
    </root> 

    Thank you for your help, it is greatly appreciated.

    Reply

  • Jeff B. avatar

    Posted on Jun 10, 2008 (permalink)

    The next step I would take, now that you've isolated the editor, is to turn off features of the editor one by one to see if you can isolate a single feature that is causing the problem.  If you can isolate it in a separate project I think it would be time to submit a support ticket.

    One question for you, though, are you using RadControls for ASP.NET Ajax (formerly "Prometheus") or the older RadControls for ASP.NET? 

    Reply

  • cayates avatar

    Posted on Jun 10, 2008 (permalink)

    RadControls for ASP.NET Ajax - Q1 2008.

    Reply

  • Jeff B. avatar

    Posted on Jun 10, 2008 (permalink)

    Guess I should have known that by the presence of the 'EnableEmbeddedSkins' in your code.  I've been unable to get custom skins to work on the newer controls, which is why I asked.

    Reply

  • cayates avatar

    Posted on Jun 11, 2008 (permalink)

    Well, I've done some more testing.  I have removed the RadEditor for now so it's out of the equation.  This did get rid of the 404 error but the long pause still remains.  It is shorter, like I said, but it's still a nuisance.  The times I was giving you before were actually when running it from a server.  When developing locally the pause is worse.

    It turns out, however, that from FireFox the pause does not happen at all!  It loads in less than two seconds and you can immediately start using the controls.

    So something with IE7 is causing this pause.  Is this a known issue or am I experiencing a unique situation?

    Reply

  • Blaize Intermediate avatar

    Posted on Jun 12, 2008 (permalink)

    Chris,

    IE introduces an initial delay in the     page load when too much nested tables. If this is your case, you can consider changing the page layout to a table-less one.

    Cheers,
    Blaize

    Reply

  • cayates avatar

    Posted on Jun 12, 2008 (permalink)

    Hello, Blaize.  Thank you for the suggestion, however, this page doesn't have very many nested tables at all.  In fact, I looked through the generated source code, and the only nested tables are the ones that the rad controls generate which means at most there is one table within a table.

    I would really appreciate it if a Telerik employee would post their comments in this thread.  Thank you.

    Reply

  • Plamen Peshev Plamen Peshev admin's avatar

    Posted on Jun 13, 2008 (permalink)

    Hello cayates,

    You can try to disable the embedded scripts of the controls. The following documentation topic discusses in detail this approach:

    http://www.telerik.com/help/aspnet-ajax/disabling_embedded_resources.html

    Let us know whether this helps.

    Kind regards,
    Plamen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

    Reply

  • Clinton Smyth avatar

    Posted on Aug 20, 2008 (permalink)

    Hi

    Were you able to resolve this?  I'm suffering the same problem.  I have a dashboard page showing a summary of the system in (depending on user config) a max of 12 radgrids and a radcalendar as well as a radpanelbar in a master page.

    As per previous posts in this thread, after all components are downloaded from the server, IE takes an additional 10 seconds or so of 'client side processing' before the page responds to user input.  FireFox doesn't have this problem.

    Note: we're using RadControls_Q2_2008 (i.e. not Prometheus) .. plan to make the switch when time allows.

    Reply

  • cayates avatar

    Posted on Aug 21, 2008 (permalink)

    Unfortunately I have not found a solution.

    It seems this is a limitation of Telerik and there's nothing we can do until they fix it.  Basically you can't use more than a few controls on one page and use Internet Explorer otherwise those delays will happen client side.

    Fortunately I am able to control the web browsers of my clients, for the most part, so I will make sure they use Fire Fox.  If I were developing a public application then there is no way I could use Telerik controls.  Afterall, IE still holds over 50% of the browser market.

    Reply

  • Sebastian Sebastian admin's avatar

    Posted on Aug 25, 2008 (permalink)

    Hi guys,

    We have a lot of optimization techniques for RadControls and I am sure some of them will be of great help for your project. Let me just go ahead and summarize the most important performance info we already have in our documentation resources. If the info below does not help, please do not hesitate to provide some further details and send us a sample of your project where you experience the performance issues and we will gladly look into it.

    Optimization Tips series in the blogs:
    Optimization Tips:The Rad Managers for ASP.NET AJAX
    Optimization Tips: Testing Page Performance
    Optimization Tips: Using RadAjaxManagerProxy Controls
    Optimization Tips: Using HTTP Compression
    Optimization Tips: Optimizing Custom Skins

    RadGrid

    - server-side: The grid itself cannot cause server-side performance problems related to controls creations and/or render. There might be some possible problems with controls inside grid templates.

     

    - data-binding: The .NET 2.0 version of the grid is optimized to handle up to 100 000 records without major performance problems. Server-side paging will increase performance dramatically.

        Example: http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/Programming/CustomPaging/DefaultCS.aspx

        .NET 3.5 version can handle millions of records and will apply paging, sorting and filtering directly on the data-base server (LinqDataSource) codeless:

        http://blogs.telerik.com/vladimirenchev/Posts/08-03-10/How_fast_is_your_ASP_NET_DataGrid.aspx?ReturnURL=%2fvladimirenchev%2fposts.aspx%3fYear%3d2008%26Month%3d3

        Client-side data-binding approach is also very fast + you will get pure JSON transfer between client and server:

        http://blogs.telerik.com/VladimirEnchev/Posts/08-05-23/SQL_Server_sorting_paging_and_filtering_with_RadGrid_client-side_data-binding_to_WebService.aspx?ReturnURL=%2fVladimirEnchev%2fPosts.aspx

     

    - ViewState size: Some of the grid operations can work with completely turned off ViewState.

        Example: http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/Programming/ViewState/DefaultCS.aspx

        In client-side data-binding scenarios you do not need the ViewState also:

        Example: http://www.telerik.com/DEMOS/ASPNET/Prometheus-futures/Grid/Examples/Client/DataBinding/DefaultCS.aspx

     

    - HTML output size: RadGrid output is the smallest on the market however may depend on selected grid features, number of items per page and templates.

        Example: http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/GeneralFeatures/Migration/DefaultCS.aspx

     

    - JavaScript file size: The entire grid script size is 174 Kb (combined and compressed using dojo)

     

    - JavaScript $create clause size: Depends on selected features. Can be turned off along with all other resources:

        Example: http://blogs.telerik.com/VladimirEnchev/Posts/08-07-15/Telerik_RadGrid_Section_508_Compliance.aspx?ReturnURL=%2fBlogs.aspx

     

    - Number of requests: Most of the grid images come from the grid CSS sprite which minimizes number of requests to the server for resources. Can be minimized with RadScriptManager and RadStyleSheetManager.

     

    - Other: http://www.telerik.com/help/aspnet-ajax/grdviewstatereductiontechniques.html


    RadEditor
    Some optimization features introduced in the ASP.NET AJAX version are

    –         semantic rendering to reduce HTML markup,

    –         certain editor scripts are loaded only if needed, reducing total script sent to client

    –         use of optimized code relying on the common Prometheus framework

    –         lazy initialization and loading for any client-side feature not immediately used.

    Nonetheless, there are two scenarios where performance can degrade:

    1. Having many editors on the page  (10, 20 or even 30. More common in MOSS scenarios).

    The Prometheus editor initializes about 3-4 times faster than the Classic version on the client side. Nonetheless, having 30 instances of the editor is bound to cause a delay. However, this delay can be greatly reduced– and brought to almost nothing – by setting a ToolProviderID (so that many editors share the same toolbar and no additional markup is sent on client), as well as set the ToolbarMode property – non default toolbars use lazy initialization and are initialized not when the page loads, but when an editor is first used (e.g. the user clicks in the content area). The following example demonstrates these two features:
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/ToolProvider/DefaultCS.aspx

    2. Loading too much content into the editor (100K and more).
    This is done very rarely, but sometimes we get contacted about slow performance of the editor. Problem is not addressable – it is inherent. When having to deal with so much content, the browser eats lots of memory to provide for storing the editor states needed by the Undo/Redo, the Undo/Redo itself starts executing slowly due to the huge content.

    RadTreeView
    The biggest challenge here is to deliver acceptable performance when dealing with lots of nodes (hundreds and thousands). To do so RadTreeView supports:

    1.       HTML markup
    RadTreeView renders the least amount of HTML needed to implement the features. However, the HTML size grows up dramatically when RadTreeView contains a few thousand of nodes.  This issue cannot be easily tackled - even rendering a few thousand strings will generate lots of output. That’s where load on demand comes into play.

    2.       Load on demand
    The idea is simple - render that HTML only when needed. RadTreeView supports three different types of load on demand:

    a.       Client-side (via ASP.NET Callbacks)
    This is technique is easier for the developer to implement however may not be a top performer because the whole ViewState is submitted on every request.

    b.      Server-side (regular postbacks which can be ajaxified)
    Worst performance. Mostly added for backwards compatibility. Full page update can be avoided by wrapping the treeview inside update panel.

    c.       Web-services
    Web services provide best performance because they completely skip the heavy page lifecycle and don’t require sending huge ViewState strings.

    All types of load on demand keep logging the nodes created on demand. This however introduces a delay after numerous loads on demand requests since the log grows bigger. This is required by customers who want the nodes created on demand do be persisted after postback (or those nodes need to fire server-side events - click, drag and drop etc). This means that after some time all load on demand schemes (without server-side) get slower. Fortunately, there is a property PersistLoadOnDemandNodes which controls this behavior.

    3.       Initialization of the client object
    RadTreeView supports on demand initialization of nodes which are not visible (their parent nodes are collapsed). This is transparent to the user. However, invoking the client-side API (e.g. get_allNodes()) can force full client-side initialization which is a time consuming operation in case of a few hundred nodes. Also logging client side changes which need to be reflected on the server (checking a node, selecting a node) from the client-side API can be slow with lots of nodes.

    4.       JSON
    RadTreeView (as well as most of our ASP.NET AJAX controls) renders some JavaScript code in JSON format required to initialize the nodes. At the time being the text of the node is not serialized in by default which saves lots of output. 

    A QSF example demonstrating web-service load on demand with disabled viewstate will demonstrate the top performance achievable with RadTreeView.  Also the     performance section of the help provides some further insights.

    RadComboBox
    Again performance might degrade with lots of items and lots of combobox instances. This is addressed by using load on demand.

    1.       HTML markup
    RadComboBox renders unordered list for its dropdown which is quite light. This is the least amount of html required to render the dropdown.

    2.       Load on demand
    RadComboBox supports two types of load on demand (with caching of items):

    a.       Web-Service

    b.      Callbacks (ASP.NET 2.0 Callbacks)

    RadMenu
    It supports web service load on demand and lazy initialization (transparent for the user). RadMenu can seamlessly work with disabled ViewState.

    RadTabStrip
    Having lots of page views (inside RadMultiPage) can slow down switching between tabs. Also it generates lots of HTML (because of the controls contained in the pageviews). To tackle this problem we have an online example demonstrating how to load pageviews on demand via AJAX.  The multipage also has a property “RenderSelectedPageOnly” which does exactly what it says. In this case switching to a new page view requires postback.

    RadAjaxManager & RadAjaxPanel
    Performance problems can be caused by large updating areas with lots of HTML (especially tables), JavaScript files, JavaScript components and CSS. More info: http://www.telerik.com/help/aspnet-ajax/ajxclientsideperformance.html

    RadDatePicker, RadDateTimePicker and RadTimePicker

    Performance problems can be caused by using the picker in list controls. An example how to optimize this can be found here:

    http://blogs.telerik.com/VladimirEnchev/Posts/08-07-10/Maximum_performance_with_minimum_output_using_Telerik_RadDatePicker_client-side_API.aspx?ReturnURL=%2fVladimirEnchev%2fPosts.aspx


    RadDateInput, RadNumericInput, RadMaskedTextBox and RadTextBox

    Performance problems can be caused by using these controls in templates of list controls. A better idea is to create an outside edit form similar to this example:

    http://blogs.telerik.com/VladimirEnchev/Posts/08-05-27/Client-side_edit_update_delete_and_insert_with_RadControls_for_ASP_NET_AJAX_WebServices_and_LINQ.aspx?ReturnURL=%2fVladimirEnchev%2fPosts.aspx


    RadToolTip
    RadTooltip RadTooltipManager are quite lightweight and generally there are no problems with performance. However, in templated scenarios the number of tooltip controls on the page can easily go out of hand. We have seen scenarios involving 1000+ tooltips on a single page. Since each of them needs to be initialized on client page load, the system takes a lot of time to do it, especially If <compilation debug=true>. In such scenarios there is a better approach to the tooltips – and that is using a couple of lines of client-side code that will create a tooltip only when the user needs to see it. The following demo demonstrates this approach:
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/RadToolTipManagerClientAPI/DefaultCS.aspx

    RadSplitter
    A brand new mechanism for updating RadSplitter's child controls was introduced that is many times faster than the old one which traversed every single HTML element to test whether it is a RadControl.

    RadScheduler
  • Data-binding: We recommend that customers bind RadScheduler only with appointments that are visible in the currently selected view. This makes performance a non-issue, as the views are limited to a few thousand appointments at maximum.
  • ViewState size: RadScheduler can work entirely without ViewState, if necessary. Customers pay the usual penalty of having to bind the data on each page load. 
  • JavaScript size: The script files are split into several groups that are loaded on demand. Currently the initially loaded script files weight in at 70kB (minified) with 35kB of on-demand scripts.
  • JavaScript $create clause size: Depends on number of appointments. Only visible appointments are sent to the client.
  • JavaScript initialization time: Currently very fast, but can be improved further if the appointment objects are created only when needed.
  • Number of requests: On-demand loading of scripts generates a few additional requests. Other than that, the number is rather low, as skins contain very little number of images. Using RadScriptManager and RadStyleSheetManager reduces the number even further.

    Best regards,
    Ivo Nedkov
    Unit Manager, RadControls for ASP.NET AJAX
    the Telerik team

Reply

  • Sam avatar

    Posted on Sep 9, 2008 (permalink)

    Did anyone have any luck solving this issue? Also do you guys see the CPU going to 50-70% while just moving the mouse on any of the grids? We’re starting to churn clients because of the slowness we’re experiencing. I went through ALL of the tricks and tips above, and I have no luck increasing performance yet.

     Thanks,
    -Sam

    Reply

  • Sebastian Sebastian admin's avatar

    Posted on Sep 10, 2008 (permalink)

    Hello Sam,

    You may also review the following page on our site which elaborates on performance optimization techniques:

    http://www.telerik.com/products/aspnet-ajax/top-performance.aspx

    Additionally, verify that you are using the latest release 2008.2.826 of RadControls for ASP.NET AJAX.

    Best regards,
    Stephen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

    Reply

  • Sam avatar

    Posted on Sep 13, 2008 (permalink)

    I went through all of it and i made some changes to the application, but no luck yet. Could you please take a look at the code for the mulipage and strip and the first grid and let me know if you see something there that might help.

    MultiPageID="MultiPage" SelectedIndex="0"

    OnClientTabSelecting="OnClientTabSelectingHandler" AutoPostBack="True"

    ClickSelectedTab="True">

    <Tabs>

    <telerik:RadTab runat="server" PageViewID="MyTasksPage" Text="My Tasks" Value="MyTasksPage" Selected="True"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="ClientPage" Text="Clients" Value="ClientPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="REOPage" Text="REO" Value="REOPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="TaskPage" Text="Tasks" Value="TaskPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="ExpensePage" Text="Expenses" Value="ExpensePage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="JournalPage" Text="Journals" Value="JournalPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="VendorPage" Text="Vendors" Value="VendorPage" ></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="EscrowCompanyPage" Text="Escrow Companies" Value="EscrowCompanyPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="OfferPage" Text="Offers" Value="OfferPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="ReportPage" Text="Reports" Value="ReportPage"></telerik:RadTab>

    <telerik:RadTab runat="server" PageViewID="" Text="Logout" Value="LogoutPage"></telerik:RadTab>

    </Tabs>

    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="MultiPage" runat="server" SelectedIndex="0" Width="900px"

    RenderSelectedPageOnly="True">

    <telerik:RadPageView ID="MyTasksPage" runat="server" Selected="true">

    <telerik:RadComboBox ID="MyTasksFilterComboBox" runat="server" AutoPostBack="True"

    OnSelectedIndexChanged="MyTasksFilterComboBox_SelectedIndexChanged" Skin="Vista">

    <Items>

    <telerik:RadComboBoxItem runat="server" Text="Open Tasks" ToolTip="My open tasks"

    Value="0" />

    <telerik:RadComboBoxItem runat="server" Text="Completed Tasks" ToolTip="My completed tasks"

    Value="1" />

    <telerik:RadComboBoxItem runat="server" Text="All Tasks" ToolTip="My tasks" Value="2" />

    <telerik:RadComboBoxItem runat="server" Text="Cancelled Tasks" ToolTip="My cancelled tasks"

    Value="3" />

    </Items>

    <ExpandAnimation Type="None" />

    <CollapseAnimation Duration="200" Type="None" />

    </telerik:RadComboBox>

    <asp:Button ID="MyTasksExpandButton" runat="server" CssClass="ButtonStyle" Text="Expand All" /><asp:Button

    ID="MyTasksCollapseButton" runat="server" CssClass="ButtonStyle" Text="Collapse All" />

    <telerik:RadGrid ID="TaskGrid" runat="server" AllowFilteringByColumn="True" AllowSorting="True"

    AutoGenerateColumns="False" DataSourceID="ObjectDataSource_Task" GridLines="None"

    ShowGroupPanel="True" Skin="WebBlue" Style="margin-bottom: 0px">

    <ExportSettings OpenInNewWindow="True">

    <Pdf AllowCopy="True" />

    </ExportSettings>

    <MasterTableView AllowCustomPaging="False" AllowCustomSorting="True" CommandItemDisplay="Top"

    DataKeyNames="TaskID" DataSourceID="ObjectDataSource_Task" EditMode="InPlace"

    GroupLoadMode="Client" GroupsDefaultExpanded="False" Name="TaskGrid" OverrideDataSourceControlSorting="True"

    UseAllDataFields="True">

    <RowIndicatorColumn Visible="False">

    <HeaderStyle Width="20px" />

    </RowIndicatorColumn>

    <ExpandCollapseColumn Resizable="False" Visible="False">

    <HeaderStyle Width="20px" />

    </ExpandCollapseColumn>

    <Columns>

    <telerik:GridBoundColumn DataField="TaskID" DataType="System.Int32" HeaderText="Task ID"

    SortExpression="TaskID" UniqueName="TaskID" Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="LastUpdated" DataFormatString="{0:d}" DataType="System.DateTime"

    HeaderText="Last Updated" SortExpression="LastUpdated" UniqueName="LastUpdated"

    Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="AssignedBy" DataType="System.Int32" HeaderText="Assigned By"

    SortExpression="AssignedBy" UniqueName="AssignedBy" Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="AssignedDate" DataFormatString="{0:d}" DataType="System.DateTime"

    HeaderText="Assigned Date" SortExpression="AssignedDate" UniqueName="AssignedDate"

    Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="REID" DataType="System.Int32" HeaderText="REID"

    SortExpression="REID" UniqueName="REID" Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="EmpID" DataType="System.Int32" HeaderText="EmpID"

    SortExpression="EmpID" UniqueName="EmpID" Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridTemplateColumn GroupByExpression="Name Name Group By Name" HeaderText="Name"

    SortExpression="Name" UniqueName="Name" AllowFiltering="False">

    <ItemTemplate>

    <asp:HyperLink ID="TaskLink" runat="server" ForeColor="Black" Text='<%# Eval("Name") %>'

    ToolTip="Edit this record"></asp:HyperLink></ItemTemplate>

    </telerik:GridTemplateColumn>

    <telerik:GridBoundColumn DataField="TaskCat" HeaderText="Task Cat" SortExpression="TaskCat"

    UniqueName="TaskCat">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="Priority" DataType="System.Int32" Groupable="False"

    HeaderText="Priority" SortExpression="Priority" UniqueName="Priority" Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="StartDate" DataFormatString="{0:d}" DataType="System.DateTime"

    HeaderText="Start Date" SortExpression="StartDate" UniqueName="StartDate">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="DueDate" DataFormatString="{0:d}" DataType="System.DateTime"

    HeaderText="Due Date" SortExpression="DueDate" UniqueName="DueDate">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="PrcComplete" DataType="System.Int32" HeaderText="% Complete"

    SortExpression="PrcComplete" UniqueName="PrcComplete">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="CompletedDate" DataFormatString="{0:d}" DataType="System.DateTime"

    HeaderText="Completed Date" SortExpression="CompletedDate" UniqueName="CompletedDate">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn AllowFiltering="False" DataField="CancelledDate" DataFormatString="{0:d}"

    DataType="System.DateTime" HeaderText="Cancelled Date" SortExpression="CancelledDate"

    UniqueName="CancelledDate" Visible="False">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="ReAddress" GroupByExpression="ReAddress Address Group By ReAddress"

    HeaderText="Address" SortExpression="ReAddress" UniqueName="ReAddress" Visible="true">

    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn AllowFiltering="False" DataField="EmpFullName" HeaderText="Owner"

    SortExpression="EmpFullName" UniqueName="EmpFullName">

    </telerik:GridBoundColumn>

    <telerik:GridTemplateColumn AllowFiltering="False" Groupable="False" HeaderText="Task"

    UniqueName="AddTask">

    <ItemTemplate>

    <asp:HyperLink ID="TaskAddLink" runat="server" ImageUrl="~/Images/AddTask.gif" Text="Task"

    ToolTip="Add a Task">

    </asp:HyperLink>

    <asp:HyperLink ID="CompleteTaskLink" runat="server"

    ImageUrl="~/Images/CompleteTask.png" Text="Complete Task" ToolTip="Complete Task">

    </asp:HyperLink>

    <asp:HyperLink ID="ExpenseAddLink" runat="server" ImageUrl="~/Images/AddExpense.gif"

    Text="Add Expense" ToolTip="Add Expense">

    </asp:HyperLink>

    </ItemTemplate>

    </telerik:GridTemplateColumn>

    <telerik:GridBoundColumn DataField="IsOverDue" DataType="System.Boolean" HeaderText="IsOverDue"

    UniqueName="IsOverDue" Visible="False">

    </telerik:GridBoundColumn>

    </Columns>

    <SortExpressions>

    <telerik:GridSortExpression FieldName="REID" SortOrder="Ascending" />

    </SortExpressions>

    <%

    --<GroupByExpressions>

    <telerik:GridGroupByExpression>

    <SelectFields>

    <telerik:GridGroupByField FieldAlias="REO" FieldName="REAddress" FormatString=""

    HeaderText="REO" />

    </SelectFields>

    <GroupByFields>

    <telerik:GridGroupByField FieldAlias="REO" FieldName="REAddress" FormatString=""

    HeaderText="REO" />

    </GroupByFields>

    </telerik:GridGroupByExpression>

    </GroupByExpressions>--

    %>

    <EditFormSettings EditFormType="Template">

    <FormTemplate>

    </FormTemplate>

    <PopUpSettings ScrollBars="None" Width="500px" />

    </EditFormSettings>

    <CommandItemTemplate>

    </CommandItemTemplate>

    </MasterTableView><GroupingSettings ExpandTooltip=" " GroupByFieldsSeparator="" />

    <ClientSettings AllowDragToGroup="True">

    <Scrolling AllowScroll="True" ScrollHeight="600px" />

    </ClientSettings>

    <FilterMenu EnableTheming="True" Skin="WebBlue">

    <CollapseAnimation Duration="200" Type="OutQuint" />

    </FilterMenu>

    </telerik:RadGrid><asp:ObjectDataSource ID="ObjectDataSource_Task" runat="server"

    OldValuesParameterFormatString="original_{0}" SelectMethod="GetEmpTasks" TypeName="TaskMan">

    <SelectParameters>

    <asp:ProfileParameter Name="_EmpID" PropertyName="UserProfile.EmpID" Type="Int32" />

    <asp:Parameter Name="_Filter" Type="Int32" />

    <asp:Parameter Name="SortExpression" Type="String" />

    </SelectParameters>

    </asp:ObjectDataSource>

    Reply

  • Sebastian Sebastian admin's avatar

    Posted on Sep 16, 2008 (permalink)

    Hello Sam,

    How many items do you display in the grid at once? In case you display large amount of records at once, consider enabling the paging feature of the control to reduce the number of items and allow navigation between different pages. Furthermore, the ObjectDataSource control you assigned for the grid instance allows you to take advantage of its built-in custom paging functionality.

    Alternatively, utilize the virtual paging/scrolling feature of the grid demonstrated here.

    Best regards,
    Stephen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

    Reply

  • Eric Skaggs avatar

    Posted on Mar 26, 2009 (permalink)

    Has anything ever been figured out regarding this?  I'm having issues with this using the Q1 2009 release still.  IE is slow, but almost every other browser out there is not showing any pauses.  Is it an IE-specific issue or some issue with the Telerik control set?

    Eric Skaggs

    Reply

  • PureCode Intermediate avatar

    Posted on Mar 26, 2009 (permalink)

    We suffered from similar issues with the Q2 and Q3 2008 releases (which is when we decided to have a closer look at it).

    Now, since we generate pages on the fly, this may or may not be the issue you are experiencing at all, since we do a LOT of behind-the-scenes work for the generation of the pages.

    Under Internet Explorer 6 and 7, we figured out that the AJAX side of things caused major slow downs just before the 'pageLoad' event got fired within the browser. On very large pages, with a couple of dozen controls (especially the RadEditor and to a lesser extent, RadGrid) AJAX seems to have a real hard time dealing with its $create functionality (which creates the controls on the page, client-side). Internet Explorer has a really slow javascript engine, which we found out when did some 3D rendering using OpenGL for charting purposes, this is done through javascript and a custom '<canvas>' implementation for IE and some other browsers (FireFox, Opera, even Chrome support that tag fine, hell, Chrome is by FAR the fastest with this), resulting in real-time (3D accelerated, if the machine the page is rendered on has a video card that supports this) 3D abilities on said charts. Within Internet Explorer this whole thing is at least 5x slower than FireFox.

    We decided to test this a bit deeper and wrote a very crude 3D engine in javascript (using, again, the custom <canvas> implementation), which was of course entirely software rendering based. Where FireFox, Opera and especially Chrome were rendering the (fairly simple) 3D effects nicely (say, 30 frames per second, 84 in Chromes case), Internet Explorer didn't manage to get over 5 frames per second. Conclusion: Internet Explorers javascript parsing and executing is RIDICULOUSLY slow as compared to other mainstream browsers.

    Taking the sheer size of the Microsoft AJAX javascript as well as the gigantic amount of javascript Telerik controls can use (again, Editor and Grid, plus a few others) can result in a lot of slow down, especially on older computers.

    However, it is stated in this thread that the page is already loaded, so I assume the controls are already visible.

    Perhaps Internet Explorer is simply busy parsing and (where needed) executing the Telerik javascript for all of the Telerik controls on the page but that shouldn't cause 8 seconds of 'freezing' I think, unless the user's PC is real old and slow.

    A second and more likely scenario I can see is another, common, problem going on, data access to the SQL Server (or whichever database server software is used). With LOTS of users working at the same time, this can REALLY kill the actual database server hardware, resources-wise. I can only suggest to monitor the database server hardware, we've seen dozens of cases where apparent web application slowness was being caused by a database server that was just totally bogged down and needed some severe upgrading/replacing/reinstalling, or in a case or two, needed just a simple reboot. Doesn't seem outside the realm of possibility with so many controls on the page. I am assuming here that the majority is databound (especially the grids of course).

    Just my two cents.

    Regards,

    Mike

    Reply

  • Adam Jones avatar

    Posted on Jan 26, 2010 (permalink)

    I just wanted to point out something that I have run into.  I have had the exact same problem as others on this forum with page responsiveness.  I had a page with 2 nested RadTabStrips, 3 RadGrid, 15 RadComboBoxes and 50 RadTextBoxes and the performance was horrible.  I was using Internet Explorer 7 and 8 and the performance was not good at all.  The IExplore.exe would stack up 200MB to 300MB after a couple hours of use.  So I switched the client to using Mozilla Firefox and every single problem went away.  The performance was greatly improved.  No more huge memory allocations, no more page delays (of up to 10 seconds before).  I haven't finished researching but IE definitely loads up something that just hammers the Telerik controls performance.  I even noticed huge performance increases in pages that had few Telerik controls by using Firefox.  Just for reference I am using Q3 2009 controls.

    Thanks,
    Adam

    Reply

  • Sebastian Sebastian admin's avatar

    Posted on Jan 26, 2010 (permalink)

    Hello Adam,

    I think that the performance optimizations discussed further down in this forum thread and replacing the large number of RadTextBoxes with regular MS TextBoxes "inputified" with RadInputManager will help you speed up the loading time as much as possible.

    Kind regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

    Reply

  • Adam Jones avatar

    Posted on Jan 26, 2010 (permalink)

    I went through and removed all RadTextBox and replaced with asp:TextBox and it improved the performance slightly.  I then removed all RadComboBox and replaced with asp:DropDownList and the performance increase was quite noticeable.  I know that it is due to IE's horrific javascript engine that is slowing down the page rendering.  I have some pages that are massive pages built into MRP systems with over 100 Telerik controls on them and they load no problem and extremely fast in Firefox and Chrome but the moment I switch to IE the performance goes south very quickly.  I just deploy everything with Firefox now.

    Adam

    Reply

  • Cindrella avatar

    Posted on Dec 2, 2010 (permalink)

    Hello,

    Telerik controls are new to me...but from since last 2 months i am using them.
    Now I am facing an issue and i tried a lot to resolve it but no success got yet..
    i have a RadTooltipManager, inside it i have asp Dropdownlist when i open Dropdown list it drops outside
    RadTooltipManager window..So how can i restrict Dropdown list not to drop outside radtooltip window(going outside width of radtooltip window).is there is an any way..
    or is there is other rad control which will help to solve this issue

    Thanks,
    Aakansha

    Reply

  • Svetlina Anati Svetlina Anati admin's avatar

    Posted on Dec 8, 2010 (permalink)

    Hi Aakansha,

     The RadComboBox's dropdown is absolute positioned as well as the tooltip and thus what I suggest in your case is to set explicit height for the combo so that it does not go outside the tooltip. This can be done through the Height property as shown in the demo below:

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/loadondemand/defaultcs.aspx

    Best wishes,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

    Reply

    • Q1 Webinar Week

    Back to Top

    Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > General Discussions > Client side performance using a lot of rad controls on one page