You can have any content as a child for any expandable row. In this example, we are doing a simple ajax back to the server to retrieve the details and photo of the respective Employee in the parent grid.

Please, refer to the View and C#/VB.NET code tabs for additional details.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Trirand.Web.Mvc;
using System.Web.UI.WebControls;

namespace MVCDemo.Models
{
    public class EmployeeJqGridModel
    {   
        public JQGrid EmployeesGrid { get; set; }        

        public EmployeeJqGridModel()
        {
            EmployeesGrid = new JQGrid
            {
                Columns = new List<JQGridColumn>()
                                 {
                                     new JQGridColumn { DataField = "EmployeeID",
                                                        PrimaryKey = true,
                                                        Width = 50 },
                                     new JQGridColumn { DataField = "LastName" },
                                     new JQGridColumn { DataField = "FirstName" },                                     
                                     new JQGridColumn { DataField = "Title"}
                                     
                                 },
                Width = Unit.Pixel(600),
                Height = Unit.Percentage(100)
            };
        }
    }
}
@model MVCDemo.Models.EmployeeJqGridModel
@using Trirand.Web.Mvc
@using MVCDemo.Models

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET MVC - Hierarchy Custom Row Details</title>    
    <!-- jQuery runtime minified -->
    <script src="~/Scripts/jquery-3.2.1.min.js" type="text/javascript"></script>
    <!-- The jqGrid localization file we need, English in this case -->
    <script type="text/javascript" src="~/Scripts/trirand/i18n/grid.locale-en.js"></script>
    <!-- The jqGrid client-side javascript -->
    <script type="text/javascript" src="~/Scripts/trirand/jquery.jqGrid.min.js"></script>

    <!-- The jQuery UI theme that will be used by the grid. -->
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css" />
    <!-- The jQuery UI theme extension jqGrid needs -->    
    <link rel="stylesheet" type="text/css" href="~/Content/themes/ui.jqgrid.css" />
</head>
<body>
    <div>
        @Html.Trirand().JQGrid(Model.EmployeesGrid, "EditDialogGrid")
    </div>
    <br /><br />
    <div>
          
    </div>
    
    <script type="text/javascript">    
        function showSubGrid(subgrid_id, row_id) 
        {            
            $.ajax({
                url: '@Url.Action("GetEmployeeDetails", "grid")' + "?employeeID=" + row_id,
                type: "GET",
                success: function(html) {
                    $("#" + subgrid_id).append(html);
                }
            });
        }    
    </script>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Trirand.Web.Mvc;
using MVCDemo.Models;

namespace MVCDemo.Controllers.Grid
{
    public partial class GridController : Controller
    {
        // This is the default action for the View. Use it to setup your grid Model.
        public ActionResult HierarchyCustomRowDetails()
        {
            // Get the model (setup) of the grid defined in the /Models folder.
            var model = new EmployeeJqGridModel();
            HierarchyCustomRowDetails_SetUpGrid(model);

            // Pass the custmomized grid model to the View
            return View(model);
        }

        // parentRowID is automatically passed from the parent grid to the child grid. Note: parentRowID is case sensitive
        public JsonResult HierarchyCustomRowDetails_EmployeesDataRequested(string parentRowID)
        {
            // Get both the grid Model and the data Model
            // The data model in our case is an autogenerated linq2sql database based on Northwind.
            var northWindModel = new NorthwindDataContext();
            var model = new EmployeeJqGridModel();
            HierarchyCustomRowDetails_SetUpGrid(model);            

            return model.EmployeesGrid.DataBind(northWindModel.Employees);
        }

        public ContentResult GetEmployeeDetails(int employeeID)
        {
            var northWindModel = new NorthwindDataContext();
            string result = @"<table>
                            <tr>
                              <td><b>FirstName</b></td>
                              <td>{0}</td>
                              <td rowspan='9' valign='top'><img src='{9}'></td>
                            </tr>
                            <tr>
                              <td><b>LastName</b></td>
                              <td>{1}</td>
                            </tr>
                            <tr>
                              <td><b>Title</b></td>
                              <td>{2}</td>
                            </tr>
                            <tr>
                              <td><b>Title of Courtesy</b></td>
                              <td>{3}</td>
                            </tr>
                            <tr>
                              <td><b>Birth Date</b></td>
                              <td>{4}</td>
                            </tr>
                            <tr>
                              <td><b>Hire Date</b></td>
                              <td>{5}</td>
                            </tr>
                            <tr>
                              <td><b>Address</b></td>
                              <td>{6}</td>
                            </tr>
                            <tr>
                              <td><b>City</b></td>
                              <td>{7}</td>
                            </tr>
                            <tr>
                              <td><b>Postal Code</b></td>
                              <td>{8}</td>
                            </tr>
                        ";

            var employee = (from e in northWindModel.Employees
                            where e.EmployeeID == employeeID
                            select e).First<MVCDemo.Models.Employee>();

            ContentResult cr = new ContentResult();
            cr.Content =  String.Format(result,
                                        employee.FirstName,
                                        employee.LastName,
                                        employee.Title,
                                        employee.TitleOfCourtesy,
                                        employee.BirthDate.ToString(),
                                        employee.HireDate.ToString(),
                                        employee.Address,
                                        employee.City,
                                        employee.PostalCode,
                                        Url.Content("~/content/images/hierarchycustomrowdetails/" + employee.EmployeeID.ToString() + ".jpg")
                                       );

            return cr;
        }


        public void HierarchyCustomRowDetails_SetUpGrid(EmployeeJqGridModel model)
        {            
            var employeesGrid = model.EmployeesGrid;         

            employeesGrid.ID = "EmployeesGrid";
            employeesGrid.DataUrl = Url.Action("HierarchyCustomRowDetails_EmployeesDataRequested");
            employeesGrid.HierarchySettings.HierarchyMode = HierarchyMode.Parent;
            employeesGrid.ClientSideEvents.SubGridRowExpanded = "showSubGrid";

            
        }
    }
}
Switch theme:


Theming is based on the very popular jQuery ThemeRoller standard. This is the same theming mechanism used by jQuery UI and is now a de-facto standard for jQuery based components. The benefits of using ThemeRoller are huge. We can offer a big set of ready to use themes created by professional designers, including Windows-like themes (Redmond), Apple-like theme (Cupertino), etc. In addition to that any jQuery UI controls on the same page will pick the same theme.

Last, but not least, you can always roll your own ThemeRoller theme, using the superb Theme Editor

To use a theme, simply reference 2 Css files in your Html <head> section - the ThemeRoller theme you wish to use, and the jqGrid own ThemeRoller Css file. For example (Redmond theme):

<link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />