Skip to content

SEO-2902 - Angular controls image alt text #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 28, 2022
Merged

SEO-2902 - Angular controls image alt text #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions angular/Grid/Grouping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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)
![Angular Grid handling grouped records count in server side](Grouping_images/Grouping_img11.png)
10 changes: 5 additions & 5 deletions angular/Grid/Search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
20 changes: 10 additions & 10 deletions angular/Grid/Sorting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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").