Question

I am adapting an existing ASP.NET MVC 3 WebGrid to display more data. It currently displays one level of data, but I need to show parent-child relationships in the grid. Is this possible, or will I have to look into a third-party control, or roll my own?

Answer 1

If you want webgrid to do it by itself, then answer is no its not possible directly. Simple nested grids you can achieve like this… Razor Nested WebGrid

To have entire grid inside another grid, you can use jQuery, AJAX multiple views to achieve this. On expand of any row call another action with ajax which will render child grid and not any other html. Use the resulted html to insert in a new row in the parent grid table. Something on these lines…

     $.ajax({
        url: childGridUrlString,
        type: 'post',
        async: true,
        timeout: 10 * 1000,
        success: function (data, textStatus, jqXHR) {
             if (!data.Status) {
                 var $tr = $obj.closest("tr", $("#parentgrid"));
                 var $newTr = "<tr><td colspan=\"4\">" + data + "</td></tr>";
                 $("<tr><td>&nbsp;</td><td colspan=\"3\">" + data + "</td></tr>").insertAfter($tr);
             }
         },
    });

Take care of colspans as per number of columns you have in parent and child grid. Important thing, in built sorting feature of WebGrid doesn’t work properly with this type of parent child grid display.

Off course, third party controls are always an option, but you will have to consider cost as well and even they will have some coding to do.