Heirarchical Grid or Parent childgridView using javascript

A very simple thing which is most often required by the developers is creating the Hierarchical grid view or in other words Parent-Child Grid....

Some of the Organizations where they maintain Parent-Child relationships in their process required such kind of data representation....

Scenario:
In a certain organization you need to have a Project Under particular project you must have tasks,this will create your Hierarchical Grid

1.We have to create 1 grid and then add TemplateField Column,after put 2nd Grid inside the TemplateField Column put DataKeyName of Key Column which common in both Grid'd data like ProejctGroup then bind the Grid

2.Put + sign in First Column and put that inside Div tab in your grid view column














3.then Bind the 2nd grid on rowdataboundevent








4.put the javascript code as shown below

























Now simple you parent grid will bind your child grid and it will go on and on doind Hierarchi of data and you are done doing it...!
cheers
Hope this will be helpful to some one.
Thanks
Parth