Hierarchical results in ASP.NET GridView

Posted on February 2, 2008. Filed under: Uncategorized | Tags: , , , , |

Here is one technique that I use in ASP.NET to show hierarchical data like categories tree, sitemaps listing, department/user-levels, etc. A GridView control is used instead of a TreeView control. The method does not require any complex coding and loops; and also does not require any xml file generation. It does, however, require a good stored-procedure (or a db script) to give a sorted resultset.

Lets start with the database table, Categories, which we have like shown below.
CategoryID is the primary key. ParentID is id of parent category, and if zero it is considered to be top level category.

Tree GridView - db table

First requirement is to get resultset sorted as per required. Here is a stored procedure code, which will populate the sorted resultset. This code works for three levels of depth of the categories. It can be easily changed to higher levels by adding Sort# column in the temp table and and writing additional INSERT INTO statement. One limitation of the query is that it does not handle infinite depth level.

Tree GridView - SP

Here is a sample resultset from the SP script:

Tree GridView - db resultset

Rest of the process in the UI is very simple. A GridView control is used and is databound to the above SP. Also, three CSS classes are required for each three levels. Then all we need to do is to define ItemTemplate of the GridView. CSS and ASPX codes are shown below:

Tree GridView - UI ASPX
Tree GridView - UI CSS

Here is the result page from the above codes.

Tree GridView - UI output page
Advertisements

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

14 Responses to “Hierarchical results in ASP.NET GridView”

RSS Feed for vinayak’s web whistles Comments RSS Feed

Very Good Thanks

Great!!

Very nice article. It has helped us a lot. Thank You

It helped me. Thanks

will you please publish the code ?

Hi Vinay,
Can you Provide the script for table with data

just wanna say thank you. there are so many solutions out there. but yours is simple but the most effective!

Excellent Thanks a lot Really Help full.

Can you Please put + and – so it can be expandable or minimizable depending on what user wants.

That source code with [+] and [-] is here
http://www.vbknowledgebase.com/?Id=125&Desc=Asp.Net-Hierarchical-GridView

Craig

hi craig

thats an excellent article thanks for sharing with us, this helped me solving the issue.

I don’t really recommend Craig’s approach because there will be so many database hits in that approach. You see, the database is hit 9 times (1 for the main grid data and rest 8 for each row) in the screenshot example.

Still the code is clean and easily doable. No complicate things. For most of the applications, this approch suits well. i am using this for few weeks it is really good enough.

Hi Sir,

How the ‘SortOrder’ Come from?

Regards,
Herman


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: