Grid View Extender Control

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Grid View Extender Control

Shortcuts

Previous Next

Grid View Extender Control

Last post 10-11-2007 5:51 AM by tal88. 11 replies.

Sort Posts:

Grid View Extender Control

09-30-2007, 5:47 PM

Contact

12 point Member
tal88
Member since 08-21-2007, 5:12 AM
Posts 143

Hi,

I want to build an extender control to the GridView web server control.

The GridView will hold data which is rapidly changed, therefore im searching for an efficient way to refresh data on the table. (refresh every 30 seconds for example).

(I don't want to use the update panel control because it returns the HTML tags of that updated part. performance and network bandwidth is a concern.)

I will use in my web application alot of GridView controls so I would like to find a generic solution.

any ideas?

Thanks,

Tal88

Re: Grid View Extender Control

10-01-2007, 3:52 PM

Contact

2,794 point Contributor
ysw
Member since 06-15-2007, 4:32 PM
Ukraine
Posts 515

Hi,

Assuming that your ViewState is very small you can use DataItems (see ScriptManager.RegisterDataItem) to trasnfer data from the server to client.

This way you can implement GridView extender which updates GridView <table> inplace in browser page.

-yuriy
http://weblogs.asp.net/ysolodkyy

Re: Grid View Extender Control

10-05-2007, 6:11 AM

Contact

Answer

30,816 point All-Star
Jonathan Shen – MSFT
Member since 06-18-2007, 8:44 AM
Posts 3,401

Hi Tal88,

If you are very care about the performance, I have another suggestion. We generate the HTML Table programmatically instead of using GriewView. Then we don't need to refresh our page by using WebService. The client will call the WebService and show the returned the value every 30 seconds. The returned value is a Jason object.

Here is the sample to call WebService on the client . This sample is written by Jeffery zhao.

 <form id="form1" runat="server">
		<asp:ScriptManager ID="ScriptManager1" runat="server">
			<Services>
				<asp:ServiceReference Path="DataTableService.asmx" InlineScript="true" />
			</Services>
		</asp:ScriptManager>
		
		<input type="button" value="Get DataTable" onclick="getDataTable();" />
		
		<div id="result"></div>
		
		<script language="javascript" type="text/javascript">
			function getDataTable()
			{
				DataTableService.GetDataTable(onSucceeded, onFailed);
			}
			
			function onSucceeded(result)
			{
				// alert(result);
			}
			
			function onFailed(error)
			{
				alert(error.get_message());
			}
		</script>
                   </form>

Hope this helps.

Best regards,

Jonathan

Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Grid View Extender Control

10-07-2007, 4:47 PM

Contact

12 point Member
tal88
Member since 08-21-2007, 5:12 AM
Posts 143

Hi,

Thanks for the reply :-)

can I use a web server timer control that on tick event check if any data displayed on the table should be updated (the table displays stock info)

if there was a change register DataItem.

then the callback javascript function can update the relevant row or cell that should be refreshed?

I think it can also be done with a PageMethod called in Timer_Tick event where the OnSucceed callback wil update the relevant row.

is it also a good solution?

Thanks,

Tal88

Re: Grid View Extender Control

10-07-2007, 4:52 PM

Contact

12 point Member
tal88
Member since 08-21-2007, 5:12 AM
Posts 143

Hi,

Thanks for your reply, do you have an example of how to work with the returned json object.

(how can update my HTML table eith the returned jason object?)

Thanks,

Tal88

Re: Grid View Extender Control

10-07-2007, 10:06 PM

Contact

30,816 point All-Star
Jonathan Shen – MSFT
Member since 06-18-2007, 8:44 AM
Posts 3,401

Hi Tal88,

tal88:
can I use a web server timer control that on tick event check if any data displayed on the table should be updated (the table displays stock info)

Yes, certainly. But I would prefer a Javascript function which is executed on the client only. Timer will post back every time.

tal88:
do you have an example of how to work with the returned json object.

WebService:

"C#" Class="DataTableService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Data;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class DataTableService  : System.Web.Services.WebService
{
    [WebMethod]
    public DataTable GetDataTable()
	{
		DataTable dt = new DataTable();
		dt.Columns.Add(new DataColumn("ID", typeof(int)));
		dt.Columns.Add(new DataColumn("Text", typeof(string)));

		Random random = new Random(DateTime.Now.Millisecond);
		for (int i = 0; i < 10; i++)
		{
			dt.Rows.Add(i, random.Next().ToString());
		}

		return dt;
    }

}

Aspx:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>JavaScriptConverter Usage</title>
</head>
<body>
    <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="DataTableService.asmx" InlineScript="true" />
</Services>
</asp:ScriptManager>

<input type="button" value="Get DataTable" onclick="getDataTable();" />

<div id="result"></div>

<script language="javascript" type="text/javascript">
function getDataTable()
{
DataTableService.GetDataTable(onSucceeded, onFailed);
}

function onSucceeded(result)
{
// alert(result);
var sb = new Sys.StringBuilder("<table border='1'>");
sb.append("<tr><td>ID</td><td>Text</td></tr>");
for (var i = 0; i < result.rows.length; i++)
{
sb.append(
String.format(
"<tr><td>{0}</td><td>{1}</td></tr>",
result.rows[i]["ID"],
result.rows[i].Text));
}
sb.append("</table>");

$get("result").innerHTML = sb.toString();
}

function onFailed(error)
{
alert(error.get_message());
}
</script>
    </form>
</body>
</html>

Hope this helps.

Best regards,

Jonathan

Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Grid View Extender Control

10-08-2007, 2:51 AM

Contact

12 point Member
tal88
Member since 08-21-2007, 5:12 AM
Posts 143

Hi,

Thanks for the reply,

since I would like to check if there was a chage in the table every 30 sec but don't want to re-render the whole table if there wasn't any change,

I can use two UpdatePanels, one of them will contain the GridView , the second will contain the ajax Timer. on tick event

it will check if the table needs to be updated. if data on GridView needs to be refreshed call the Update method of UpdatePanel.

what do you think about this solution?

Thanks,

Tal

Re: Grid View Extender Control

10-08-2007, 5:19 AM

Contact

12 point Member
tal88
Member since 08-21-2007, 5:12 AM
Posts 143

Hi,

I tried to call your web service GetDataTable() from java script as you suggested but got the following error:

A circular reference was detected while serilizing an object of type 'System.Reflection.Module'

how can i solve this?

Thanks,

Tal

Re: Grid View Extender Control

10-09-2007, 10:03 PM

Contact

30,816 point All-Star
Jonathan Shen – MSFT
Member since 06-18-2007, 8:44 AM
Posts 3,401

Hi Tal88,

tal88:

since I would like to check if there was a chage in the table every 30 sec but don't want to re-render the whole table if there wasn't any change,

I can use two UpdatePanels, one of them will contain the GridView , the second will contain the ajax Timer. on tick event

it will check if the table needs to be updated. if data on GridView needs to be refreshed call the Update method of UpdatePanel.

Use UpdatePanel in your situation is a easy way, but not a efficient solution.If we care much about the perfermance, WebService is preferred.

UpdatePanel posts back all the elements include the ViewState and returns all but only refresh the content inside the UpdatePanel. So I don't think we should add two UpdatePanels.

Now ,I think the best way is use WebService + UpdatePanel. WebService will check whether there's something new should be rendered to the client. It will return ture or false. If true , we force the UpdatePanel be refreshed by using doPostBack("UpdatePanel.ClientID",''); Otherwise , we don't need to update its content.So in this solution, the UpdatePanel refreshes only when it need to be instead of every 30 second.