+
+
+
+
+
+
+
+ `
+})
+export class AppComponent implements OnInit {
+
+ public data?: object[];
+ public toolbar?: ToolbarItems[] | object;
+ public editSettings?: EditSettingsModel;
+ public message?: string;
+ @ViewChild('grid')
+ public grid: GridComponent;
+ public latestOrderID: number = 101
+
+ ngOnInit(): void {
+ this.data = data;
+ this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
+ this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+ }
+
+ clickHandler(args: ClickEventArgs): void {
+ if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name
+ args.cancel = true;
+ const newRecord = {
+ OrderID: this.latestOrderID,
+ CustomerID: 'TOMSP',
+ ShipName: 'Hanari Carnes',
+ ShipCity: 'Lyon',
+ };
+ this.latestOrderID += 1;
+ (this.grid as GridComponent).addRecord(newRecord);
+ this.message = 'The default add action is cancelled, and a new record is added at the 0 index of the grid using the addRecord method.';
+ }
+ }
+}
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/grid/toolbar-customization/src/datasource.ts b/ej2-angular/code-snippet/grid/toolbar-customization/src/datasource.ts
new file mode 100644
index 0000000000..afaf656706
--- /dev/null
+++ b/ej2-angular/code-snippet/grid/toolbar-customization/src/datasource.ts
@@ -0,0 +1,76 @@
+export let data: Object[] = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
+ ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+ ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+ },
+ {
+ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
+ ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+ ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+ },
+ {
+ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
+ ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+ ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
+ ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+ ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+ },
+ {
+ OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
+ ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+ ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+ },
+ {
+ OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
+ ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+ ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+ },
+ {
+ OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
+ ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+ ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+ },
+ {
+ OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
+ ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+ ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
+ ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+ ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+ },
+ {
+ OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
+ ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+ ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+ },
+ {
+ OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
+ ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+ ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+ },
+ {
+ OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
+ ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+ ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+ },
+ {
+ OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
+ ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+ ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+ },
+ {
+ OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
+ ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+ ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+ },
+ {
+ OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
+ ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+ ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+ }];
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/grid/toolbar-customization/src/main.ts b/ej2-angular/code-snippet/grid/toolbar-customization/src/main.ts
new file mode 100644
index 0000000000..3607237bd6
--- /dev/null
+++ b/ej2-angular/code-snippet/grid/toolbar-customization/src/main.ts
@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/grid/toolbar-customization/src/styles.css b/ej2-angular/code-snippet/grid/toolbar-customization/src/styles.css
new file mode 100644
index 0000000000..13e46daa90
--- /dev/null
+++ b/ej2-angular/code-snippet/grid/toolbar-customization/src/styles.css
@@ -0,0 +1,11 @@
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-calendars/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-notifications/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
diff --git a/ej2-angular/code-snippet/grid/toolbar-customization/tsconfig.json b/ej2-angular/code-snippet/grid/toolbar-customization/tsconfig.json
new file mode 100644
index 0000000000..af14f705a3
--- /dev/null
+++ b/ej2-angular/code-snippet/grid/toolbar-customization/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "useDefineForClassFields": false,
+ "strictPropertyInitialization": false,
+ "noImplicitThis": false,
+ "lib": [
+ "ES2022",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
\ No newline at end of file
diff --git a/ej2-angular/grid/filtering/filter-menu.md b/ej2-angular/grid/filtering/filter-menu.md
index 2b9681c716..2284c9db5d 100644
--- a/ej2-angular/grid/filtering/filter-menu.md
+++ b/ej2-angular/grid/filtering/filter-menu.md
@@ -169,6 +169,31 @@ You can prevent autofill feature by setting the [autofill](https://ej2.syncfusio
{% previewsample "page.domainurl/samples/grid/filter-menu-cs7" %}
+## Hide default filter icons while perform filtering through method
+
+When performing filtering programmatically using methods in the Syncfusion Angular Grid component, you may want to hide the default filter icons to provide a simpler interface.
+
+To customize the filter icon in the Grid, use the **display** property of the **filtermenu** as mentioned below
+
+```css
+.e-filtermenudiv.e-icons.e-icon-filter {
+ display: none;
+}
+```
+
+The following example demonstrate how to hide the default filter icons while filtering the **CustomerID** column programmatically using a method.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/grid/filter-menu-icon/src/app.component.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/grid/filter-menu-icon/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/grid/filter-menu-icon" %}
+
## Filter menu events
The Syncfusion Angular Grid offers the [actionBegin](https://ej2.syncfusion.com/angular/documentation/api/grid#actionbegin) and [actionComplete](https://ej2.syncfusion.com/angular/documentation/api/grid#actioncomplete) events, which provide information about the actions being performed. Within the event handlers, you receive an argument named `requestType`. This argument specifies the [action](https://ej2.syncfusion.com/angular/documentation/api/grid/action/) that is being executed, such as `filterbeforeopen`, `filterafteropen`, or `filtering`. By analyzing this action type, you can implement custom logic or showcase messages.
diff --git a/ej2-angular/grid/hierarchy-grid.md b/ej2-angular/grid/hierarchy-grid.md
index f7529acef4..95949a6e1c 100644
--- a/ej2-angular/grid/hierarchy-grid.md
+++ b/ej2-angular/grid/hierarchy-grid.md
@@ -38,6 +38,7 @@ The following example demonstrates how to enable the hierarchy feature in the gr
> * Grid supports n level of child grids.
> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/angular/documentation/api/grid/#detailtemplate) is enabled.
+> * In Syncfusion Grid component, searching operates independently for parent and child grids. Searching within the parent grid filters only parent records, and similarly, searching within the child grid filters only child records. The component does not support simultaneous searching across both parent and child grids.
## Bind hierarchy grid with different field
@@ -185,6 +186,25 @@ The following example demonstrates how to obtain parent details in a child grid
{% previewsample "page.domainurl/samples/grid/default-cs16" %}
+## Render aggregates in child grid
+
+The Aggregates feature in the Syncfusion angular Grid component allows you to display aggregate values in the footer, group footer, and group caption of the child grid. With this feature, you can easily perform calculations on specific columns and show summary information.
+
+Rendering aggregates in a child grid involves displaying summary data at the footer or group caption of the grid. This can be particularly useful in hierarchical grids where each child grid represents detailed data that needs to be summarized.
+
+The following example demonstrates how to render aggregates in a child grid to display the sum and maximum values of the **Freight** column.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/grid/child-grid-aggregate/src/app.component.ts %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/grid/child-grid-aggregate/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/grid/child-grid-aggregate" %}
+
## Expand all by external button
The Hierarchy Grid in the Syncfusion Angular Grid component allows you to expand all child grid rows using an external button. This feature provides you with a convenient overview of all the hierarchical data within the grid, eliminating the need to manually expand each row individually.
diff --git a/ej2-angular/grid/images/filter-menu-auto-complete.gif b/ej2-angular/grid/images/filter-menu-auto-complete.gif
index f3e7a088b0..581b49d07b 100644
Binary files a/ej2-angular/grid/images/filter-menu-auto-complete.gif and b/ej2-angular/grid/images/filter-menu-auto-complete.gif differ
diff --git a/ej2-angular/grid/images/filter-menu-drop-down.gif b/ej2-angular/grid/images/filter-menu-drop-down.gif
index 17eace18a5..7859021a1a 100644
Binary files a/ej2-angular/grid/images/filter-menu-drop-down.gif and b/ej2-angular/grid/images/filter-menu-drop-down.gif differ
diff --git a/ej2-angular/grid/searching.md b/ej2-angular/grid/searching.md
index cc623824f9..0de02f209f 100644
--- a/ej2-angular/grid/searching.md
+++ b/ej2-angular/grid/searching.md
@@ -28,7 +28,8 @@ To further enhance the search functionality, you can integrate a search text box
{% previewsample "page.domainurl/samples/grid/searching-cs1" %}
-> The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Grid.
+> * The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Grid.
+> * In Syncfusion Grid component, searching operates independently for parent and child grids. Searching within the parent grid filters only parent records, and similarly, searching within the child grid filters only child records. The component does not support simultaneous searching across both parent and child grids.
## Initial search
diff --git a/ej2-angular/grid/tool-bar/tool-bar-items.md b/ej2-angular/grid/tool-bar/tool-bar-items.md
index 2f3cb97f6a..a542aaf84c 100644
--- a/ej2-angular/grid/tool-bar/tool-bar-items.md
+++ b/ej2-angular/grid/tool-bar/tool-bar-items.md
@@ -75,6 +75,76 @@ This is demonstrated in the following sample:
{% previewsample "page.domainurl/samples/grid/toolbaricon-cs1" %}
+### Customize the built-in toolbar items
+
+The Syncfusion Angular Grid component allows you to customize the built-in toolbar items to meet your specific requirements. This can include adding, removing, or modifying toolbar items, as well as handling custom actions when toolbar buttons are clicked.
+
+To customize the built-in toolbar items, you can use the [toolbarClick](https://ej2.syncfusion.com/angular/documentation/api/grid/#toolbarclick) event of the grid.
+
+The following example demonstrate how to customize the toolbar by disabling and canceling the **Add** button functionlity and showing a custom message when the **Add** button of toolbar is clicked.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% raw %}
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { GridModule, ToolbarService, ToolbarItems, EditSettingsModel } from '@syncfusion/ej2-angular-grids';
+import { Component, OnInit } from '@angular/core';
+import { data } from './datasource';
+
+@Component({
+imports: [GridModule],
+
+providers: [ToolbarService],
+standalone: true,
+ selector: 'app-root',
+ template: `
+
{{message}}
+
+
+
+
+
+
+
+ `
+})
+export class AppComponent implements OnInit {
+
+ public data?: object[];
+ public toolbar?: ToolbarItems[] | object;
+ public editSettings?: EditSettingsModel;
+ public message?: string;
+
+ ngOnInit(): void {
+ this.data = data;
+ this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
+ this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+ }
+
+ clickHandler(args: ClickEventArgs): void {
+ if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name
+ args.cancel = true;
+ const newRecord = {
+ OrderID: 10247,
+ CustomerID: 'TOMSP',
+ ShipName: 'Hanari Carnes',
+ ShipCity: 'Lyon',
+ };
+ (this.grid as GridComponent).addRecord(newRecord);
+ this.message = 'The default adding action is cancelled, and a new record is added using the addRecord method.';
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/grid/toolbar-customization/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/grid/toolbar-customization" %}
+
## Custom toolbar items
Adding custom toolbar items to the Syncfusion Angular Grid involves incorporating personalized functionality into the toolbar.