Header Context Menu very slow

[ethan]

Hello,
I have an application that allows user to choose their own page size, up to 100 rows per page.
When a user chooses such a large page size and then attempts to remove columns via the Header Context Menu, the grid is very slow to re-paint itself (~3 min in IE7).
Are there any optimizations that are possible to decrease this time??

Thanks!
ethan

[Terry Webster]

I think that I have encountered this problem before.  If I remember correctly, it is associated with which skin is being used.  The more complex the skin is, the slower the repaint is.

I did not get a good answer from Telerik on how to speed it up other than to reduce the amount of style being applied to the grid.

[Sebastian]

Hello guys,

Do you experience this slow-down using the latest release Q2 2009 of RadControls for ASP.NET AJAX? Furthermore, can you please specify how many columns you display in the control and whether you enabled scrolling and static headers/frozen columns in this case? This can help me determine the bottleneck in the performance in this case and advice you how to address it.

I will also appreciate if you provide a live url where the delayed grid repaint can be observed and troubleshoot further.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ethan]

Hi Sebastian,
We are using the product version 2009.01.0402.35 which I believe is 2009 Q1 SP1.

Here is the skin information from the grid we are seeing the slowness:

<telerik:RadGrid skinID="ProductGrids"
    AutoGenerateColumns="false"
    ShowGroupPanel="false"
    AllowPaging="true"
    AllowSorting="true"
    PageSize="15"
    EnableEmbeddedSkins="false"
    PagerStyle-Position="Bottom"
    AllowMultiRowSelection="true"
    PagerStyle-AlwaysVisible="false"
    Height="100%"
    width="100%"
    runat="server" >
    <ClientSettings
        AllowDragToGroup="true"
        AllowColumnsReorder="true"
        Resizing-AllowColumnResize="true"
        ColumnsReorderMethod="Reorder"
        EnableRowHoverStyle="true"
        Selecting-AllowRowSelect="true">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
    <HeaderContextMenu OnClientItemOpened="OnHeaderContextMenuClientItemOpened" OnClientLoad="OnHeaderContextMenuLoaded" />
    <MasterTableView CommandItemDisplay="Top" EnableHeaderContextMenu="true" TableLayout="Auto"/>
</telerik:RadGrid>

And here is an abbreviated version of the grid itself...

<telerik:RadGrid ID="ProductsGrid"
    skinID="ProductGrids"
    runat="server"
    EnableViewState = "true"
    OnNeedDataSource="ProductsGrid_OnNeedDataSource"
    OnItemDataBound="ProductsGrid_OnItemDataBound"
    OnItemCommand="ProductsGrid_OnItemCommand"
    OnGroupsChanging="ProductsGrid_OnGroupsChanging"
    AllowMultiRowSelection= "false"
    OnLoad="ProductsGrid_Load"
    OnItemCreated="RadGrid_ItemCreated"
    >

    <ClientSettings>
        <ClientEvents OnColumnHidden="OnHideColumn" OnColumnShown="OnShowColumn" />
    </ClientSettings>

    <ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="true" />


    <MasterTableView CommandItemDisplay="Top" GroupLoadMode="Client" >

        <CommandItemTemplate>
        <asp:Label cssclass="RadGridTitle" ID="ControlTitle" runat="server" Text="ProductGrid" />
        </CommandItemTemplate>
        <Columns>
           [30 columns here]
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

We do have about 30 columns in this particular grid. About half have their display initially set to 'false' so that the user can use the column picker to choose the columns the want to or don't want to see.

Thanks again for your help!
ethan

[Sebastian]

Hello ethan,

From your code snippets I see that you apply a custom skin for the grid  - can you please check whether removing it temporary makes a difference? You may also compare the performance by applying one of the embedded skins of the control and share the results with us.

Another thing you can test is whether disabling the static headers for the grid or its built-in scrolling mechanism in general alters the behavior you observed.

Kind regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Mark Galbreath]

Sebastian,

I am using 2009.3.1314 with Forest skin and turn static headers on or off makes no difference.  I have a 13-field table with 5,500 records as a DataTable in Application scope resident memory, of which 500 are displayed per page, and it takes 2 minutes to hide or show a column.  This, of course, is not acceptable.

ASPX:

<telerik:RadAjaxManager ID="radAjaxManager1" runat="server" EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="radGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="radContextMenu1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadGrid ID="radGrid1" runat="server"
                        Skin="Forest"
                        AllowFilteringByColumn="true"
                        AllowPaging="true"
                        AllowSorting="true"
                        AllowMultiRowSelection="true"
                        GridLines="None"
                        ShowGroupPanel="true"
                        ShowStatusBar="true"
                        OnNeedDataSource="radGrid1_NeedDataSource"
                        OnLoad = "radGrid1_Load"
                        PageSize="500" Width="95%">

    <MasterTableView AllowMultiColumnSorting="True"
                        AutoGenerateColumns="False"
                        ShowFooter="True">

        <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>

        <ExpandCollapseColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>

        <Columns>
            <telerik:GridBoundColumn UniqueName="_mdep"
                                        DataField="MDEP"
                                        HeaderText="MDEP"
                                        HeaderStyle-HorizontalAlign="Center"
                                        HeaderTooltip="Management Decision Package">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_mdep_desc"
                                        DataField="MDEP_DESC"
                                        HeaderText="MDEP DESCRIPTION"
                                        ItemStyle-HorizontalAlign="Left">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_oa"
                                        DataField="OA"
                                        HeaderText="OA"
                                        HeaderStyle-HorizontalAlign="Center"
                                        HeaderTooltip="Operating Agency">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_oa_desc"
                                        DataField="OA_DESC"
                                        HeaderText="OPERATING AGENCY"
                                        ItemStyle-HorizontalAlign="Left">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_eor"
                                        DataField="EOR"
                                        HeaderText="EOR"
                                        HeaderStyle-HorizontalAlign="Center"
                                        HeaderTooltip="Operating Agency">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_eor_desc"
                                        DataField="EOR_DESC"
                                        HeaderText="ELEMENT OF RESOURCE"
                                        ItemStyle-HorizontalAlign="Left">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_asn"
                                        DataField="ASN"
                                        HeaderText="ASN"
                                        HeaderStyle-HorizontalAlign="Center"
                                        HeaderTooltip="Operating Agency">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_asn_desc"
                                        DataField="ASN_DESC"
                                        HeaderText="ALLOTMENT SERIAL NUMBER"
                                        HeaderStyle-HorizontalAlign="Center"
                                        ItemStyle-HorizontalAlign="Left">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_apc"
                                        DataField="APC"
                                        HeaderText="APC"
                                        HeaderStyle-HorizontalAlign="Center"
                                        HeaderTooltip="Operating Agency">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn UniqueName="_apc_desc"
                                        DataField="APC_DESC"
                                        HeaderText="ACCOUNTING PROCESSING CODE DESCRIPTION"
                                        HeaderStyle-HorizontalAlign="Center"
                                        ItemStyle-HorizontalAlign="Left">
                <HeaderStyle Width="125px" ForeColor="#193300" Font-Bold="true" />
            </telerik:GridBoundColumn>

            <telerik:GridNumericColumn UniqueName="_fy06"
                                        DataField="FY06"
                                        HeaderText="FY06"
                                        HeaderStyle-HorizontalAlign="Center"
                                        AllowFiltering="false"
                                        DataFormatString = "{0:c0}"
                                        Aggregate="Sum">
                <HeaderStyle Width="68px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridNumericColumn>

            <telerik:GridNumericColumn UniqueName="_fy07"
                                        DataField="FY07"
                                        HeaderText="FY07"
                                        HeaderStyle-HorizontalAlign="Center"
                                        AllowFiltering="false"
                                        DataFormatString = "{0:c0}"
                                        Aggregate="Sum">
                <HeaderStyle Width="68px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridNumericColumn>

            <telerik:GridNumericColumn UniqueName="_fy08"
                                        DataField="FY08"
                                        HeaderText="FY08"
                                        HeaderStyle-HorizontalAlign="Center"
                                        AllowFiltering="false"
                                        DataFormatString = "{0:c0}"
                                        Aggregate="Sum">
                <HeaderStyle Width="68px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridNumericColumn>

            <telerik:GridNumericColumn UniqueName="_fy09"
                                        DataField="FY09"
                                        HeaderText="FY09"
                                        HeaderStyle-HorizontalAlign="Center"
                                        AllowFiltering="false"
                                        DataFormatString = "{0:c0}"
                                        Aggregate="Sum">
                <HeaderStyle Width="68px" ForeColor="#193300" Font-Bold="true"  />
            </telerik:GridNumericColumn>
        </Columns>
        <PagerStyle Mode="NextPrevAndNumeric" />
    </MasterTableView>
    <ClientSettings AllowColumnsReorder="true"
                     AllowDragToGroup="true"
                     AllowColumnHide="true"
                     AllowExpandCollapse="true"
                     EnableRowHoverStyle="true">
        <Resizing AllowColumnResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="true" />
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="False" />
        <ClientEvents OnColumnContextMenu="ColumnContextMenu" />
    </ClientSettings>
</telerik:RadGrid>

<telerik:RadContextMenu ID="radContextMenu1" runat="server" Skin="Forest" OnClientItemClicked="ClientItemClicked">
    <Items>
        <telerik:RadMenuItem Text="Show Column">
            <Items>
                <telerik:RadMenuItem Text="MDEP" />
                <telerik:RadMenuItem Text="MDEP Description" />
                <telerik:RadMenuItem Text="OA" />
                <telerik:RadMenuItem Text="OA Description" />
                <telerik:RadMenuItem Text="EOR" />
                <telerik:RadMenuItem Text="EOR Description" />
                <telerik:RadMenuItem Text="ASN" />
                <telerik:RadMenuItem Text="ASN Description" />
                <telerik:RadMenuItem Text="APC" />
                <telerik:RadMenuItem Text="APC Description" />
                <telerik:RadMenuItem Text="FY06" />
                <telerik:RadMenuItem Text="FY07" />
                <telerik:RadMenuItem Text="FY08" />
                <telerik:RadMenuItem Text="FY09" />
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Hide Column" />
    </Items>
    <Targets>
        <telerik:ContextMenuTagNameTarget TagName="thead" />
    </Targets>
</telerik:RadContextMenu>

JavaScript:

<telerik:RadScriptBlock ID="radScriptBlock1" runat="server">
    <script type="text/javascript">
         var activeTable;
         var colIndex;
         ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         ///
         ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        function ColumnContextMenu( sender, eventArgs ) {
            activeTable = $find( "<%= radGrid1.ClientID %>" ).get_masterTableView();
            colIndex = GetRealCellIndex( activeTable, eventArgs.get_gridColumn().get_element());
        }

        ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        ///
        ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        function GetRealCellIndex( tableView, cell ) {
            for( var i = 0; i < tableView.get_columns().length; i++ ) {

                if( tableView.get_columns()[ i ].get_element() == cell ) {
                    return i;
                }
            }
        }

        ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        ///
        ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        function ClientItemClicked( sender, eventArgs ) {
            switch( eventArgs.get_item().get_text() ) {
                case "MDEP" :
                    activeTable.showColumn( 0 );
                    break;

                case "MDEP Description" :
                    activeTable.showColumn( 1 );
                    break;

                case "OA" :
                    activeTable.showColumn( 2 );
                    break;

                case "OA Description" :
                    activeTable.showColumn( 3 );
                    break;

                case "EOR" :
                    activeTable.showColumn( 4 );
                    break;

                case "EOR Description":
                    activeTable.showColumn( 5 );
                    break;

                case "ASN":
                    activeTable.showColumn( 6 );
                    break;

                case "ASN Description":
                    activeTable.showColumn( 7 );
                    break;

                case "APC":
                    activeTable.showColumn( 8 );
                    break;

                case "APC Description":
                    activeTable.showColumn( 9 );
                    break;

                case "FY06":
                    activeTable.showColumn( 10 );
                    break;

                case "FY07":
                    activeTable.showColumn( 11 );
                    break;

                case "FY08":
                    activeTable.showColumn( 12 );
                    break;

                case "FY09":
                    activeTable.showColumn( 13 );
                    break;

                case "Hide Column" :
                    activeTable.hideColumn( colIndex );
                    break;

                default :
                    break;
            }
        }

        ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        /// <summary>
        /// btnRestore click event handler makes all columns
        /// visible.
        /// </summary>
        ///~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        function RestoreColumns() {
            var grid = $find( "<%=radGrid1.ClientID %>" );

            for( var i = 0; i < grid.get_masterTableView().get_columns().length; i++ ) {
                grid.get_masterTableView().showColumn( i );
            }
        }

    </script>
</telerik:RadScriptBlock>

Code-Behind:

protected void radGrid1_Load( object source, EventArgs e ) {
    if( Application.Get( "rawData" ) == null ) {
        DataTable dt = new DataTable();

        try {
            dt = daoStanfins.getRawData();
            Application.Add( "rawData",  dt );

        } catch( HttpException ex ) {
            radAjaxManager1.Alert( "Oops! " + Environment.NewLine + ex.Message );

        } finally {
            dt.Dispose();
        }
    }

    radGrid1.DataSource = ( DataTable ) Application.Get( "rawData" );
}

protected void radGrid1_NeedDataSource( object source, GridNeedDataSourceEventArgs e) {
    radGrid1.DataSource = ( DataTable ) Application.Get( "rawData" );
}

Is there a bug in the ContextMenu?  I sure can't use it as it is.

Cheers!
Mark

[Mark Galbreath]

I just discovered (by accident) that the context menu has been internalized in RadGrid since version ???.  Anyway, I EnableHeaderContextMenu="true" and removed the RadContextMenu tags and the associated JavaScript.  And while I love the look and feel of the built-in control, it must be using the same sort algorithm because it is just as slow.  When I reduced the number of records per page to 50, the latency was reduced to about 2 seconds.  Me thinks a different algorithm needs to be found for this control.

Cheers!
Mark

[Sebastian]

Hello Mark,

When you render 13 columns and 500 items at once in the grid table, you may experience partial slow-down in the loading time. The reason for it is because large amount of html and javascript has to be parsed/evaluated by the browser. The result you experience when you perform operation through the header context menu or through the grid itself should be pretty much the same.

To optimize the performance as much as possible, consider reducing the number of the rows in the control displayed simultaneously (as you already found out) or limit the number of columns as much as possible. Alternatively, consider implementation virtual scrolling as presented on this demo. I hope these solutions are applicable for your scenario.

Regards,
Sebastian
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Galbreath]

Thanks for the response and the information, Sebastian.

Cheers!
Mark