Skip to content

Commit 17e6c05

Browse files
Integrated latest changes at 04-17-2025 10:30:10 PM
1 parent b1c75c7 commit 17e6c05

File tree

9 files changed

+700
-0
lines changed

9 files changed

+700
-0
lines changed
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"syncfusion-component": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist",
17+
"index": "index.html",
18+
"main": "src/main.ts",
19+
"tsConfig": "tsconfig.json",
20+
"styles": [
21+
"src/styles.css"
22+
]
23+
},
24+
"configurations": {
25+
"production": {
26+
"budgets": [
27+
{
28+
"type": "initial",
29+
"maximumWarning": "500kb",
30+
"maximumError": "10mb"
31+
},
32+
{
33+
"type": "anyComponentStyle",
34+
"maximumWarning": "2kb",
35+
"maximumError": "4kb"
36+
}
37+
],
38+
"outputHashing": "all"
39+
},
40+
"development": {
41+
"buildOptimizer": false,
42+
"optimization": false,
43+
"vendorChunk": true,
44+
"extractLicenses": false,
45+
"sourceMap": true,
46+
"namedChunks": true
47+
}
48+
},
49+
"defaultConfiguration": "production"
50+
},
51+
"serve": {
52+
"builder": "@angular-devkit/build-angular:dev-server",
53+
"configurations": {
54+
"production": {
55+
"buildTarget": "syncfusion-component:build:production"
56+
},
57+
"development": {
58+
"buildTarget": "syncfusion-component:build:development"
59+
}
60+
},
61+
"defaultConfiguration": "development"
62+
}
63+
}
64+
}
65+
},
66+
"cli": {
67+
"analytics": false
68+
}
69+
}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Syncfusion Angular Grid</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Typescript UI Controls" />
8+
9+
<meta name="author" content="Syncfusion" />
10+
<style>
11+
#loader {
12+
color: #008cff;
13+
font-family: 'Helvetica Neue','calibiri';
14+
font-size: 16px;
15+
height: 40px;
16+
left: 45%;
17+
position: absolute;
18+
top: 45%;
19+
width: 30%;
20+
}
21+
</style>
22+
</head>
23+
<body style="margin-top: 125px">
24+
<app-root>
25+
<div id='loader'>Loading....</div>
26+
</app-root>
27+
</body>
28+
</html>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "syncfusion-component",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/core": "17.1.2",
14+
"@angular/platform-browser": "17.1.2",
15+
"@angular/platform-browser-dynamic": "17.1.2",
16+
"@syncfusion/ej2-angular-grids": "*",
17+
"@syncfusion/ej2-base": "*",
18+
"@syncfusion/ej2-buttons": "*",
19+
"@syncfusion/ej2-calendars": "*",
20+
"@syncfusion/ej2-dropdowns": "*",
21+
"@syncfusion/ej2-inputs": "*",
22+
"@syncfusion/ej2-navigations": "*",
23+
"@syncfusion/ej2-popups": "*",
24+
"@syncfusion/ej2-splitbuttons": "*",
25+
"@syncfusion/ej2-notifications": "*",
26+
"@syncfusion/ej2-angular-base": "*",
27+
"@angular/animations": "17.1.2",
28+
"@angular/common": "17.1.2",
29+
"@angular/compiler": "17.1.2",
30+
"@angular/forms": "17.1.2",
31+
"@angular/router": "17.1.2",
32+
"moment": "2.29.4",
33+
"rxjs": "7.8.0",
34+
"tslib": "2.3.0",
35+
"zone.js": "0.14.3",
36+
"@syncfusion/ej2-grids": "*"
37+
},
38+
"devDependencies": {
39+
"@angular-devkit/build-angular": "17.1.2",
40+
"@angular/cli": "17.1.2",
41+
"@angular/compiler-cli": "17.1.2",
42+
"@types/jasmine": "4.3.0",
43+
"jasmine-core": "4.5.0",
44+
"karma": "6.4.0",
45+
"karma-chrome-launcher": "3.1.0",
46+
"karma-coverage": "2.2.0",
47+
"karma-jasmine": "5.1.0",
48+
"karma-jasmine-html-reporter": "2.0.0",
49+
"typescript": "5.3.3"
50+
}
51+
}
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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

Comments
 (0)