how to improve performance of tan control inside Grid view

[Mogy]

Each Tab Controls inside the grid view takes 20 seconds to load

Please look the below code and let me know how to increase the performance. I have tried ajax to load each tab while onclick still it takes 20 sec to load each tab.


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="ManageLineItems.aspx.cs" Inherits="Crowley.Pricing.Web.LineItems.ManageLineItems"
    EnableEventValidation="false" %>

<%@ Register Src="PricingTabControl.ascx" TagName="PricingTabControl" TagPrefix="uc1" %>
<%@ Register Src="ContactTabControl.ascx" TagName="ContactTabControl" TagPrefix="uc2" %>
<%@ Register Src="CargoTabControl.ascx" TagName="CargoTabControl" TagPrefix="uc3" %>
<%@ Register Src="WarehousingTabControl.ascx" TagName="WarehousingTabControl" TagPrefix="uc4" %>
<%@ Register Src="DomesticTruckingTabControl.ascx" TagName="DomesticTruckingTabControl"
    TagPrefix="uc5" %>
<%@ Register Src="CustomsClearanceTabControl.ascx" TagName="CustomsClearanceTabControl"
    TagPrefix="uc6" %>
<%@ Register Src="AirFreightTabControl.ascx" TagName="AirFreightTabControl" TagPrefix="uc7" %>
<%@ Register Src="HistoryTabControl.ascx" TagName="HistoryTabControl" TagPrefix="uc8" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .viewWrap
        {
            padding: 15px;
            background: #2291b5 0 0 url(../App_Themes/Default/Images/bluegradient.gif) repeat-x;
        }
    </style>
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">

            var loadedTabs = new Array("PricingTab");
            function onTabSelecting(sender, args) {
                var value = args.get_tab().get_value();

                for (var i = 0; i < loadedTabs.length; i++) {
                    if (loadedTabs[i] == value) {
                        args.get_tab().set_postBack(false);
                        return;
                    }
                }
                loadedTabs.push(value);

            }
        </script>
    </telerik:RadScriptBlock>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
    Pricing : Manage Line Items
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <telerik:RadAjaxManagerProxy ID="uxAjaxManager" runat="server" >
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="uxLineItems">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="uxLineItems" LoadingPanelID="uxAjaxLoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
    <div style="overflow-x: auto; overflow-y: Auto; width: 100%; height: 335px; padding: 0 0 20px 0">
        <telerik:RadGrid AllowSorting="true" Width="2700px" ID="uxLineItems" runat="server"
            AllowFilteringByColumn="true" AutoGenerateColumns="false" OnItemCommand="uxLineItems_ItemCommand"
            OnItemCreated="uxLineItems_ItemCreated" OnItemDataBound="uxLineItems_ItemDataBound"
            OnExcelMLExportRowCreated="uxLineItems_ExcelMLExportRowCreated" OnExcelMLExportStylesCreated="uxLineItems_ExcelMLExportStylesCreated">
            <MasterTableView DataKeyNames="ID, Request.ID" GroupLoadMode="Client" CommandItemDisplay="None"
                UseAllDataFields="true">
                <%--<ItemTemplate>
                <table cellspacing="10">
                    <tr>
                        <td><b>Request ID:</b></td>
                        <td><%# Eval("Request.ID") %></td>-
                    </tr>                
                </table>
            </ItemTemplate>--%>
                <%--  <GroupByExpressions>
                    <telerik:GridGroupByExpression>
                        <SelectFields>
                            <telerik:GridGroupByField FieldAlias="Request.RequestID" FieldName="Request.RequestID"></telerik:GridGroupByField>
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="Request.RequestID"></telerik:GridGroupByField>
                        </GroupByFields>
                    </telerik:GridGroupByExpression>
                </GroupByExpressions>--%>
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />
                    <telerik:GridBoundColumn DataField="Request.RequestID" AllowFiltering="true" SortExpression="Request.RequestID"
                        UniqueName="RequestID" HeaderText="Request ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LineItemID" AllowFiltering="True" AllowSorting="false"
                        HeaderText="Line Item" />
                    <telerik:GridBoundColumn DataField="Request.Owner" SortExpression="Request.Owner"
                        UniqueName="Owner" AllowFiltering="true" HeaderText="Owner" ColumnEditorID="EditOwner" />
                    <%--<telerik:GridDropDownColumn AllowSorting="true" AllowFiltering="true" HeaderText="Quote Type" UniqueName="QuoteType"
                                            DataSourceID="QuoteTypeDataSource" DataField="QuoteType.ID" ListTextField="Name" ListValueField="ID" />--%>
                    <telerik:GridTemplateColumn DataField="QuoteType.ID" AllowFiltering="true" HeaderText="Quote Type"
                        UniqueName="QuoteType" SortExpression="QuoteType.ID">
                        <ItemTemplate>
                            <telerik:RadComboBox ID="uxQuoteTypes" runat="server" Width="100px" />
                            <asp:HiddenField ID="uxOriginalQuoteType" runat="server" Value='<%#Eval("QuoteType.ID") %>' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridDateTimeColumn DataField="Request.ReceivedOn" AllowFiltering="false"
                        UniqueName="ReceivedOn" SortExpression="Request.ReceivedOn" HeaderText="Date Received"
                        ItemStyle-Width="120px" />
                    <telerik:GridBoundColumn DataField="Request.CommodityDetails.Commodity.Name" AllowFiltering="true"
                        HeaderText="Commodity" UniqueName="Commodity" SortExpression="Request.CommodityDetails.Commodity.Name" />
                    <telerik:GridTemplateColumn AllowFiltering="true" HeaderText="Assigned To" UniqueName="AssignedTo">
                        <ItemTemplate>
                            <telerik:RadComboBox ID="uxAssignedTo" runat="server" Width="100px"
                             SelectedValue='<%# Eval("AssignedTo") %>'
                                DataSource='<%# Crowley.Pricing.Web.MetadataRepository.GetUsers() %>'
                            >
                            </telerik:RadComboBox>
                            <asp:HiddenField ID="uxOriginalAssignedTo" runat="server" Value='<%#Eval("AssignedTo") %>' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="Status.ID" SortExpression="Status.ID" HeaderText="Status"
                        UniqueName="Status">
                        <ItemTemplate>
                            <telerik:RadComboBox ID="uxStatus" runat="server" Width="150px" SelectedValue='<%# Eval("Status.ID") %>'
                                DataSource='<%# Crowley.Pricing.Web.MetadataRepository.GetStatus() %>' DataTextField="Name"
                                DataValueField="ID" />
                            <asp:HiddenField ID="uxOriginalStatus" runat="server" Value='<%#Eval("Status.ID") %>' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="RoutingDetails.Origin.Location" UniqueName="Origin"
                        AllowSorting="false" AllowFiltering="true" HeaderText="Origin" ItemStyle-Width="135">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="RoutingDetails.Origin.Type.Name" AllowSorting="false"
                        AllowFiltering="true" UniqueName="OriginService" HeaderText="Origin Service"
                        ItemStyle-Width="135" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Origin.ZipCode" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Origin Postal Code" UniqueName="OriginPostalCode"
                        ItemStyle-Width="70" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Origin.Port.Name" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Port of Load" UniqueName="PortofLoad" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Origin.Mode" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Origin Mode" UniqueName="OriginMod" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Origin.Load" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Origin Unload" UniqueName="OriginUnload" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Destination.Location" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Destination" UniqueName="Destination" ItemStyle-Width="135" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Destination.Type.Name" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Destination Service" UniqueName="DestinationService"
                        ItemStyle-Width="135" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Destination.ZipCode" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Destination Postal Code" UniqueName="DestinationPostalCode"
                        ItemStyle-Width="70" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Destination.Port.Name" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Port of Discharge" UniqueName="PortofDischarge" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Destination.Mode" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Dest Mode" UniqueName="DestMode" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.Destination.Load" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Dest Unload" UniqueName="DestUnload" />
                    <telerik:GridBoundColumn DataField="EquipmentSize" SortExpression="EquipmentSize"
                        AllowFiltering="true" HeaderText="Equipment Size" UniqueName="EquipmentSize" />
                    <telerik:GridBoundColumn DataField="EquipmentType" SortExpression="EquipmentType"
                        AllowFiltering="true" HeaderText="Equipment Type" UniqueName="EquipmentType" />
                    <telerik:GridBoundColumn DataField="Request.CommodityDetails.OtherIfNotCommodity"
                        AllowSorting="false" AllowFiltering="true" HeaderText="Equipment Desc (If Other)"
                        UniqueName="EquipmentDesc" />
                    <telerik:GridBoundColumn DataField="Request.CommodityDetails.UNNumbers" AllowSorting="false"
                        AllowFiltering="true" HeaderText="UN Numbers" UniqueName="UNNumbers" ItemStyle-Width="120" />
                    <telerik:GridBoundColumn DataField="Request.CommodityDetails.HazardousClass.Name"
                        AllowSorting="false" AllowFiltering="true" HeaderText="Class" UniqueName="ClassDescription"
                        ItemStyle-Width="150" />
                    <telerik:GridBoundColumn DataField="Request.CommodityDetails.HazardousPackagingGroup.Name"
                        AllowSorting="false" AllowFiltering="true" HeaderText="Packaging Group" UniqueName="PackagingGroup" />
                    <telerik:GridBoundColumn DataField="RoutingDetails.EstimatedWeight" AllowSorting="false"
                        AllowFiltering="true" HeaderText="Est Weight" UniqueName="EstWeight" />
                    <telerik:GridBoundColumn DataField="Request.CommodityDetails.SpecialRequirements"
                        AllowSorting="false" AllowFiltering="true" HeaderText="Special Requirements"
                        UniqueName="SpecialRequirement" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.WarehousingServicesCharge"
                        UniqueName="WarehousingServicesCharge" SortExpression="PricingDetails.WarehousingServicesCharge"
                        HeaderText="Warehousing Services Total" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.DomesticTruckingCharge"
                        UniqueName="DomesticTruckingCharge" SortExpression="PricingDetails.DomesticTruckingCharge"
                        HeaderText="Domestic Trucking Total" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.CustomClearanceCharge"
                        UniqueName="CustomClearanceCharge" SortExpression="PricingDetails.CustomClearanceCharge"
                        HeaderText="Customs Clearance Total" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.AirFreightCharge"
                        UniqueName="AirFreightCharge" SortExpression="PricingDetails.AirFreightCharge"
                        HeaderText="Air Freight Total" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.CargoDetailsCharge"
                        UniqueName="CargoDetailsCharge" SortExpression="PricingDetails.CargoDetailsCharge"
                        HeaderText="Cargo Total" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.OceanTotal" UniqueName="OceanTotal"
                        SortExpression="PricingDetails.OceanTotal" HeaderText="Ocean Total" />
                    <telerik:GridBoundColumn Display="true" DataField="PricingDetails.AdditionalFeesTotal"
                        UniqueName="AdditionalFeesTotal" SortExpression="PricingDetails.AdditionalFeesTotal"
                        HeaderText="Additional Fees Total" />
                    <telerik:GridBoundColumn DataField="PricingDetails.GrandTotal" UniqueName="GrandTotal"
                        SortExpression="PricingDetails.GrandTotal" HeaderText="Grand Total" />
                </Columns>
                <NestedViewTemplate>
             <telerik:RadAjaxManagerProxy runat="server" ID="uxAjaxManager">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="uxRadStripLineItems">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="uxRadStripLineItems" />
                        <telerik:AjaxUpdatedControl ControlID="uxMultiPageLineItems" LoadingPanelID="uxAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="uxMultiPageLineItems">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="uxMultiPageLineItems" LoadingPanelID="uxAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
                    <div style="margin-left: 25px;" class="viewWrap">
                        <%--<asp:Panel ID="uxLineItemSectionContainer" runat="server">--%>
                        <telerik:RadTabStrip ID="uxRadStripLineItems" runat="server" Skin="Default" MultiPageID="uxMultiPageLineItems"
                            SelectedIndex="0" CssClass="tabStrip" OnClientTabSelecting="onTabSelecting" OnTabClick="uxRadStripLineItems_TabClick">
                            <Tabs>
                                <telerik:RadTab Text="Quote" Value="PricingTab" />
                                <telerik:RadTab Text="Contacts" Value="ContactTab" />
                                <telerik:RadTab Text="Cargo Details" Value="CargoTab" />
                                <telerik:RadTab Text="Warehousing" Value="WarehousingTab" />
                                <telerik:RadTab Text="Domestic Trucking" Value="DomesticTruckingTab" />
                                <telerik:RadTab Text="Customs Clearance / Freight Forwarding" Value="CustomsClearanceTab" />
                                <telerik:RadTab Text="Air Freight" Value="AirFreightTab" />
                                <telerik:RadTab Text="History" Value="HistoryTab" />
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage ID="uxMultiPageLineItems" runat="server" SelectedIndex="0"
                            CssClass="multiPage" OnPageViewCreated="uxMultiPageLineItems_PageViewCreated">
                            <telerik:RadPageView ID="PricingTabView" runat="server">
                                <uc1:PricingTabControl ID="uxPricingTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView2" runat="server">
                                <uc2:ContactTabControl ID="uxContactTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView3" runat="server">
                                <uc3:CargoTabControl ID="uxCargoTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView4" runat="server">
                                <uc4:WarehousingTabControl ID="uxWarehousingTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView5" runat="server">
                                <uc5:DomesticTruckingTabControl ID="uxDomesticTruckingTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView6" runat="server">
                                <uc6:CustomsClearanceTabControl ID="uxCustomsClearanceTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView7" runat="server">
                                <uc7:AirFreightTabControl ID="uxAirFreightTabControl" runat="server" />
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView8" runat="server">
                                <uc8:HistoryTabControl ID="uxHistoryTabControl" runat="server" />
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
                        <%--</asp:Panel>--%>
                    </div>
                </NestedViewTemplate>
            </MasterTableView>
            <ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true">
                <Excel Format="ExcelML" />
            </ExportSettings>
            <ClientSettings EnableRowHoverStyle="true" AllowGroupExpandCollapse="True">
                <Scrolling AllowScroll="False" UseStaticHeaders="False" SaveScrollPosition="True">
                </Scrolling>
                <%--  <DataBinding SelectMethod="GetLineItems" Location="http://localhost:6973/PricingService.svc"
                   SortParameterType="String" FilterParameterType="String">
               </DataBinding>--%>
                <Selecting AllowRowSelect="True" />
            </ClientSettings>
        </telerik:RadGrid>
        <%--<asp:Panel ID="uxLineItemSectionContainer" runat="server">--%>
    </div>



    <br clear="all" />
    <div style="width: 100%">
        <asp:Button class="normalbutton" ID="uxSave" runat="server" Text="Submit" OnClick="uxSave_Click" />&nbsp;&nbsp;
        <asp:Button class="button2" ID="uxAddLineItem" runat="server" Text="Add Line Item"
            OnClick="uxAddLineItem_Click" />&nbsp;&nbsp;
        <asp:Button class="button2" ID="uxCopyLineItem" runat="server" Text="Copy Line Item"
            OnClick="uxCopyLineItem_Click" />&nbsp;&nbsp;
        <asp:Button class="button2" ID="uxAddNewRequest" runat="server" Text="Add New Request"
            OnClick="uxAddNewRequest_Click" />&nbsp;&nbsp;
        <asp:Button class="button1" ID="uxViewQuote" runat="server" Text="View Quote" OnClick="uxViewQuote_Click" />
        <asp:Button class="button2" ID="uxExportToExcel" runat="server" Text="Export To Excel"
            OnClick="uxExportToExcel_Click" />
        <%--  <asp:ObjectDataSource ID="LineItemsSource" runat="server"
             SelectMethod="GetLineItems"
             TypeName="Crowley.Pricing.Web.LineItems.ManageLineItems">
         </asp:ObjectDataSource>--%>
    </div>
</asp:Content>

[Pavlina]

Hello Mogy,

To improve the performance, please set RenderSelectedPageOnly = true for RadMultipage, set AutoPostBack = true for the tabstrip and ajaxify the tabstrip and the multipage via RadAjaxManager. Thus you will reduce the loading and rendering time of the page.

Sincerely yours,
Pavlina
the Telerik team