Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadGrid takes along time to load...

1 Answer 168 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ajay Gandhi
Top achievements
Rank 1
Ajay Gandhi asked on 16 Aug 2010, 04:22 PM
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If (Not IsPostBack) Then
    End If
End Sub
Private Sub LoadEPTexts(ByVal sChapters As String, ByVal sStandards As String, ByVal sEPs As String)
    Try
        Me.rgEPText.DataSource = ListEPTextByChapterAndStandard(sChapters, sStandards, sEPs, 2)
        Me.rgEPText.DataBind()
    Catch ex As Exception
        Throw ex
    End Try
End Sub
Private Sub rgEPText_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rgEPText.ItemDataBound
    If (e.Item.ItemType = GridItemType.Item Or e.Item.ItemType = GridItemType.AlternatingItem) Then
        Dim item As GridDataItem = CType(e.Item, GridDataItem)
        If (CInt(item("ReleaseId").Text) <> 2) Then
            item("StatusIndicator").Text = String.Empty
        End If
    End If
End Sub
Protected Function FormatText(ByVal s As String) As String
    Try
        If (s.Length > 210) Then
            Return s.Substring(0, 209) & "..."
        Else
            Return s
        End If
    Catch ex As Exception
        Throw ex
    End Try
End Function
Private Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
    Me.LoadEPTexts("<Chapters> <Chapter id='54'/> </Chapters>", "", "")
End Sub

 

 

<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
  
        function GridCreated(sender, args) {
            var scrollArea = sender.GridDataDiv;
            var dataHeight = sender.get_masterTableView().get_element().clientHeight;
            if (dataHeight < 350) {
                scrollArea.style.height = dataHeight + 17 + "px";
            }
        }
    </script>
</telerik:RadCodeBlock> 
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.2.713.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.2.713.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.2.713.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnSubmit">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rgEPText" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>         
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>    
  
   
    <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="WebBlue">
    </telerik:RadSkinManager>
    <div>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<telerik:RadGrid ID="rgEPText" runat="server" AllowSorting="False" AllowFilteringByColumn="false" AllowPaging="False" AutoGenerateColumns="false" 
    AlternatingItemStyle-HorizontalAlign="Center" AlternatingItemStyle-VerticalAlign="Top" ItemStyle-VerticalAlign="Top" 
    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowMultiRowSelection="false">
        <HeaderStyle Font-Names="Arial" />
        <ItemStyle Font-Names="Arial" />
        <AlternatingItemStyle Font-Names="Arial" />
        <MasterTableView DataKeyNames="EPTextId,StdReleaseId">
            <Columns>
                <telerik:GridBoundColumn DataField="StandardId" Visible="false" UniqueName="StandardId" />
                <telerik:GridBoundColumn DataField="EPTextId" Visible="false" UniqueName="EPTextId" />
                <telerik:GridBoundColumn DataField="StdReleaseId" Visible="false" UniqueName="ReleaseId" />
                <telerik:GridBoundColumn DataField="StandardCycleId" Visible="false" UniqueName="StandardCycleId" />
                <telerik:GridBoundColumn HeaderText="Release" DataField="ReleaseDate" HeaderTooltip="Release Date: Shows the most recent modified date of the EP text" DataFormatString="{0:d}" UniqueName="ReleaseDate" HeaderStyle-Width="50px" ItemStyle-Width="50px" />
                <telerik:GridBoundColumn HeaderText="Status" DataField="StatusIndicator" 
                        HeaderTooltip="Status Indicator: Shows the status (D:Closed, N:New, M:Modified) of the EP text" 
                        UniqueName="StatusIndicator"
                        HeaderStyle-Width="40px" ItemStyle-Width="40px" />
                <telerik:GridBoundColumn DataField="ProgramId" Visible="false" UniqueName="ProgramId" />
                <telerik:GridBoundColumn DataField="ChapterId" Visible="false" UniqueName="ChapterId" />
                <telerik:GridBoundColumn HeaderText="Prg" DataField="ProgramCode" HeaderTooltip="Program: Shows the program the EP text belongs to" UniqueName="Program"  HeaderStyle-Width="30px" ItemStyle-Width="30px"/>
                <telerik:GridBoundColumn HeaderText="Standard"  DataField="StandardLabel" HeaderTooltip="Standard Label: Shows the standard label" UniqueName="StandardLabel" HeaderStyle-Width="85px" ItemStyle-Width="85px" />
                <telerik:GridBoundColumn HeaderText="EP"  DataField="EPLabel" HeaderTooltip="EP: Shows the label for the EP Text" UniqueName="EPLabel" HeaderStyle-Width="20px" ItemStyle-Width="20px" />
                <telerik:GridBoundColumn DataField="ProjectId" Visible="false" UniqueName="ProjectId" />
                <telerik:GridTemplateColumn HeaderText="Element of Performance Text" AllowFiltering="false" HeaderTooltip="Element of Performance Text: Shows the EP text" ItemStyle-HorizontalAlign="Left">
                    <ItemTemplate>
                        <asp:Label ID="lblText" runat="server" Text='<%# FormatText(DataBinder.Eval(Container.DataItem, "EPText")) %>' ></asp:Label>
                        <telerik:RadBinaryImage ID="imgEP" runat="server" ImageUrl="~/Images/c.gif" ToolTip="Indicates that the COP-EP relation exists" Visible='<%# DataBinder.Eval(Container.DataItem, "copfl") %>' />
                        <telerik:RadBinaryImage ID="imgHT" runat="server" ImageUrl="~/Images/h.gif" ToolTip="Indicates that the history tracking exists" Visible='<%# DataBinder.Eval(Container.DataItem, "htfl") %>' />
                        <telerik:RadBinaryImage ID="imgAddendum" runat="server" ImageUrl="~/Images/a.gif" ToolTip="Indicates that the addendum exists" Visible='<%# DataBinder.Eval(Container.DataItem, "adnfl") %>' />
                    </ItemTemplate>                                    
                </telerik:GridTemplateColumn>                    
            </Columns>
            <NoRecordsTemplate>
                <div style="padding:5px;height:50px;text-align:center;vertical-align:middle;">
                    Please select valid EP's !!!
                </div>
            </NoRecordsTemplate>                    
        </MasterTableView>
        <ClientSettings EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="True"></Selecting>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
    </telerik:RadGrid>    
    </div>
    </form>
</body>
</html>

I have this radgrid on my page that takes a long time to load. when i debugged i found that, it retrieves the data(990 rows to be exact) from the database in about 4 seconds, but then when it hits the line where it binds the data to the grid it takes more than 20 seconds. On average for the grid to load the data it takes 35 seconds. Could you please help me as soon as possible? Our users are complaining and i am not able to comeup witha  solution on this one.

Thank you.
- Ajay

1 Answer, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 18 Aug 2010, 11:17 AM
Hi Ajay,

Usually, limiting the number of rows/columns has the most impact on the performance. I suggest that you go through the following links which explains about tips to optimize RadGrid performance.
http://www.telerik.com/help/aspnet/grid/grdviewstatereductiontechniques.html
http://www.telerik.com/products/aspnet-ajax/resources/top-performance.aspx
http://www.telerik.com/support/aspnet-ajax.aspx (Section "Performance")

Moreover, you can examine the demos from the 'Performance' section of the RadGrid QSF which apply those methods in reality:
http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx

I hope this information helps.

Regards,
Pavlina
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
Tags
Grid
Asked by
Ajay Gandhi
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Share this question
or