From efce32c90783ee2fdd49a587c8ac1954475c9f36 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Mon, 21 Nov 2022 16:56:49 +0300 Subject: [PATCH] images renamed --- angular/Grid/Grouping.md | 28 ++++++++++++++-------------- angular/Grid/Search.md | 10 +++++----- angular/Grid/Sorting.md | 20 ++++++++++---------- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/angular/Grid/Grouping.md b/angular/Grid/Grouping.md index c7463df7..902d0196 100644 --- a/angular/Grid/Grouping.md +++ b/angular/Grid/Grouping.md @@ -1,13 +1,13 @@ --- layout: post -title: Grouping with Grid widget for Syncfusion Essential Angular-2 -description: How to enable grouping and its functionalities +title: Grouping in Angular Grid Control | Syncfusion +description: Learn here all about Grouping support in Syncfusion Essential Angular Grid control, its elements, and more. platform: Angular control: Grid documentation: ug api: /api/Angular/grid --- -# Grouping +# Grouping in Essential Angular Grid The Grid control has options to group the records based on the required column. When grouping is applied, grouped records are organized into a hierarchical structure to facilitate easier expand and collapse of records. To enable grouping, set [`allowGrouping`](https://help.syncfusion.com/api/angular/ejgrid#members:allowgrouping "allowGrouping") property as `true`. @@ -49,7 +49,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img1.png) +![Angular Grid grouping](Grouping_images/Grouping_img1.png) ## Initial Grouping @@ -94,7 +94,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img2.png) +![Angular Grid initial grouping](Grouping_images/Grouping_img2.png) ## Multi-Column Grouping @@ -139,7 +139,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img3.png) +![Angular Grid multi column grouping](Grouping_images/Grouping_img3.png) ## Group buttons @@ -184,7 +184,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img4.png) +![Angular Grid group buttons](Grouping_images/Grouping_img4.png) ## Hide Ungroup button @@ -229,7 +229,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img5.png) +![Angular Grid hide ungroup button](Grouping_images/Grouping_img5.png) ## Hide Grouped Column @@ -274,7 +274,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img6.png) +![Angular Grid hide grouped column](Grouping_images/Grouping_img6.png) ## AutoSize Drop Area @@ -319,7 +319,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img7.png) +![Angular Grid size drop area](Grouping_images/Grouping_img7.png) ## Hide Drop area @@ -364,7 +364,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img8.png) +![Angular Grid hide drop area](Grouping_images/Grouping_img8.png) ## Group Caption Format / Group Caption Template @@ -420,9 +420,9 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img9.png) +![Angular Grid group Caption Format](Grouping_images/Grouping_img9.png) -![](Grouping_images/Grouping_img10.png) +![Angular Grid group caption template](Grouping_images/Grouping_img10.png) ## Handling grouped records count in server-side @@ -505,4 +505,4 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](Grouping_images/Grouping_img11.png) \ No newline at end of file +![Angular Grid handling grouped records count in server side](Grouping_images/Grouping_img11.png) \ No newline at end of file diff --git a/angular/Grid/Search.md b/angular/Grid/Search.md index 8388d820..8291fec7 100644 --- a/angular/Grid/Search.md +++ b/angular/Grid/Search.md @@ -1,13 +1,13 @@ --- layout: post -title: Searching with Grid widget for Syncfusion Essential Angular-2 -description: How to enable search opition and its functionalities +title: Searching in Angular Grid Control | Syncfusion +description: Learn here all about Searching support in Syncfusion Essential Angular Grid control, its elements, and more. platform: Angular control: Grid documentation: ug api: /api/Angular/grid --- -# Searching +# Searching in Essential Angular Grid The grid has an option to search its content using the JavaScript method [`search`](https://help.syncfusion.com/api/angular/ejgrid#methods:search "search") with search key as parameter. Also, it provides an option to integrate Search text box in grid toolbar, by adding `search` toolbar item in [`toolbarSetting.toolbarItems`](https://help.syncfusion.com/api/angular/ejgrid#members:toolbarsettings-toolbaritems "toolbarSetting.toolbarItems") property. @@ -49,7 +49,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](searching_images/searching_img1.png) +![Angular Grid searching](searching_images/searching_img1.png) ## Initial Searching @@ -98,7 +98,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; The following output is displayed as a result of the above code example. -![](searching_images/searching_img2.png) +![Angular Grid initial searching](searching_images/searching_img2.png) List of supported operators in searching. diff --git a/angular/Grid/Sorting.md b/angular/Grid/Sorting.md index 2cb5b121..762720de 100644 --- a/angular/Grid/Sorting.md +++ b/angular/Grid/Sorting.md @@ -1,13 +1,13 @@ --- layout: post -title: Sorting with Grid widget for Syncfusion Essential JS -description: How to enable sorting and its functionalities -platform: js +title: Sorting in Angular Grid Control | Syncfusion +description: Learn here all about Sorting support in Syncfusion Essential Angular Grid control, its elements, and more. +platform: Angular control: Grid documentation: ug api: /api/js/ejgrid --- -# Sorting +# Sorting in Essential Angular Grid The Grid control has support to sort data bound columns in ascending or descending order. This can be achieved by setting [`allowSorting`](https://help.syncfusion.com/api/angular/ejgrid#members:allowsorting "allowSorting") property as `true`. @@ -45,12 +45,12 @@ export class AppComponent { The following output is displayed as a result of the above code example. -![](sorting_images/sorting_img1.png) +![Angular Grid sorting](sorting_images/sorting_img1.png) ## Initial Sorting -Through `sortedColumns` property of [`sortSettings`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings "sortSettings"), you can sort the columns while initializing the grid itself. You need to specify the [`field`](https://help.syncfusion.com/api/angular/grid#members:sortsettings-sortedcolumns-field "field") (column) name and [`direction`](https://help.syncfusion.com/api/angular/grid#members:sortsettings-sortedcolumns-direction "direction") in the `sortedColumns`. +Through `sortedColumns` property of [`sortSettings`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings "sortSettings"), you can sort the columns while initializing the grid itself. You need to specify the [`field`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings-sortedcolumns-field "field") (column) name and [`direction`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings-sortedcolumns-direction "direction") in the `sortedColumns`. N> 1. For [`direction`](https://help.syncfusion.com/api/angular/ejgrid#members:sortsettings-sortedcolumns-direction "direction") property you can assign either `string` value ("descending") or `enum` value (`ej.sortOrder.Descending`). N> 2. You can add multiple columns in `sortedColumns` for multi column sorting while initializing the grid itself. @@ -89,7 +89,7 @@ export class AppComponent { The following output is displayed as a result of the above code example. -![](sorting_images/sorting_img2.png) +![Angular Grid initial sorting](sorting_images/sorting_img2.png) ## Multi-Column Sorting @@ -135,7 +135,7 @@ export class AppComponent { The following output is displayed as a result of the above code example. -![](sorting_images/sorting_img3.png) +![Angular Grid multi column sorting](sorting_images/sorting_img3.png) ## Stable sorting @@ -184,7 +184,7 @@ export class AppComponent { The following output is displayed as a result of the above code example. -![](sorting_images/sorting_img4.png) +![Angular Grid stable sorting](sorting_images/sorting_img4.png) ## Touch options @@ -227,6 +227,6 @@ export class AppComponent { The following output is displayed as a result of the above code example. -![](sorting_images/sorting_img5.png) +![Angular Grid touch options](sorting_images/sorting_img5.png) N> To get the sorted data of the grid after sorting a column you can refer the [`How To`](https://help.syncfusion.com/angular/grid/how-to "Getting Datasource of Grid in Sorted Order").