diff --git a/angular/Chart/Exporting.md b/angular/Chart/Exporting.md index 085ce6a2..80c4b591 100644 --- a/angular/Chart/Exporting.md +++ b/angular/Chart/Exporting.md @@ -1,13 +1,13 @@ --- layout: post -title: Exporting options in Essential Angular Chart -description: Learn how to export Chart as excel file or image. +title: Exporting in Angular Chart Control | Syncfusion +description: Learn here all about Exporting support in Syncfusion Essential Angular Chart control, its elements, and more. platform: Angular control: Chart documentation: ug --- -# Exporting Chart +# Exporting Chart in Essential Angular Chart Exporting a chart can be done in both client-side and in server-side. This can be modified by setting values to the property "mode" in exporting. Default value for mode is client. @@ -194,7 +194,7 @@ public void ExportChart(string Data, string ChartModel) Excel exporting is a server-side operation. In addition have to refer Syncfusion.XlsIO assembly to export as excel. -![](Exporting_images/Exporting_img1.png) +![Excel Exporting in Angular Chart](Exporting_images/Exporting_img1.png) #### Multiple chart excel exporting @@ -260,7 +260,7 @@ Export multiple chart to excel at server-side {% endhighlight %} -![](Exporting_images/Exporting_img2.png) +![Multiple Excel Exporting in Angular Chart](Exporting_images/Exporting_img2.png) ## Naming the exported file @@ -279,7 +279,7 @@ We can also rotate the chart and can export it. Possible angles of rotation are {% endhighlight %} -![](Exporting_images/Exporting_img3.png) +![Rotating the Chart in Angular](Exporting_images/Exporting_img3.png) ## Setting orientation for the document diff --git a/angular/GettingStarted/getting-started-with-webpack-aot.md b/angular/GettingStarted/getting-started-with-webpack-aot.md index 1cebe9b9..eec8b6f6 100644 --- a/angular/GettingStarted/getting-started-with-webpack-aot.md +++ b/angular/GettingStarted/getting-started-with-webpack-aot.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with Webpack Ahead-of-Time Configuration -description: Overview of Syncfusion Essential Angular. +title: Getting started with Webpack in Angular Application | Syncfusion +description: Learn here all about Getting started with Webpack Ahead-of-Time Configuration in Syncfusion Essential Angular Chart control, its elements, and more. platform: Angular control: Introduction documentation: ug --- -# Getting started with Webpack Ahead-of-Time Configuration +# Getting started with Webpack in Angular Application To quick start with Syncfusion JavaScript Angular components run the below commands to clone the repository for [Webpack starter](https://github.com/syncfusion/angular2-seeds) and installing required dependency packages. @@ -68,13 +68,13 @@ The below steps depicts the configuration of `@ngtools/webpack` in Angular appli ### Options for AngularCompilerPlugin -* Add instance of [AngularCompilerPlugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack), which has an apply property. This apply property is called by the webpack compiler, giving access to the entire compilation life cycle. Add options `tsConfigPath` and `entryModule` with `AngularCompilerPlugin` instance. +* Add instance of [AngularCompilerPlugin](https://github.com/angular/angular-cli/tree/main/packages/ngtools/webpack), which has an apply property. This apply property is called by the webpack compiler, giving access to the entire compilation life cycle. Add options `tsConfigPath` and `entryModule` with `AngularCompilerPlugin` instance. * `tsConfigPath` - The path to the `tsconfig.json` file. In your `tsconfig.json`, you can pass options to the Angular Compiler with `angularCompilerOptions`. * `entryModule` - Optional if specified in `angularCompilerOptions`. The path and classname of the main application module. This follows the format `path/to/file#ClassName`. -N> To know more about Options in AOT refer [here](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack) +N> To know more about Options in AOT refer [here](https://github.com/angular/angular-cli/tree/main/packages/ngtools/webpack) Refer to the below AOT configuration code snippet for `config/webpack.dev.js` file. @@ -652,10 +652,10 @@ export const rootRouterConfig: Routes = [ ## Running the application -* Now run the application with below command and navigate to [http://localhost:3000/](http://localhost:3000/) to see the output window. +* Now run the application with below command and navigate to [http://localhost:3000/](https://locall.host/3000/) to see the output window. {% highlight javascript %} npm start {% endhighlight %} -![](/angular/GettingStarted/Images/aotoutput.png) \ No newline at end of file +![Running the Application in Angular Chart ](GettingStarted/Images/aotoutput.png) \ No newline at end of file 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").