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; |
} |
} |
<%@ 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> |