syncfusion-content · SyncfusionBuild · Aug 3, 2024 · Aug 2, 2024
diff --git a/ej2-angular/code-snippet/grid/child-grid-aggregate/angular.json b/ej2-angular/code-snippet/grid/child-grid-aggregate/angular.json
@@ -0,0 +1,69 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
diff --git a/ej2-angular/code-snippet/grid/child-grid-aggregate/index.html b/ej2-angular/code-snippet/grid/child-grid-aggregate/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion Angular Grid</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Angular UI Controls" />
+<meta name="author" content="Syncfusion" />
+
+</head>
+<body style="margin-top: 125px">
+    <app-root>
+        <div id='loader'>Loading....</div>
+    </app-root>
+</body>
+</html>
diff --git a/ej2-angular/code-snippet/grid/child-grid-aggregate/package.json b/ej2-angular/code-snippet/grid/child-grid-aggregate/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "syncfusion-component",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/core": "17.1.2",
+    "@angular/platform-browser": "17.1.2",
+    "@angular/platform-browser-dynamic": "17.1.2",
+    "@syncfusion/ej2-angular-grids": "*",
+    "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-calendars": "*",
+    "@syncfusion/ej2-dropdowns": "*",
+    "@syncfusion/ej2-inputs": "*",
+    "@syncfusion/ej2-navigations": "*",
+    "@syncfusion/ej2-popups": "*",
+    "@syncfusion/ej2-splitbuttons": "*",
+    "@syncfusion/ej2-notifications": "*",
+    "@syncfusion/ej2-angular-base": "*",
+    "@syncfusion/ej2-angular-buttons": "*",
+    "@angular/animations": "17.1.2",
+    "@angular/common": "17.1.2",
+    "@angular/compiler": "17.1.2",
+    "@angular/forms": "17.1.2",
+    "@angular/router": "17.1.2",
+    "moment": "2.29.4",
+    "rxjs": "7.8.0",
+    "tslib": "2.3.0",
+    "zone.js": "0.14.3",
+    "@syncfusion/ej2-grids": "*"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "17.1.2",
+    "@angular/cli": "17.1.2",
+    "@angular/compiler-cli": "17.1.2",
+    "@types/jasmine": "4.3.0",
+    "jasmine-core": "4.5.0",
+    "karma": "6.4.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.2.0",
+    "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.0.0",
+    "typescript": "5.3.3"
+  }
+}
diff --git a/ej2-angular/code-snippet/grid/child-grid-aggregate/src/app.component.ts b/ej2-angular/code-snippet/grid/child-grid-aggregate/src/app.component.ts
@@ -0,0 +1,77 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { GridModule } from '@syncfusion/ej2-angular-grids'
+import { PageService, SortService, FilterService, GroupService, DetailRowService, AggregateService } from '@syncfusion/ej2-angular-grids'
+
+
+
+import { Component, OnInit } from '@angular/core';
+import { data, employeeData } from './datasource';
+import { GridModel } from '@syncfusion/ej2-angular-grids';
+
+@Component({
+    imports: [
+        GridModule
+    ],
+
+    providers: [PageService,
+        SortService,
+        FilterService,
+        GroupService,
+        DetailRowService,
+        AggregateService],
+    standalone: true,
+    selector: 'app-root',
+    template: `<ejs-grid [dataSource]='parentData' height='315px' [childGrid]='childGrid'>
+                    <e-columns>
+                        <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
+                        <e-column field='FirstName' headerText='FirstName' width=100></e-column>
+                        <e-column field='LastName' headerText='Last Name' width=100></e-column>
+                        <e-column field='City' headerText='City' width=120></e-column>
+                    </e-columns>
+                </ejs-grid>`,
+})
+export class AppComponent implements OnInit {
+
+    public parentData?: object[];
+    public childGrid: GridModel = {
+        dataSource: data,
+        queryString: 'EmployeeID',
+        columns: [
+            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
+            { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
+            { field: 'ShipCity', headerText: 'Ship City', width: 100 },
+            { field: 'Freight', headerText: 'Freight', format:'C2', width: 120 },
+            { field: 'ShipName', headerText: 'Ship Name', width: 120 }
+        ],
+        aggregates: [
+            {
+                columns: [
+                    {
+                        type: 'Sum',
+                        field: 'Freight',
+                        format:'C2',
+                        footerTemplate: 'Sum: ${Sum}',
+                    },
+                ],
+            },
+            {
+                columns: [
+                    {
+                        type: 'Max',
+                        field: 'Freight',
+                        format:'C2',
+                        footerTemplate: 'Max: ${Max}',
+                    },
+                ],
+            },
+        ],
+    };
+
+    ngOnInit(): void {
+        this.parentData = employeeData;
+    }
+}
+
+
+