Print the expanded state from other pages

17 Feb 20224 minutes to read

By default, the expanded child grids will be printed from the current page alone. You can print the expanded child grids from other pages by using the Load and ActionBegin event.

In the following example, we have printed expanded child grids form other pages.

@{
   var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
       QueryString = "CustomerID",
       Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
       {
         new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
         new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" },
        }
   };
   var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.DataSource,
          QueryString = "EmployeeID",
          Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
          {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
          },
          ChildGrid = SecondChildGrid
      };
 }
                
@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable<object>)ViewBag.EmpDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.Expanded).Columns(col =>
{
   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("FirstName").HeaderText("Name").Width("125").Add();
   col.Field("Title").HeaderText("Title").Width("180").Add();
   col.Field("City").HeaderText("City").Width("135").Add();

}).AllowSorting().AllowPaging().PageSettings(page => page.PageSize(5)).Toolbar(new List<string>() { "Print"}).ChildGrid(ChildGrid).ActionBegin("actionBegin").Load("load").Render()

                
<script>

    var expandedChildGrid = {};

    function actionBegin(args) {
        if (args.requestType === 'paging') {
           expandedChildGrid = ej.base.extend({}, expandedChildGrid, getExpandedState(this, 'Expanded', args.previousPage));
        }
    }

    function load() {
        this.on(ej.grids.printGridInit, printInit, this);
    }

    function printInit(gridModel) {
        gridModel.printgrid.expandedRows = ej.base.extend({}, expandedChildGrid, gridModel.expandedRows);
    }

    function getExpandedState(gObj, hierarchyPrintMode, currentPage) {
         var obj = {};
         var rows = gObj.getRowsObject();
         for (var i = 0; i < rows.length; i++) {
             var row = rows[i];
             if (row.isExpand && !row.isDetailRow) {
                var index = gObj.allowPaging ? row.index + (currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : row.index;
                obj[index] = {};
                obj[index].isExpand = true;
                obj[index].gridModel = ej.grids.getPrintGridModel(row.childGrid, hierarchyPrintMode);
             }
         }
         return obj;
     }
 </script>
public IActionResult Index()
{
    ViewBag.DataSource =  OrdersDetails.GetAllRecords();;
    ViewBag.EmpDataSource = EmployeeView.GetAllRecords();
    ViewBag.CustomerDataSource = Customer.GetAllRecords();
    return View();
}