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

Slow Grid Rendering whe Using AJAX

3 Answers 81 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Ruslan G
Top achievements
Rank 1
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> 
 

3 Answers, 1 is accepted

Sort by
0
Vlad
Telerik team
answered on 14 Sep 2009, 01:48 PM
Hi Ruslan G,

You can try client-side binding to web service or page method. Please check this demo for more info:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx

Greetings,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Ruslan G
Top achievements
Rank 1
answered on 14 Sep 2009, 02:12 PM
10x for the help.

The problem is the grid's number of columns is dynamic.
Is it possible to build a grid from scrath at client side (similar to what I do on server) :

1.build the grid's columns collection.
2.build the  grid's  rows collection.
3.fill the grid's  data in between cols*rows .

10x.
0
Sebastian
Telerik team
answered on 17 Sep 2009, 08:19 AM
Hi Ruslan,

This is not possible since RadGrid is ASP.NET server control and cannot be instantiated purely on the client. You can build the grid either declaratively or programmatically on the server and then bind it on the client as suggested by Vlad.

Greetings,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Ajax
Asked by
Ruslan G
Top achievements
Rank 1
Answers by
Vlad
Telerik team
Ruslan G
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or