This is a migrated thread and some comments may be shown as answers.

Slow Grid Rendering whe Using AJAX

3 Answers 127 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Ruslan G asked on 14 Sep 2009, 09:05 AM

Hello,

I have a page which contains a grid (1000 cells).
When the page called for the first time, it load in about 0.05 sec, which is good.
Now I need to update the grid every period of time.
I've done so by using radajaxmanager.ajaxrequest. It works fine, but the grid rendering takes about 2 sec, which is bad.
Can any one suggest me how to imporve the grid render time (the period of time browser need to draw the grid ) (grid view state is disabled,I am using paging and cannot go under 10 items, and bandwidth in no factor)?

10x guys.

code behind:

    
              public partial class _Default : System.Web.UI.Page  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        setGridDesign();  
        
                        this.RadGrid1.DataSource = GetDataFromDB();  
        
                    }  
        
                    private void setGridDesign()  
        
                    {  
        
                        this.RadGrid1.AutoGenerateColumns = false;  
        
                        this.RadGrid1.Columns.Clear();  
        
                        this.RadGrid1.Enabled = true;  
        
                        for (int i = 0; i < 100; i++)  
        
                        {  
        
                            GridCheckBoxColumn flightColumn = new GridCheckBoxColumn();  
        
                            flightColumn.HeaderText = i.ToString();  
        
                            flightColumn.UniqueName = i.ToString();  
        
                            flightColumn.ReadOnly = false;  
        
                            this.RadGrid1.Columns.Add(flightColumn);  
        
                        }  
        
                    }  
        
                    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        
                    {  
        
                        GridDataItem dataItem = e.Item as GridDataItem;  
        
                        if (dataItem != null)  
        
                        {  
        
                            for (int i = 0; i < 100; i++)  
        
                            {  
        
                                (dataItem[i.ToString()].Controls[0] as CheckBox).Checked = true;  
        
                                (dataItem[i.ToString()].Controls[0] as CheckBox).Enabled = true;  
        
                            }  
        
                        }  
        
                    }  
        
                    private string[] GetDataFromDB()  
        
                    {  
        
                        string[] dataSource = null;  
        
                        return (dataSource = new string[20]);  
        
                    }  
        
                    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)  
        
                    {  
        
                        setGridDesign();  
        
                        this.RadGrid1.DataSource = GetDataFromDB();  
        
                        this.RadGrid1.DataBind();  
        
                    }  
        
                    DateTime m_ResponseStart = DateTime.Now;  
        
                    DateTime m_ResponseEnd;  
        
                    protected void LabelActionTime_Unload(object sender, EventArgs e)  
        
                    {  
        
                        this.m_ResponseEnd = DateTime.Now;  
        
                        (sender as Literal).Text += (this.m_ResponseEnd - this.m_ResponseStart).TotalSeconds;  
        
                    }  
        
                }

aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <script language="javascript" type="text/javascript">  
        
                        var g_RenderingStartTime = new Date();  
        
                        var g_RenderingEndTime = null;  
        
                </script> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager OnAjaxRequest="RadAjaxManager1_AjaxRequest"   
        
                ClientEvents-OnRequestStart="RadAjaxManager1_AjaxRequest_RequestStart"   
        
                ClientEvents-OnResponseEnd="RadAjaxManager1_AjaxRequest_ResponseEnd"   
        
                ID="RadAjaxManager1"   
        
                runat="server"   
        
                DefaultLoadingPanelID="RadAjaxLoadingPanel1">  
        
                <AjaxSettings > 
        
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">  
        
                </telerik:RadAjaxLoadingPanel> 
        
                <div> 
        
                       <telerik:RadGrid EnableViewState="false" AllowSorting="false"  PageSize="10"   
        
                            AllowPaging="true"   ID="RadGrid1"   
        
                            runat="server" style="margin-left:auto;margin-right:auto;" 
        
                             Width="100%" OnItemDataBound="RadGrid1_ItemDataBound" 
        
                            HeaderStyle-Wrap="false"  > 
        
                            <HeaderStyle Width="60px"  /> 
        
                            <PagerStyle  Mode="NextPrev" AlwaysVisible="true" /> 
        
                            <MasterTableView TableLayout="Fixed">  
        
                            </MasterTableView> 
        
                            <PagerStyle Mode="NextPrev" /> 
        
                        </telerik:RadGrid> 
        
                </div> 
        
                <telerik:RadCodeBlock runat="server">  
        
                       <asp:Literal runat="server" EnableViewState="false" ID="LabelActionTime" Text="Page cycle: "   
        
                    OnPreRender="LabelActionTime_Unload"></asp:Literal>    
        
                    Client Render time: <div id="clientRenderTime"></div> 
        
                <script language="javascript" type="text/javascript">  
        
                    function RadAjaxManager1_AjaxRequest_ResponseEnd(i_sender, i_args) {  
        
                        g_RenderingEndTime = new Date();  
        
                        writeclientRenderTime()  
        
                    }  
        
                    function RadAjaxManager1_AjaxRequest_RequestStart(i_sender, i_args) {  
        
                        g_RenderingStartTime = new Date();  
        
                    }  
        
                    function MillisecondsToDuration(n) {  
        
                        var hms = "";  
        
                        var dtm = new Date();  
        
                        dtm.setTime(n);  
        
                        var h = "000" + Math.floor(n / 3600000);  
        
                        var m = "0" + dtm.getMinutes();  
        
                        var s = "0" + dtm.getSeconds();  
        
                        var cs = "0" + Math.round(dtm.getMilliseconds() / 10);  
        
                        hhms = h.substr(h.length - 4) + ":" + m.substr(m.length - 2) + ":";  
        
                        hms += s.substr(s.length - 2) + "." + cs.substr(cs.length - 2); return hms;  
        
                    }  
        
                    function writeclientRenderTime() {  
        
                        var div = $get("clientRenderTime");  
        
                        div.innerHTML = MillisecondsToDuration(g_RenderingEndTime.getTime() - g_RenderingStartTime.getTime());  
        
                    }  
        
                    function updateGrid() {  
        
                        var grid = $get("<%= RadGrid1.ClientID %>");  
        
                        grid.disabled = true;  
        
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");  
        
                        ajaxManager.ajaxRequest( "Refresh");  
        
                    }  
        
                    var g_IntervalID = null;  
        
                    function setRefreshTableIntrval() {  
        
                        g_IntervalID = setInterval("updateGrid()", 6000);  
        
                    }         
        
                    function clearRefreshTableIntrval() {  
        
                        clearInterval(g_IntervalID);  
        
                    }  
        
                    // setaddNewUserIntrval();  
        
                    setRefreshTableIntrval();  
        
                   // setaddNewFlightIntrval();  
        
                    g_RenderingEndTime = new Date();  
        
                    writeclientRenderTime();  
        
                </script> 
        
                    </telerik:RadCodeBlock> 
        
                </form> 
        
            </body> 
        
            </html>

Slow Grid Rendering whe Using AJAX

3 Answers, 1 is accepted