1
+ import { NgModule } from '@angular/core'
2
+ import { BrowserModule } from '@angular/platform-browser'
3
+ import { GridModule } from '@syncfusion/ej2-angular-grids'
4
+ import { DetailRowService , GridModel , ToolbarService , PageService , GridComponent , HierarchyGridPrintMode , getPrintGridModel } from '@syncfusion/ej2-angular-grids'
5
+ import { Component , OnInit , ViewChild } from '@angular/core' ;
6
+ import { customerData , data , employeeData } from './datasource' ;
7
+ import { extend } from '@syncfusion/ej2-base' ;
8
+
9
+ @Component ( {
10
+ imports : [ GridModule ] ,
11
+ providers : [ DetailRowService , ToolbarService , PageService ] ,
12
+ standalone : true ,
13
+ selector : 'app-root' ,
14
+ template : `
15
+ <ejs-grid #grid [dataSource]='parentData' [childGrid]='childGrid' [allowPaging]='true' [pageSettings]='pageSettings' [toolbar]='toolbar' [hierarchyPrintMode]='hierarchyPrintMode' (actionBegin)='actionBegin($event)' (load)='load()'>
16
+ <e-columns>
17
+ <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
18
+ <e-column field='FirstName' headerText='FirstName' width=150></e-column>
19
+ <e-column field='LastName' headerText='Last Name' width=150></e-column>
20
+ <e-column field='City' headerText='City' width=150></e-column>
21
+ </e-columns>
22
+ </ejs-grid>`
23
+ } )
24
+ export class AppComponent implements OnInit {
25
+ @ViewChild ( 'grid' )
26
+ public grid ?: GridComponent ;
27
+ public parentData ?: object [ ] ;
28
+ public pageSettings ?: Object ;
29
+ public toolbar ?: string [ ] ;
30
+ public hierarchyPrintMode ?: HierarchyGridPrintMode ;
31
+ public persistedExpandedRows ?: any = { } ;
32
+ public secondChildGrid ?: GridModel ;
33
+ public childGrid ?: GridModel ;
34
+
35
+ ngOnInit ( ) : void {
36
+ this . parentData = employeeData ;
37
+ this . pageSettings = { pageSize : 4 } ;
38
+ this . hierarchyPrintMode = 'Expanded' ;
39
+ this . toolbar = [ 'Print' ] ;
40
+ this . secondChildGrid = {
41
+ dataSource : customerData ,
42
+ queryString : 'CustomerID' ,
43
+ columns : [
44
+ { field : 'CustomerID' , headerText : 'Customer ID' , textAlign : 'Right' , width : 75 } ,
45
+ { field : 'ContactName' , headerText : 'Contact Name' , width : 100 } ,
46
+ { field : 'Address' , headerText : 'Address' , width : 120 } ,
47
+ { field : 'Country' , headerText : 'Country' , width : 100 }
48
+ ]
49
+ }
50
+ this . childGrid = {
51
+ dataSource : data ,
52
+ queryString : 'EmployeeID' ,
53
+ columns : [
54
+ { field : 'OrderID' , headerText : 'Order ID' , textAlign : 'Right' , width : 120 } ,
55
+ { field : 'CustomerID' , headerText : 'Customer ID' , width : 150 } ,
56
+ { field : 'ShipCity' , headerText : 'Ship City' , width : 150 } ,
57
+ { field : 'ShipName' , headerText : 'Ship Name' , width : 150 }
58
+ ] ,
59
+ childGrid :this . secondChildGrid ,
60
+ } ;
61
+ }
62
+ public actionBegin ( args : any ) : void {
63
+ if ( args . requestType === 'paging' ) {
64
+ const page = args . previousPage ;
65
+ this . persistedExpandedRows = {
66
+ ...this . persistedExpandedRows ,
67
+ ...( this . grid ? this . getExpandedState ( this . grid , 'Expanded' , page ) : { } ) ,
68
+ } ;
69
+ }
70
+ }
71
+ public load ( ) : void {
72
+ if ( this . grid ) {
73
+ this . grid . on ( 'printGrid-Init' , this . printInit . bind ( this ) ) ;
74
+ }
75
+ }
76
+ public printInit ( args : any ) : void {
77
+ const printGridInstance = args . printgrid ;
78
+ printGridInstance . expandedRows = extend (
79
+ { } ,
80
+ this . persistedExpandedRows ,
81
+ printGridInstance . expandedRows
82
+ ) ;
83
+ }
84
+ public getExpandedState ( grid : GridComponent , mode : HierarchyGridPrintMode , currentPage : number ) : any {
85
+ const expandedRowState : any = { } ;
86
+ const gridRows = grid . getRowsObject ( ) ;
87
+ for ( let i = 0 ; i < gridRows . length ; i ++ ) {
88
+ const gridRow = gridRows [ i ] ;
89
+ if ( gridRow . isExpand && ! gridRow . isDetailRow ) {
90
+ const pageSize = grid ?. pageSettings ?. pageSize || 1 ;
91
+ const expandedIndex = grid . allowPaging
92
+ ? gridRow . index + currentPage * pageSize - pageSize
93
+ : gridRow . index ;
94
+ expandedRowState [ expandedIndex ] = {
95
+ isExpand : true ,
96
+ gridModel : getPrintGridModel ( gridRow . childGrid , mode ) ,
97
+ } ;
98
+ }
99
+ }
100
+ return expandedRowState ;
101
+ }
102
+ }
0 commit comments