ASP.NET 2.0 Grid Demo (Updated w/ Screen Shots)

[kayos]

After getting the form demo working, I wanted to get a grid demo up and running. This grid demo uses the same table and form layout as my previous form demo. This grid allows for adding, updating and deleting records while posting back to the server as well as paging through a large amount of data. In order to use this you will need the following prerequisites:

Microsoft .NET Farmework 2.0
Visual Studio 2005 or Visual Web Developer Express Edition (http://msdn.microsoft.com/vstudio/express/downloads/)
SQL 2005 Express (http://msdn.microsoft.com/vstudio/express/downloads/)
ASP.NET Ajax 1.0 (http://ajax.asp.net/downloads/default.aspx?tabid=47)
Ajax Control Toolkit (http://ajax.asp.net/downloads/default.aspx?tabid=47)

This demo was done using:

MS datasets
3-Tier architecture (DAL & BLL)

Should be pretty self explanatory if you know/use ASP.NET.

Link to the demo project file:
ExtJS-griddemo.zip (http://www.reamped.net/ext/ExtJS-griddemo.zip)

** UPDATE **
Screen shots:
http://i85.photobucket.com/albums/k73/kayos82/ex1.jpg

http://i85.photobucket.com/albums/k73/kayos82/ex2.jpg

http://i85.photobucket.com/albums/k73/kayos82/ex3.jpg

http://i85.photobucket.com/albums/k73/kayos82/ex4.jpg

Happy Programming!
-kayos

[brian.moeskau]

Thanks for posting your code. Is this something that you could put into a tutorial? Even a brief description of the problem/solution and a link to the code would be better than nothing. Having it in the tutorial section will make it more accessible to a wider audience.

http://extjs.com/learn/Tutorials

[kayos]

Thanks for posting your code. Is this something that you could put into a tutorial? Even a brief description of the problem/solution and a link to the code would be better than nothing. Having it in the tutorial section will make it more accessible to a wider audience.

http://extjs.com/learn/Tutorials
Hi Brian,

I suppose I could post it in a tutorial. I was just trying to up my skills in the passes between Ext and any server side language, my language of choice being C#. This download is essentially the same Ext code as in this tutorial - [Using Ext grid form dialog to achieve paging list, create, edit, delete function (http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list%2C_create%2C_edit%2C_delete_function)] Only using ASP.NET C# as the server side language.

Let me know if you still want it as a tutorial, I just figured since it was a spin off of the Ext JavaScript code using ASP.NET I would just post my project so that more .NET users could understand the structure and data manipulation in the Microsoft way.

[J.C. Bize]

awesome sample, thanks!

[comm]

Any live demo or screen shot?

[kayos]

Any live demo or screen shot?
Updated w/ screen shots.

[Gunmen]

Thanks for sharing!

I'm trying to figure out when to use Ext Js instead of ASP.NET Ajax with ASP.NET. It looks like there is a little overlap between them (grids).

Are ASP.NET Ajax 1.0 and the Ajax Control Toolkit really nessasery in your sample? I like to know when to use the AJAX solutions of ASP.NET or Ext Js. What is your vision?

I know that Microsoft uses sometimes there own standards of html, css, etc. A good thing about ASP.NET Ajax is that there are visual editors for to work with. Are there visual editors for Ext Js?

Thanks!

[olimpia]

Navigate this link below

http://www.codeplex.com/GridExtender
intergrates the extgrid ,tab and tree to asp.net ajax as controls.

Ext and other samples
http://www.rodrigodiniz.qsh.eu
Blog
http://rodiniz.blogspot.com

[olimpia]

I am using Extjs with the same aspx in the example above.
But I would like to come back the information to carry the grid through a method Static that this in the server using the ScriptManager for that.
A link where explains the operation http://mattberseth.com/blog/2007/06/aspnet_ajax_invoke_a_static_me.html proceeds

In this method static that this in the server the return would be in format json. How should I configure to capture this return?

[mfw24]

would you be able to post your scripts for creating the sql 2005 data structures (stored procedures, tables, indexes, etc...? This way i can see how it works on my local machine.

thanks.

[J.C. Bize]

would you be able to post your scripts for creating the sql 2005 data structures (stored procedures, tables, indexes, etc...? This way i can see how it works on my local machine.

thanks.

The entire database is already part of the sample... Check the App_Data folder.

[magunes117]

Hi everyone,

@kayos, great work. Thanks for the example. But I have a couple of questions.

First of all I got the following error building the project in VS2005:

Error 1 Could not create type 'SendGate.feedproxy1'. C:\Inetpub\wwwroot\ExtJS\ExtJSSite\js\ext\examples\layout\feed-proxy.ashx 1

And another one is, after changing a value in the grid it shows well inside the grid. But double-clicking on it again - still shows the old values, and also there is a problem with the 'Active' checkbox.

The last thing is, when there is a lot of data (more than 200 rows), the application runs very slow on my machine. Does anyone have the same problem?

Thanks in advance, I will post myself if I can find a workaround.

;)

[MarkDavisxxx]

Hello - I was wondering the same thing, I'm getting the SendGate.feedproxy error on two machines that I tried this on. It's too bad that I'm new to ExtJS as well as .Net, making it difficult to debug.

Thanks,
Mark

[LiXin]

I have built a simliar asp.net 2.0 grid demo using our LatticeFramework Studio, actually, the whole demo was auto-generated using below xml definition, I used Castle ActiveRecord (NHibernate O/R mapper) for data access, and a custom asp.net HttpHandler to process the request from web client, you do not need ASP.NET ajax and Ajax Control Tookit.

Take a look this thread: http://extjs.com/forum/showthread.php?t=11243

The xml for generating the whole demo (sql script, Ext and C# code):


<database name="database1">
<tables>
<table name="Customer">
<columns>
<column name="Id" type="int" key="PRIMARY KEY" identity="True" nullable="No" />
<column name="FirstName" type="nvarchar" nullable="Yes" />
<column name="LastName" type="nvarchar" nullable="Yes" />
<column name="Address" type="nvarchar" nullable="Yes" />
<column name="City" type="nvarchar" nullable="Yes" />
<column name="State" type="nvarchar" nullable="Yes" />
<column name="ZipCode" type="nvarchar" nullable="Yes" />
<column name="Phone" type="nvarchar" nullable="Yes" />
</columns>
<keys>
<pk name="Id" type="int" description="PK_Customer" />
</keys>
<references>
</references>
</table>
</tables>
</database>

[J.C. Bize]

Hello - I was wondering the same thing, I'm getting the SendGate.feedproxy error on two machines that I tried this on. It's too bad that I'm new to ExtJS as well as .Net, making it difficult to debug.

Thanks,
Mark

Mark,

Are you sure you installed all the prerequisites? I think you will get this error message if the ASP.Net Ajax is not installed. Make sure you install all the prerequisites prior to opening the project file.



Microsoft .NET Farmework 2.0
Visual Studio 2005 or Visual Web Developer Express Edition
SQL 2005 Express
ASP.NET Ajax 1.0
Ajax Control Toolkit


Hope this helps,
JC

[david.public]

Thanks for the great demo. I'd been looking for exactly this.


Hello - I was wondering the same thing, I'm getting the SendGate.feedproxy error on two machines that I tried this on. It's too bad that I'm new to ExtJS as well as .Net, making it difficult to debug.

Thanks,
Mark

I got the same error message as well when I first tried to run the project. I was able to get the demo working by excluding the file which caused the error. (/js/ext/examples/layout/feed-proxy.ashx, in VS2005 Solution Explorer you can right click and select Exclude From Project). I also changed the site properties to use dynamic ports.

I'm an ExtJS newbie as well, so I don't know what the actual error related to.

[magunes117]

Mark,

Are you sure you installed all the prerequisites? I think you will get this error message if the ASP.Net Ajax is not installed. Make sure you install all the prerequisites prior to opening the project file.

Hope this helps,
JC

Hi JC,

I installed all the prereqs and still got the problem.

Thanks...

[photoz]

just delete out the entire examples folder in ext under your solution, you don't need it.

[J.C. Bize]

Hi JC,

I installed all the prereqs and still got the problem.

Thanks...

Hmm... How are you actually starting the sample? If I hit F5 or click the Run button then I get the same error message. However, if I right-click on employees.aspx and choose "View in Browser", then the sample comes up correctly.

Hope this helps,
JC

[magunes117]

Hmm... How are you actually starting the sample? If I hit F5 or click the Run button then I get the same error message. However, if I right-click on employees.aspx and choose "View in Browser", then the sample comes up correctly.

Hope this helps,
JC

Yes, just like you said I am starting it by selecting "view in browser", no problem about that but after making some changes I thought I needed to build the project so that's why I asked. Thank you, good example. =D>

[erfaan]

This is great example, but the problem is that it is using aspx page like php. This is a performance hit. Plus we will have to make aspx pages for each Ajax request. To make it more useful for a ASP.NET developer we have to use it in .NET way.

I have written an example which uses WebMethods for loading data in ExtJs grid. Please share your feedback regarding this:

http://www.dottostring.com/2008/12/on-demand-paging-using-extjs-grid-with-client-centric-asp-dot-net-ajax-webmethods/

[mabra]

Hi !

Thanks for this example. It similarly to something, I am looking for.
Sad to say, the sample wether builds nor runs. Is ther any update? The toolkit is much newer and I am using VS 2008. If I manually replaced the outdated references with a newer one, the sample fails building too [Could not create type 'SendGate.feedproxy1'].

Any help would be really great. There are nearly zero examples for asp with extjs and I am short to give up [need CRUD operations with grid!].

Thanks anyway,
mabra

[pardha]

Great Work Thanks!!!, I'm new to ExtJS but tried your example everything is working fine except feedproxy1, But my problem is I'm trying to mimic the same code flow to create another grid page.. I'm struck at data not displaying in grid. Can you please help me where I did wrong.

Thanks
Pardha.

[pardha]

Oops! Sorry wrongly typed your name