Tuesday, July 21, 2009

Nested GridView [ No JavaScripts ]


Introduction and Background

There are several implementations available for Nesting GridView on the internet.

On MSDN there is a set of code available, but that does not solve the problem of most developers. Just adding another GridViewin the template field of the Parent GridView is not enough.

CodeProject already has a solution available but that involves writing methods in JavaScript EditNestedGridView.aspx

I am going to show you how it can be implemented without writing any JavaScript Code and by letting Ajax do the work.


I'll start off quick from the beginning so that those developers who are new with this behavior of GridView don’t have any issues achieving the end result.

Create a GridView and add a Template Filed to the GridView . You can achieve this by going into Edit Columns from the GridViewTasks.

Once this is done, Edit Template and Insert a LinkButton with " + " as its Text Property. Make it X-Large and remove the Underline. Iinsert a Child GridViewright next to the LinkButton.

These kinds of arrangement are usually required when you already have a relationship between two table. Like in my example, there is a relationship between Order Table and Detail Table. I assume you have already created the SqlDataSources for both GridViews according to your requirements.

The important thing here is that, you must not assign any Source to the Parameter in the Child GridView's SqlDataSource. In other words, assign the source as "None" for the Child DataSource.

See full detail: http://www.codeproject.com/KB/aspnet/NestedGridView.aspx

No comments: