Slow Grid Rendering whe Using AJAX

4 posts, 0 answers
  1. Ruslan G
    Ruslan  G avatar
    6 posts
    Member since:
    Oct 2012

    Posted 14 Sep 2009 Link to this post


    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> 
     
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 14 Sep 2009 Link to this post

    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.
  3. Ruslan G
    Ruslan  G avatar
    6 posts
    Member since:
    Oct 2012

    Posted 14 Sep 2009 Link to this post

    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.
  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 17 Sep 2009 Link to this post

    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.
Back to Top