In some scenarios you may need to display several child tables at the same level. This may include subgrids, custom html, etc. Let's consider the common scenario, where we list all Orders. We also want to drill-down and expand each Order, showing both the Employee handling it and the Customer the order should be shipped to at the same time.

The approach to achieve that is very similar to what is needed in a classic 2 or 3-level hierarchy. The key here is to set the HierarchySettings.HierarchyMode of the parent grid to Parent and to hook its client-side event SubGridRowExpanded.

The showSubGrid javascript event handler is responsible for showing the child grid. Similar to what you would do in a 2 or 3-level scenario, just call the autogenerated showSubGrid_CustomersGrid and showSubGrid_EmployeesGrid functions. The difference however is that you need to pass two additional parameters - the message to be shown next to the grid and the ID of the grid (must be unique).

The second and third grid - Employee and Customer - should be at the same level (children of the parent Orders grid). Therefore, we need to set their HierarchySettings.HierarchyMode to Child. Note how we form the SQL query - we need a join clause to find all employees and customers responsible for the selected parent order.
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 MultipleGridsSameLevelModel
    {        
        public JQGrid OrdersGrid { get; set; }
        public JQGrid CustomersGrid { get; set; }
        public JQGrid EmployeesGrid { get; set; }

        public MultipleGridsSameLevelModel()
        {
            OrdersGrid = new JQGrid
            {
                Columns = new List<JQGridColumn>()
                                 {
                                     new JQGridColumn { DataField = "OrderID", 
                                                        // always set PrimaryKey for Add,Edit,Delete operations
                                                        // if not set, the first column will be assumed as primary key
                                                        PrimaryKey = true,
                                                        Editable = false,
                                                        Width = 50 },
                                     new JQGridColumn { DataField = "OrderDate", 
                                                        Editable = true,
                                                        Width = 100, 
                                                        DataFormatString = "{0:d}" },
                                     new JQGridColumn { DataField = "CustomerID", 
                                                        Editable = true,
                                                        Width = 50 },
                                     new JQGridColumn { DataField = "Freight", 
                                                        Editable = true,
                                                        Width = 75 },
                                     new JQGridColumn { DataField = "ShipName",
                                                        Editable =  true,
                                                        Width = 100
                                                      }       
                                 },
                Width = Unit.Pixel(550),
                Height = Unit.Percentage(100)
            };

            CustomersGrid = new JQGrid
            {
                Columns = new List<JQGridColumn>()
                                 {
                                     new JQGridColumn { DataField = "CustomerID",
                                                        HeaderText = "ID",
                                                        PrimaryKey = true,
                                                        Width = 50 },
                                     new JQGridColumn { DataField = "CompanyName" },
                                     new JQGridColumn { DataField = "ContactName" },
                                     new JQGridColumn { DataField = "Phone" }
                                     
                                 },  
                Width = Unit.Percentage(100),
                Height = Unit.Percentage(100)
            };          

            EmployeesGrid = new JQGrid
            {
                Columns = new List<JQGridColumn>()
                                 {
                                     new JQGridColumn { DataField = "EmployeeID",
                                                        PrimaryKey = true,
                                                        Width = 50 },
                                     new JQGridColumn { DataField = "FirstName" },
                                     new JQGridColumn { DataField = "LastName" },
                                     new JQGridColumn { DataField = "Region"}
                                 },
                Width = Unit.Pixel(350),
                Height = Unit.Percentage(100)
            };

        }
    }
}
@model MVCDemo.Models.MultipleGridsSameLevelModel
@using Trirand.Web.Mvc
@using MVCDemo.Models

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET MVC - Multiple Child Grids on the Same Level</title>
    <!-- jQuery runtime minified -->
    <script src="~/Scripts/jquery-3.0.0.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.11.4/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.OrdersGrid, "OrdersGrid")
        @Html.Trirand().JQGrid(Model.CustomersGrid, "CustomersGrid")
        @Html.Trirand().JQGrid(Model.EmployeesGrid, "EmployeesGrid")
        
        <script type="text/javascript">
            function showDetails(subgrid_id, row_id) {
                // the showSubGrid_GridID javascript functions are autogenerated.
                // the third parameter is optional - HTML you wish to display above the child grid(s)                  
                showSubGrid_CustomersGrid(subgrid_id, row_id, "<br><b>Employee responsible for this order</b><br><br>", "CustomersGrid");
                showSubGrid_EmployeesGrid(subgrid_id, row_id, "<br><b>This order should be shipped to this customer</b><br><br>", "EmployeesGrid");
             }
        </script>

    </div>
    <br /><br />
    <div>
          
    </div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCDemo.Models;
using Trirand.Web.Mvc;

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 HierarchyMultipleGridsSameLevel()
        {
            // Get the model (setup) of the grid defined in the /Models folder.
            var model = new MultipleGridsSameLevelModel();
            HierarchyMultipleGridsSameLevel_SetUpGrid(model);

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

        public JsonResult HierarchyMultipleGridsSameLevel_OrdersDataRequested()
        {
            // 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 MultipleGridsSameLevelModel();
            HierarchyMultipleGridsSameLevel_SetUpGrid(model);

            // return the result of the DataBind method, passing the datasource as a parameter
            // jqGrid for ASP.NET MVC automatically takes care of paging, sorting, filtering/searching, etc
            return model.OrdersGrid.DataBind(northWindModel.Orders);
        }

        // parentRowID is automatically passed from the parent grid to the child grid. Note: parentRowID is case sensitive
        public JsonResult HierarchyMultipleGridsSameLevel_CustomersDataRequested(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 MultipleGridsSameLevelModel();
            HierarchyMultipleGridsSameLevel_SetUpGrid(model);

            var customers = from c in northWindModel.Customers
                            from o in northWindModel.Orders
                            where c.CustomerID == o.CustomerID
                            where o.OrderID == Convert.ToInt16(parentRowID)
                            select c;

            return model.CustomersGrid.DataBind(customers);
        }

        // parentRowID is automatically passed from the parent grid to the child grid. Note: parentRowID is case sensitive
        public JsonResult HierarchyMultipleGridsSameLevel_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 MultipleGridsSameLevelModel();
            HierarchyMultipleGridsSameLevel_SetUpGrid(model);

            var employee = from e in northWindModel.Employees
                               from o in northWindModel.Orders
                               where (e.EmployeeID == o.EmployeeID.Value)
                               where (o.OrderID == Convert.ToInt16(parentRowID))
                               select e;

            return model.EmployeesGrid.DataBind(employee);
        }


        public void HierarchyMultipleGridsSameLevel_SetUpGrid(MultipleGridsSameLevelModel model) 
        {
            var customersGrid = model.CustomersGrid;
            var ordersGrid = model.OrdersGrid;
            var employeesGrid = model.EmployeesGrid;

            ordersGrid.ID = "OrdersGrid";
            ordersGrid.DataUrl = Url.Action("HierarchyMultipleGridsSameLevel_OrdersDataRequested");
            ordersGrid.HierarchySettings.HierarchyMode = HierarchyMode.Parent;
            ordersGrid.ClientSideEvents.SubGridRowExpanded = "showDetails";

            customersGrid.ID = "CustomersGrid";
            customersGrid.DataUrl = Url.Action("HierarchyMultipleGridsSameLevel_CustomersDataRequested");
            customersGrid.HierarchySettings.HierarchyMode = HierarchyMode.Child;            

            employeesGrid.ID = "EmployeesGrid";
            employeesGrid.DataUrl = Url.Action("HierarchyMultipleGridsSameLevel_EmployeesDataRequested");
            employeesGrid.HierarchySettings.HierarchyMode = HierarchyMode.Child;
        }
    }
}
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" />