RadSplitter with RadGrid

5 posts, 0 answers
  1. Torsten
    Torsten avatar
    13 posts
    Member since:
    Jul 2012

    Posted 14 Mar 2011 Link to this post

    We are facing a performance problem, when using RadGrid in RadSpliiter.

    We have a MasterPage with multiple RadSplitter which should resize with window. Here is the code:

    <body style="margin: 0px; height: 100%; overflow: hidden;" scroll="no">
        <form id="form1" runat="server" style="height: 100%; margin: 0px" method="post">
        <telerik:RadScriptManager runat="server" ID="ScriptManager" ScriptMode="Release">
        <telerik:RadStyleSheetManager runat="server" ID="StyleSheetManager">
        <asp:Panel ID="panel1" runat="server" Width="100%" Height="100%" SkinID="Windows7">
            <telerik:RadSplitter LiveResize="false" ID="RadSplitter1" runat="server" Height="100%"
                Width="100%" Orientation="Horizontal" VisibleDuringInit="false">
                <telerik:RadPane ID="RadPane3" runat="server" Height="50px" Scrolling="none">
                    <hd:Header runat="server" ID="header" />
                <telerik:RadPane ID="RadPane4" runat="server">
                    <telerik:RadSplitter LiveResize="false" ID="ContentSplitter" runat="server">
                        <telerik:RadPane ID="paneMenu" runat="server" Width="220">
                            <telerik:RadSplitter LiveResize="false" runat="server" ID="NavigationsSplitter" Orientation="Horizontal">
                                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="26">
                                    <telerik:RadTextBox ID="RadTextBox4" runat="server" Width="50" />
                                    <telerik:RadButton runat="server" ID="btnNeu" Text="Filtern" CausesValidation="false">
                                        <Icon PrimaryIconCssClass="rbSearch" />
                                <telerik:RadPane runat="server" ID="TreeViewPane">
                                    <ob:Objektbaum runat="server" ID="objektbaum" />
                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
                        <telerik:RadPane ID="paneInhalt" runat="server" Scrolling="None">
                            <telerik:RadSplitter LiveResize="false" runat="server">
                                <telerik:RadPane runat="server" Scrolling="None">
                                    <div class="breadcrumb_header">
                                        <asp:ContentPlaceHolder runat="server" ID="cpHeaderControls" />
                                        <bc:Breadcrumb runat="server" ID="breadcrumb" />
                                    <telerik:RadSplitter LiveResize="false" runat="server">
                                        <telerik:RadPane runat="server" Scrolling="None">
                                            <telerik:RadSplitter LiveResize="false" runat="server" ID="srechts" Orientation="Horizontal">
                                                <telerik:RadPane ID="RadPane2" runat="server">
                                                    <div id="content" class="div_content">
                                                        <asp:ContentPlaceHolder ID="cphHauptInhalt" runat="server">
                                                <telerik:RadSplitBar runat="server" />
                                                <telerik:RadPane ID="paneErrorManagement" runat="server" Height="60" Scrolling="None">
                                                    <cc1:EventViewer ID="EventViewer1" runat="server" EventClassPopupLevel="Error" VisualizeAllEventClassesThreshold="Success">
                                <telerik:RadSplitBar ID="KontextSplitter" runat="server" Width="25" />
                                <telerik:RadPane runat="server" Width="25" Height="25" PersistScrollPosition="true">
                                    <telerik:RadSlidingZone runat="server" ID="szrechts" Width="0" SlideDirection="Left">
                                        <telerik:RadSlidingPane runat="server" ID="sprechts" Width="200" PersistScrollPosition="true"
                                            Height="25" IconUrl="~/images/navigation/ico_kontext.png" Scrolling="None">
                                            <ko:Kontext runat="server" ID="kontext" />

    The performance with only static content for this page is excellent.

    Now we place a RadGrid in main Content (cphHauptInhalt).

    <asp:Content ID="Content2" ContentPlaceHolderID="cphHauptInhalt" runat="server">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <telerik:AjaxSetting AjaxControlID="rgResult">
                        <telerik:AjaxUpdatedControl ControlID="rgResult" LoadingPanelID="RadAjaxLoadingPanel1" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <telerik:RadGrid ID="rgResult" OnNeedDataSource="getDataSource" runat="server" AllowSorting="True">
            <PagerStyle Mode="NumericPages" />
            <MasterTableView TableLayout="Fixed" /> 

    The performance is now very very bad!

    If the grid has only 100 items, it take about 4s to load, with 300 items it takes about 7s and with 700 items it takes 12s. Most of the time (round about 85%) the client works in javascript functions and the cpu is blocked with 100% load. Also if the mouse moves or the client window is resized.

    I think, the performance is down because of the large DOM-Tree.

    Is there a trick or anything to stop javascript calculating the whole DOM? Or is there another reason why it is so slow?
  2. Niko
    Niko avatar
    404 posts

    Posted 16 Mar 2011 Link to this post

    Hi Torsten,

    Please, find attached the sample setup page that I am using to test your case. It is a stripped down version of the code that you provided(the web user controls and the ContentPlaceholder declarations have been removed).
    Using this setup I wasn't able to reproduce the difficulties you are reporting. Nevertheless the data source that I am using is pretty simplistic - only integers. Still the row count is 250, which should be enough to be able to reproduce the issue.

    Please, run the page on you end and let me know of the outcome.

    Best wishes,
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. Torsten
    Torsten avatar
    13 posts
    Member since:
    Jul 2012

    Posted 22 Mar 2011 Link to this post

    The Page you sent was fast enough. It takes round about 5s for 500 items.

    But when I bind my DataSource (664 items) to the grid even this page takes 10s to load. The DataSource contains only strings and integers.

    Do you have any idea why?? Is there a method to test, which function takes so much time?
  4. Torsten
    Torsten avatar
    13 posts
    Member since:
    Jul 2012

    Posted 23 Mar 2011 Link to this post

    I have now disabled all resizing on page to see, if this is the problem. It wasn't.

    So i installed firebug.

    The Summary says:

    Function            Calls    Percent    Own Time            Time                Avg.        Min.            Max.
    _isVisible               42      50.43%     3836.995ms     3837.138ms     91.36ms     0.017ms     771.479ms
    getCurrentStyle     14    1 33.18%     2524.57ms         2524.57ms     17.905ms     0.042ms     818.692ms
    repaint                     3       13.55%     1031.197ms     1031.207ms     343.736ms     0.033ms     1030.416ms

    I think this three functions are the performance killers. Maybe because of this, you could give me a hint, how to solve this problem.
  5. Daniel
    Daniel avatar
    4949 posts

    Posted 25 Mar 2011 Link to this post

    Hello Torsten,

    For your scenario I would recommend that you take advantage of the Virtual Scrolling and Paging functionality.
    Please note that even if you manage to optimize the loading times to a given extent, this will be a partial solution. The problem is that some users use slower computers and older browsers - they would still need a lot of time to display the page.

    Useful resources:
    Top Performance
    Optimizing output, page load time and the overall performance of RadControls for ASP.NET AJAX

    Best regards,
    the Telerik team
Back to Top