Returning data from ASP.net to an ExtJS Grid

Question

I've been given a prototype/mockup of a grid written in html and javascript (via ExtJS) that I now need to implement within an ASP.net web application. Does anyone have any pointers as to how to pass data to the grid (to a GroupingStore, specifically).

I'd rather not have a proliferation of web services or helper pages returning XML/JSON so if there's a way to use Client callbacks or Page Methods (Can't you tell I'm not particularly familiar with either - buzzword bingo!) or somesuch, that would be preferred.

Please, no recommendations that I use jQuery, the built-in ASP.net grid, or any other UI framework. The use of the ExtJS grid has been mandated by the powers that be, so that's the grid I'm using, for better or worse :)

Answer 1

I believe a service that simply returns json structures for your pages is the best option, nicely abstracted and reusable across the application rather than page methods.

Answer 2

Here's a low tech solution. It doesn't require use of web services or any other additional technologies.

Step 1

Have an ASPX page that takes one paramter, and invoked like this:

http://mysite.com/query.aspx?sql=select * from orders where status = 'open'

Step 2

In the code behind, do something like this

void Page_Load(object sender, EventArgs e)
{
   Response.ContentType="text/json"; 
   DataTable contents = ExecuteDataTable(Request["sql"]);
   Response.Write( JRockSerialize( contents ) );
   Response.End();
}

You can use JRock for serializing a data table to JSON. IMHO this gives the cleanest JSON.

So that's getting DataTable to JSON sorted...

WARNING: This is obviously a simplistic example. You shouldn't pass SQL on the query string as it is not secure (your could use named queries and parameters instead).

Step 3

In your ExtJS code, create a grid with Json datastore as shown in this Ext example. Set the data store url: to that of your query.aspx page with appropriate query string parameters.

You'll also need to set the columns up for the grid, again shown in the ExtJs example.

Alternatively...

I was really impressed when I looked at the Coolite samples recently. They are an ExtJS partner and provide a good ASP.NET & ExtJS experience. And no, I don't work for them :) I haven't tried their grid, but it might be painless (at a price).

Answer 3

may be this blog post solves your problem http://www.dottostring.com/2008/12/on-demand-paging-using-extjs-grid-with-client-centric-asp-dot-net-ajax-webmethods/

it uses WebMethods to transfer data and then display it into ext js grid.

Answer 4

Hi, I need make a user control with this funcionality. have any idea?