GridView - add formatted child rows from Ajax call that matches the rendered grid

Question

I have an asp.net webforms site with a rather large GridView. The GridView is rendered from a filtered list of data objects.

Some of the data objects have children of the same type.

In my GridView, I'm initially only showing the parent objects. I want to be able to expand the parent to show the child objects, via an Ajax call, and insert the new rows under the parent.

The catch is, they need to follow the same formatting and rendering rules as the parent, and fit in with all the rest of the existing rows. This means that all columns of the new child needs to fit in the columns of the rest of the rendered grid.

I would also like to re-use the existing GridView rendering methods if possible, so I don't have to maintain duplicate code that essentially does the same thing.

I can easily use the DynamicPopulateExtender from the AjaxControlToolkit to call a web service to get the child rows, but that wouldn't easily give me the rendered and formatted HTML that would fit into the already rendered GridView table.

Is there a way to get this to work properly, or is there a different way I should approach this?

Answer 1

Make your Ajax calls and insert the data with jQuery perhaps using a templating engine like jsRender to merge the data. Use the same css classes for the gridview and template to keep the uniform look you want.