From a19e793152416ad438472915b7e9b5433e2822f8 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Wed, 10 Aug 2022 19:35:21 +0300 Subject: [PATCH 01/11] image alt text changes --- angular/Grid/Editing.md | 60 ++++++++++++++++++++--------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/angular/Grid/Editing.md b/angular/Grid/Editing.md index 5c16b67b..6271c14b 100644 --- a/angular/Grid/Editing.md +++ b/angular/Grid/Editing.md @@ -1,13 +1,13 @@ --- layout: post -title: Editing with Grid widget for Syncfusion Essential Angular-2 -description: How to perform editing and configure edit time functionalities like edit type, edit time controls etc +title: Grid Widgets in Angular| Syncfusion +description: Learn here all more about Grid Widgets support in Syncfusion Angular control, its elements, and more. platform: Angular control: Grid documentation: ug api: /api/Angular/grid --- -# Editing +# Editing in Angular Grid The grid control has support for dynamic insertion, updating and deletion of records. You can start the edit action either by double clicking the particular row or by selecting the required row and clicking on Edit icon in toolbar. Similarly, you can add new record to grid either by clicking on insert icon in toolbar or on an external button which is bound to call [`addRecord`](https://help.syncfusion.com/api/angular/ejgrid#methods:addrecord "addRecord") method of grid. `Save` and `Cancel` while on edit mode is possible using respective toolbar icon in grid. @@ -63,7 +63,7 @@ N> For [`toolbarItems`](https://help.syncfusion.com/api/angular/ejgrid#members:t The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img1.png) +![Anglar Grid editing](Editing_images/Editing_img1.png) ## Cell edit type and its params @@ -168,7 +168,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img4.png) +![Angular Grid Cell edit type and its params](Editing_images/Editing_img4.png) ## Cell Edit Template @@ -237,7 +237,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img3.png) +![Angular Grid cell edit template](Editing_images/Editing_img3.png) ## Edit Modes @@ -289,7 +289,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img4.png) +![Angular Grid edit modes](Editing_images/Editing_img4.png) ### Inline Form @@ -337,12 +337,12 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img4.png) +![Angular Grid inline](Editing_images/Editing_img4.png) The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img5.png) +![Angular Grid inline form](Editing_images/Editing_img5.png) ### Inline Template Form @@ -441,13 +441,13 @@ Place the ng-template in the "index.html" page. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img6.png) +![Angular Grid inline template form](Editing_images/Editing_img6.png) {:caption} Before the template elements are converted to JS controls -![](Editing_images/Editing_img7.png) +![Angular Grid before the template elements are converted to JS controls](Editing_images/Editing_img7.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -497,7 +497,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img8.png) +![Angular Grid dialog](Editing_images/Editing_img8.png) ### Dialog Template Form @@ -596,11 +596,11 @@ Place the ng-template in the "index.html" page. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img9.png) +![Angular Grid dialog template form](Editing_images/Editing_img9.png) {:caption} Before the template elements are converted to JS controls -![](Editing_images/Editing_img10.png) +![Angular Grid place the template in the index.html page](Editing_images/Editing_img10.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -652,7 +652,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img11.png) +![Angular Grid external form](Editing_images/Editing_img11.png) Form Position: @@ -707,7 +707,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img12.png) +![Angular Grid form position](Editing_images/Editing_img12.png) ### External Template Form @@ -805,11 +805,11 @@ Place the ng-template in the "index.html" page. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img13.png) +![Angular Grid external template Form](Editing_images/Editing_img13.png) {:caption} Before the template elements are converted to JS controls -![](Editing_images/Editing_img14.png) +![Angylar Grid converted to JS controls](Editing_images/Editing_img14.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -862,7 +862,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img15.png) +![Angular Grid batch/excel-like](Editing_images/Editing_img15.png) ## Confirmation messages @@ -957,7 +957,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img17.png) +![Angular Grid confirmation messages](Editing_images/Editing_img17.png) ## Column Validation @@ -1092,7 +1092,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img18.png) +![Angular Grid column validation](Editing_images/Editing_img18.png) ## Persisting data in Server @@ -1181,7 +1181,7 @@ The grid actions (sorting, filtering, paging, searching, and aggregates) details Please refer the below screen shot. -![](Editing_images/Editing_img20.png) +![Angular Grid persisting data in Server](Editing_images/Editing_img20.png) Also, using 'DataOperations' helper class you can perform grid action at server side. The in-built methods that we have provided in the DataOperations class are listed below. @@ -1370,7 +1370,7 @@ public ActionResult Insert(EditableOrder value) The newly added record details are bound to the 'value' parameter. Please refer the below image. -![](Editing_images/Editing_img21.png) +![Angular Grid insert record](Editing_images/Editing_img21.png) ### Update Record: @@ -1390,7 +1390,7 @@ public ActionResult Update(EditableOrder value) The updated record details are bound to the 'value' parameter. Please refer the below image. -![](Editing_images/Editing_img22.png) +![Angular Grid update record](Editing_images/Editing_img22.png) ### Delete Record: @@ -1410,7 +1410,7 @@ public ActionResult Remove(int key) The deleted record primary key value is bound to the 'key' parameter. Please refer the below image. -![](Editing_images/Editing_img23.png) +![Angular Grid delete record](Editing_images/Editing_img23.png) ### CRUD URL: @@ -1475,7 +1475,7 @@ public ActionResult CrudUpdate(EditableOrder value, string action, int key) Please refer the below image to know about the action parameter -![](Editing_images/Editing_img24.png) +![Angular Grid CRUD URL](Editing_images/Editing_img24.png) N> If you specify `insertUrl` along with `CrudUrl` then while adding `insertUrl` only called. @@ -1545,7 +1545,7 @@ public ActionResult BatchUpdate(string action, List added, List 1. If it is remote, then the newly added record is placed based on the index from current view data. @@ -1698,4 +1698,4 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img28.png) \ No newline at end of file +![Angular Grid default column values on add new](Editing_images/Editing_img28.png) \ No newline at end of file From a886a48be46a2ebf435a045d20955fb6920a4b53 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Thu, 11 Aug 2022 14:26:53 +0300 Subject: [PATCH 02/11] title and description renamed --- angular/Grid/Editing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/angular/Grid/Editing.md b/angular/Grid/Editing.md index 6271c14b..27ece589 100644 --- a/angular/Grid/Editing.md +++ b/angular/Grid/Editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Grid Widgets in Angular| Syncfusion -description: Learn here all more about Grid Widgets support in Syncfusion Angular control, its elements, and more. +title: Editing in Angular Grid Control | Syncfusion +description: Learn here all more about Editing support in Syncfusion Essential Angular Grid control, its elements, and more. platform: Angular control: Grid documentation: ug From eb8abbee6ff878815c1b0ff83f825d326d8001bc Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Fri, 12 Aug 2022 12:13:28 +0300 Subject: [PATCH 03/11] more removed --- angular/Grid/Editing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/Grid/Editing.md b/angular/Grid/Editing.md index 27ece589..d610d271 100644 --- a/angular/Grid/Editing.md +++ b/angular/Grid/Editing.md @@ -1,7 +1,7 @@ --- layout: post title: Editing in Angular Grid Control | Syncfusion -description: Learn here all more about Editing support in Syncfusion Essential Angular Grid control, its elements, and more. +description: Learn here all about Editing support in Syncfusion Essential Angular Grid control, its elements, and more. platform: Angular control: Grid documentation: ug From 104665c0462f4048134cce0a0bcb1ea6eaf29828 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Mon, 19 Sep 2022 20:03:51 +0300 Subject: [PATCH 04/11] image renamed --- angular/CircularGauge/Labels.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/angular/CircularGauge/Labels.md b/angular/CircularGauge/Labels.md index babebaf7..ea199233 100644 --- a/angular/CircularGauge/Labels.md +++ b/angular/CircularGauge/Labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Labels -description: labels +title: Labels in Angular Circular Gauge Control | Syncfusion +description: Learn here all about labels support in Syncfusion Essential Angular Circular Gauge control, its elements, and more. platform: Angular control: Circular Gauge documentation: ug --- -# Labels +# Labels in Angular Circular Gauge **Labels** are units that are used to display the values in the scales. You can customize Labels with the properties like angle, color, font, opacity, etc. @@ -29,7 +29,7 @@ documentation: ug Execute the above code to render the following output. -![](Labels_images/Labels_img1.png) +![Angular Circular Gauge adding labels collection](Labels_images/Labels_img1.png) ## Label Customization @@ -82,7 +82,7 @@ this.pointerLabels = [{ Execute the above code to render the following output. -![](Labels_images/Labels_img2.png) +![Angular Circular Gauge labels customization](Labels_images/Labels_img2.png) **Unit text and Position** @@ -116,7 +116,7 @@ Labels can be positioned with the help of two properties such as **distanceFromS Execute the above code to render the following output. -![](Labels_images/Labels_img3.png) +![Angular Circular Gauge unit text and position](Labels_images/Labels_img3.png) ## Multiple Labels @@ -142,5 +142,5 @@ You can achieve multiple labels such as minor and major in a **Gauge** sample sc Execute the above code to render the following output. -![](Labels_images/Labels_img4.png) +![Angular Circular Gauge multiple labels](Labels_images/Labels_img4.png) From 8c2754f24cfc3afe6b17cbd6b91160e547968882 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Mon, 19 Sep 2022 20:06:44 +0300 Subject: [PATCH 05/11] image renamed --- angular/Chart/Legend.md | 40 +++++++++++++++++++------------------- angular/Grid/Print-Grid.md | 12 ++++++------ 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/angular/Chart/Legend.md b/angular/Chart/Legend.md index 31ac8711..0fc32ef3 100644 --- a/angular/Chart/Legend.md +++ b/angular/Chart/Legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Chart legend -description: How to cutomize the legend in Essential Angular Chart. +title: Legend in Angular Chart Control | Syncfusion +description: Learn here all about Legend support in Syncfusion Essential Angular Chart control, its elements, and more platform: Angular control: Chart documentation: ug --- -# Legend +# Legend in Angular Chart The legend contains the list of chart series and Trendlines that appear in a chart. @@ -22,7 +22,7 @@ By default, the legend is enabled in the chart. You can enable or disable it by {% endhighlight %} -![](Legend_images/Legend_img1.png) +![Angular Chart legend visibility](Legend_images/Legend_img1.png) ## Legend title @@ -35,7 +35,7 @@ To add the title to the legend, you have to specify the `legend.title.text` opti {% endhighlight %} -![](Legend_images/Legend_img2.png) +![Angular Chart legend title](Legend_images/Legend_img2.png) ## Position and Align the Legend @@ -49,7 +49,7 @@ By using the `position` option, you can position the legend at *left*, *right*, {% endhighlight %} -![](Legend_images/Legend_img3.png) +![Angular Chart position and align the legend](Legend_images/Legend_img3.png) **Legend Alignment** @@ -62,7 +62,7 @@ You can align the legend to the *center*, *far* or *near* based on its position {% endhighlight %} -![](Legend_images/Legend_img4.png) +![Angular Chart legend alignment](Legend_images/Legend_img4.png) ## Arrange legend items in the rows and columns @@ -85,7 +85,7 @@ You can arrange the legend items horizontally and vertically by using the `rowCo {% endhighlight %} -![](Legend_images/Legend_img5.png) +![Angular Chart arrange legend items in the rows and column](Legend_images/Legend_img5.png) ## Customization @@ -101,7 +101,7 @@ To change the legend icon shape, you have to specify the shape in the `shape` pr {% endhighlight %} -![](Legend_images/Legend_img6.png) +![Angular Chart customization](Legend_images/Legend_img6.png) ### Legend items size and border @@ -117,7 +117,7 @@ You can change the size of the legend items by using the `itemStyle.width` and ` {% endhighlight %} -![](Legend_images/Legend_img7.png) +![Angular Chart legend shape](Legend_images/Legend_img7.png) ### Legend size @@ -130,7 +130,7 @@ By default, legend takes 20% of the **height** horizontally when it was placed o {% endhighlight %} -![](Legend_images/Legend_img8.png) +![Angular Chart legend size](Legend_images/Legend_img8.png) ### Legend Item Padding @@ -144,7 +144,7 @@ You can control the spacing between the legend items by using the `itemPadding` {% endhighlight %} -![](Legend_images/Legend_img9.png) +![Angular Chart legend item padding](Legend_images/Legend_img9.png) ### Legend border @@ -157,7 +157,7 @@ You can customize the legend border by using the `border` option in the legend. {% endhighlight %} -![](Legend_images/Legend_img10.png) +![Angular Chart legend border](Legend_images/Legend_img10.png) ### Scrollbar for legend @@ -171,7 +171,7 @@ You can enable or disable the legend scrollbar by using the `enableScrollbar` op {% endhighlight %} -![](Legend_images/Legend_img11.png) +![Angular Chart scrollbar for legend](Legend_images/Legend_img11.png) ### Customize the legend text @@ -192,7 +192,7 @@ this.titleFont= { fontFamily: 'Segoe UI', fontStyle: 'Italic', {% endhighlight %} -![](Legend_images/Legend_img12.png) +![Angular Chart customize the legend text](Legend_images/Legend_img12.png) ### LegendItems Text Overflow @@ -207,20 +207,20 @@ You can trim the legend item text when its width exceeds the `legend.textWidth`, {% endhighlight %} -![](Legend_images/Legend_img13.png) +![Angular Chart legend items text overflow](Legend_images/Legend_img13.png) **Wrap** By specifying `textOverflow` as **"wrap"**, you can wrap the legend text by word. -![](Legend_images/Legend_img14.png) +![Angular Chart wrap](Legend_images/Legend_img14.png) **WrapAndTrim** You can wrap and trim the legend text by specifying `textOverflow` as **"wrapAndTrim"**. The original text will be displayed on mouse hover. -![](Legend_images/Legend_img15.png) +![Angular Chart wrap and trim](Legend_images/Legend_img15.png) ## Handle the legend item clicked @@ -253,7 +253,7 @@ You can select a specific series or point while clicking on the corresponding le {% endhighlight %} -![](Legend_images/Legend_img16.png) +![Angular Chart series selection on legend item click](Legend_images/Legend_img16.png) @@ -276,4 +276,4 @@ You can collapse the specific series/point legend item displaying in the chart, {% endhighlight %} -![](Legend_images/Legend_img17.png) \ No newline at end of file +![Angular Chart collapsing legend item](Legend_images/Legend_img17.png) \ No newline at end of file diff --git a/angular/Grid/Print-Grid.md b/angular/Grid/Print-Grid.md index c43d83c8..f1f4e6c3 100644 --- a/angular/Grid/Print-Grid.md +++ b/angular/Grid/Print-Grid.md @@ -1,13 +1,13 @@ --- layout: post -title: Print with Grid widget for Syncfusion Angular-2 -description: How to enable print option in Grid +title: Print in Angular Grid Control | Syncfusion +description: Learn here all about print support in Syncfusion Essential Angular Grid control, its elements, and more. platform: Angular control: Grid documentation: ug api: /api/angular/ejgrid --- -# Print +# Print in Angular Grid You need to use [`print()`](https://help.syncfusion.com/api/angular/ejgrid#methods:print) method from Grid instance to print the Grid. You can add Print option in Toolbar item by adding `ej.Grid.ToolBarItems.PrintGrid` in [`toolbarItems`](https://help.syncfusion.com/api/angular/grid#members:toolbarsettings-toolbaritems). @@ -52,7 +52,7 @@ export class GridComponent { {% endhighlight %} -![](Print-Grid_images/Print_img1.png) +![Angular Grid print](Print-Grid_images/Print_img1.png) ## Page Setup @@ -110,12 +110,12 @@ export class GridComponent { {% endhighlight %} -![](Print-Grid_images/Print_img2.png) +![Angular Grid page setup](Print-Grid_images/Print_img2.png) {:caption} Grid with external button for Print -![](Print-Grid_images/Print_img3.png) +![Angular Grid Print visible page](Print-Grid_images/Print_img3.png) {:caption} Print dialog in Chrome browser From 6f7f89a5233d849c634da82918ad51eeab9beb6f Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Mon, 19 Sep 2022 20:19:05 +0300 Subject: [PATCH 06/11] error resolved --- angular/Grid/Print-Grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/Grid/Print-Grid.md b/angular/Grid/Print-Grid.md index f1f4e6c3..90150738 100644 --- a/angular/Grid/Print-Grid.md +++ b/angular/Grid/Print-Grid.md @@ -9,7 +9,7 @@ api: /api/angular/ejgrid --- # Print in Angular Grid -You need to use [`print()`](https://help.syncfusion.com/api/angular/ejgrid#methods:print) method from Grid instance to print the Grid. You can add Print option in Toolbar item by adding `ej.Grid.ToolBarItems.PrintGrid` in [`toolbarItems`](https://help.syncfusion.com/api/angular/grid#members:toolbarsettings-toolbaritems). +You need to use [print](https://help.syncfusion.com/api/angular/ejgrid#methods:print) method from Grid instance to print the Grid. You can add Print option in Toolbar item by adding `ej.Grid.ToolBarItems.PrintGrid` in [`toolbarItems`](https://help.syncfusion.com/api/angular/grid#members:toolbarsettings-toolbaritems). {% highlight html %} From 65da4d0bf05efe27ddee7ce708869776a1ef7788 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Tue, 20 Sep 2022 12:55:32 +0300 Subject: [PATCH 07/11] Revert "error resolved" This reverts commit 6f7f89a5233d849c634da82918ad51eeab9beb6f. --- angular/Grid/Print-Grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/Grid/Print-Grid.md b/angular/Grid/Print-Grid.md index 90150738..f1f4e6c3 100644 --- a/angular/Grid/Print-Grid.md +++ b/angular/Grid/Print-Grid.md @@ -9,7 +9,7 @@ api: /api/angular/ejgrid --- # Print in Angular Grid -You need to use [print](https://help.syncfusion.com/api/angular/ejgrid#methods:print) method from Grid instance to print the Grid. You can add Print option in Toolbar item by adding `ej.Grid.ToolBarItems.PrintGrid` in [`toolbarItems`](https://help.syncfusion.com/api/angular/grid#members:toolbarsettings-toolbaritems). +You need to use [`print()`](https://help.syncfusion.com/api/angular/ejgrid#methods:print) method from Grid instance to print the Grid. You can add Print option in Toolbar item by adding `ej.Grid.ToolBarItems.PrintGrid` in [`toolbarItems`](https://help.syncfusion.com/api/angular/grid#members:toolbarsettings-toolbaritems). {% highlight html %} From 9e5936b4478ec2a2dc4836956fb38f57318cdc99 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Tue, 20 Sep 2022 12:56:23 +0300 Subject: [PATCH 08/11] Revert "image renamed" This reverts commit 8c2754f24cfc3afe6b17cbd6b91160e547968882. --- angular/Chart/Legend.md | 40 +++++++++++++++++++------------------- angular/Grid/Print-Grid.md | 12 ++++++------ 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/angular/Chart/Legend.md b/angular/Chart/Legend.md index 0fc32ef3..31ac8711 100644 --- a/angular/Chart/Legend.md +++ b/angular/Chart/Legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Angular Chart Control | Syncfusion -description: Learn here all about Legend support in Syncfusion Essential Angular Chart control, its elements, and more +title: Chart legend +description: How to cutomize the legend in Essential Angular Chart. platform: Angular control: Chart documentation: ug --- -# Legend in Angular Chart +# Legend The legend contains the list of chart series and Trendlines that appear in a chart. @@ -22,7 +22,7 @@ By default, the legend is enabled in the chart. You can enable or disable it by {% endhighlight %} -![Angular Chart legend visibility](Legend_images/Legend_img1.png) +![](Legend_images/Legend_img1.png) ## Legend title @@ -35,7 +35,7 @@ To add the title to the legend, you have to specify the `legend.title.text` opti {% endhighlight %} -![Angular Chart legend title](Legend_images/Legend_img2.png) +![](Legend_images/Legend_img2.png) ## Position and Align the Legend @@ -49,7 +49,7 @@ By using the `position` option, you can position the legend at *left*, *right*, {% endhighlight %} -![Angular Chart position and align the legend](Legend_images/Legend_img3.png) +![](Legend_images/Legend_img3.png) **Legend Alignment** @@ -62,7 +62,7 @@ You can align the legend to the *center*, *far* or *near* based on its position {% endhighlight %} -![Angular Chart legend alignment](Legend_images/Legend_img4.png) +![](Legend_images/Legend_img4.png) ## Arrange legend items in the rows and columns @@ -85,7 +85,7 @@ You can arrange the legend items horizontally and vertically by using the `rowCo {% endhighlight %} -![Angular Chart arrange legend items in the rows and column](Legend_images/Legend_img5.png) +![](Legend_images/Legend_img5.png) ## Customization @@ -101,7 +101,7 @@ To change the legend icon shape, you have to specify the shape in the `shape` pr {% endhighlight %} -![Angular Chart customization](Legend_images/Legend_img6.png) +![](Legend_images/Legend_img6.png) ### Legend items size and border @@ -117,7 +117,7 @@ You can change the size of the legend items by using the `itemStyle.width` and ` {% endhighlight %} -![Angular Chart legend shape](Legend_images/Legend_img7.png) +![](Legend_images/Legend_img7.png) ### Legend size @@ -130,7 +130,7 @@ By default, legend takes 20% of the **height** horizontally when it was placed o {% endhighlight %} -![Angular Chart legend size](Legend_images/Legend_img8.png) +![](Legend_images/Legend_img8.png) ### Legend Item Padding @@ -144,7 +144,7 @@ You can control the spacing between the legend items by using the `itemPadding` {% endhighlight %} -![Angular Chart legend item padding](Legend_images/Legend_img9.png) +![](Legend_images/Legend_img9.png) ### Legend border @@ -157,7 +157,7 @@ You can customize the legend border by using the `border` option in the legend. {% endhighlight %} -![Angular Chart legend border](Legend_images/Legend_img10.png) +![](Legend_images/Legend_img10.png) ### Scrollbar for legend @@ -171,7 +171,7 @@ You can enable or disable the legend scrollbar by using the `enableScrollbar` op {% endhighlight %} -![Angular Chart scrollbar for legend](Legend_images/Legend_img11.png) +![](Legend_images/Legend_img11.png) ### Customize the legend text @@ -192,7 +192,7 @@ this.titleFont= { fontFamily: 'Segoe UI', fontStyle: 'Italic', {% endhighlight %} -![Angular Chart customize the legend text](Legend_images/Legend_img12.png) +![](Legend_images/Legend_img12.png) ### LegendItems Text Overflow @@ -207,20 +207,20 @@ You can trim the legend item text when its width exceeds the `legend.textWidth`, {% endhighlight %} -![Angular Chart legend items text overflow](Legend_images/Legend_img13.png) +![](Legend_images/Legend_img13.png) **Wrap** By specifying `textOverflow` as **"wrap"**, you can wrap the legend text by word. -![Angular Chart wrap](Legend_images/Legend_img14.png) +![](Legend_images/Legend_img14.png) **WrapAndTrim** You can wrap and trim the legend text by specifying `textOverflow` as **"wrapAndTrim"**. The original text will be displayed on mouse hover. -![Angular Chart wrap and trim](Legend_images/Legend_img15.png) +![](Legend_images/Legend_img15.png) ## Handle the legend item clicked @@ -253,7 +253,7 @@ You can select a specific series or point while clicking on the corresponding le {% endhighlight %} -![Angular Chart series selection on legend item click](Legend_images/Legend_img16.png) +![](Legend_images/Legend_img16.png) @@ -276,4 +276,4 @@ You can collapse the specific series/point legend item displaying in the chart, {% endhighlight %} -![Angular Chart collapsing legend item](Legend_images/Legend_img17.png) \ No newline at end of file +![](Legend_images/Legend_img17.png) \ No newline at end of file diff --git a/angular/Grid/Print-Grid.md b/angular/Grid/Print-Grid.md index f1f4e6c3..c43d83c8 100644 --- a/angular/Grid/Print-Grid.md +++ b/angular/Grid/Print-Grid.md @@ -1,13 +1,13 @@ --- layout: post -title: Print in Angular Grid Control | Syncfusion -description: Learn here all about print support in Syncfusion Essential Angular Grid control, its elements, and more. +title: Print with Grid widget for Syncfusion Angular-2 +description: How to enable print option in Grid platform: Angular control: Grid documentation: ug api: /api/angular/ejgrid --- -# Print in Angular Grid +# Print You need to use [`print()`](https://help.syncfusion.com/api/angular/ejgrid#methods:print) method from Grid instance to print the Grid. You can add Print option in Toolbar item by adding `ej.Grid.ToolBarItems.PrintGrid` in [`toolbarItems`](https://help.syncfusion.com/api/angular/grid#members:toolbarsettings-toolbaritems). @@ -52,7 +52,7 @@ export class GridComponent { {% endhighlight %} -![Angular Grid print](Print-Grid_images/Print_img1.png) +![](Print-Grid_images/Print_img1.png) ## Page Setup @@ -110,12 +110,12 @@ export class GridComponent { {% endhighlight %} -![Angular Grid page setup](Print-Grid_images/Print_img2.png) +![](Print-Grid_images/Print_img2.png) {:caption} Grid with external button for Print -![Angular Grid Print visible page](Print-Grid_images/Print_img3.png) +![](Print-Grid_images/Print_img3.png) {:caption} Print dialog in Chrome browser From 466575306048298b49790ed2ef5eb90506c77cc8 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Tue, 20 Sep 2022 12:56:58 +0300 Subject: [PATCH 09/11] image renamed --- angular/Chart/Legend.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/angular/Chart/Legend.md b/angular/Chart/Legend.md index 31ac8711..0fc32ef3 100644 --- a/angular/Chart/Legend.md +++ b/angular/Chart/Legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Chart legend -description: How to cutomize the legend in Essential Angular Chart. +title: Legend in Angular Chart Control | Syncfusion +description: Learn here all about Legend support in Syncfusion Essential Angular Chart control, its elements, and more platform: Angular control: Chart documentation: ug --- -# Legend +# Legend in Angular Chart The legend contains the list of chart series and Trendlines that appear in a chart. @@ -22,7 +22,7 @@ By default, the legend is enabled in the chart. You can enable or disable it by {% endhighlight %} -![](Legend_images/Legend_img1.png) +![Angular Chart legend visibility](Legend_images/Legend_img1.png) ## Legend title @@ -35,7 +35,7 @@ To add the title to the legend, you have to specify the `legend.title.text` opti {% endhighlight %} -![](Legend_images/Legend_img2.png) +![Angular Chart legend title](Legend_images/Legend_img2.png) ## Position and Align the Legend @@ -49,7 +49,7 @@ By using the `position` option, you can position the legend at *left*, *right*, {% endhighlight %} -![](Legend_images/Legend_img3.png) +![Angular Chart position and align the legend](Legend_images/Legend_img3.png) **Legend Alignment** @@ -62,7 +62,7 @@ You can align the legend to the *center*, *far* or *near* based on its position {% endhighlight %} -![](Legend_images/Legend_img4.png) +![Angular Chart legend alignment](Legend_images/Legend_img4.png) ## Arrange legend items in the rows and columns @@ -85,7 +85,7 @@ You can arrange the legend items horizontally and vertically by using the `rowCo {% endhighlight %} -![](Legend_images/Legend_img5.png) +![Angular Chart arrange legend items in the rows and column](Legend_images/Legend_img5.png) ## Customization @@ -101,7 +101,7 @@ To change the legend icon shape, you have to specify the shape in the `shape` pr {% endhighlight %} -![](Legend_images/Legend_img6.png) +![Angular Chart customization](Legend_images/Legend_img6.png) ### Legend items size and border @@ -117,7 +117,7 @@ You can change the size of the legend items by using the `itemStyle.width` and ` {% endhighlight %} -![](Legend_images/Legend_img7.png) +![Angular Chart legend shape](Legend_images/Legend_img7.png) ### Legend size @@ -130,7 +130,7 @@ By default, legend takes 20% of the **height** horizontally when it was placed o {% endhighlight %} -![](Legend_images/Legend_img8.png) +![Angular Chart legend size](Legend_images/Legend_img8.png) ### Legend Item Padding @@ -144,7 +144,7 @@ You can control the spacing between the legend items by using the `itemPadding` {% endhighlight %} -![](Legend_images/Legend_img9.png) +![Angular Chart legend item padding](Legend_images/Legend_img9.png) ### Legend border @@ -157,7 +157,7 @@ You can customize the legend border by using the `border` option in the legend. {% endhighlight %} -![](Legend_images/Legend_img10.png) +![Angular Chart legend border](Legend_images/Legend_img10.png) ### Scrollbar for legend @@ -171,7 +171,7 @@ You can enable or disable the legend scrollbar by using the `enableScrollbar` op {% endhighlight %} -![](Legend_images/Legend_img11.png) +![Angular Chart scrollbar for legend](Legend_images/Legend_img11.png) ### Customize the legend text @@ -192,7 +192,7 @@ this.titleFont= { fontFamily: 'Segoe UI', fontStyle: 'Italic', {% endhighlight %} -![](Legend_images/Legend_img12.png) +![Angular Chart customize the legend text](Legend_images/Legend_img12.png) ### LegendItems Text Overflow @@ -207,20 +207,20 @@ You can trim the legend item text when its width exceeds the `legend.textWidth`, {% endhighlight %} -![](Legend_images/Legend_img13.png) +![Angular Chart legend items text overflow](Legend_images/Legend_img13.png) **Wrap** By specifying `textOverflow` as **"wrap"**, you can wrap the legend text by word. -![](Legend_images/Legend_img14.png) +![Angular Chart wrap](Legend_images/Legend_img14.png) **WrapAndTrim** You can wrap and trim the legend text by specifying `textOverflow` as **"wrapAndTrim"**. The original text will be displayed on mouse hover. -![](Legend_images/Legend_img15.png) +![Angular Chart wrap and trim](Legend_images/Legend_img15.png) ## Handle the legend item clicked @@ -253,7 +253,7 @@ You can select a specific series or point while clicking on the corresponding le {% endhighlight %} -![](Legend_images/Legend_img16.png) +![Angular Chart series selection on legend item click](Legend_images/Legend_img16.png) @@ -276,4 +276,4 @@ You can collapse the specific series/point legend item displaying in the chart, {% endhighlight %} -![](Legend_images/Legend_img17.png) \ No newline at end of file +![Angular Chart collapsing legend item](Legend_images/Legend_img17.png) \ No newline at end of file From e94952a7b349479bd7ec0730ea43c305b7b10dff Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Tue, 20 Sep 2022 14:47:47 +0300 Subject: [PATCH 10/11] H1 tag changed --- angular/Chart/Legend.md | 4 ++-- angular/CircularGauge/Labels.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/angular/Chart/Legend.md b/angular/Chart/Legend.md index 0fc32ef3..aa002b40 100644 --- a/angular/Chart/Legend.md +++ b/angular/Chart/Legend.md @@ -1,13 +1,13 @@ --- layout: post title: Legend in Angular Chart Control | Syncfusion -description: Learn here all about Legend support in Syncfusion Essential Angular Chart control, its elements, and more +description: Learn here all about Legend support in Syncfusion Essential Angular Chart control, its elements, and more. platform: Angular control: Chart documentation: ug --- -# Legend in Angular Chart +# Legend in Essential Angular Chart The legend contains the list of chart series and Trendlines that appear in a chart. diff --git a/angular/CircularGauge/Labels.md b/angular/CircularGauge/Labels.md index ea199233..d72b93a3 100644 --- a/angular/CircularGauge/Labels.md +++ b/angular/CircularGauge/Labels.md @@ -7,7 +7,7 @@ control: Circular Gauge documentation: ug --- -# Labels in Angular Circular Gauge +# Labels in Essential Angular Circular Gauge **Labels** are units that are used to display the values in the scales. You can customize Labels with the properties like angle, color, font, opacity, etc. From 8304e9a600013bd8af90336e4f89290e38ba2623 Mon Sep 17 00:00:00 2001 From: Sharly-Atieno <95272441+Sharly-Atieno@users.noreply.github.com> Date: Wed, 2 Nov 2022 16:10:26 +0300 Subject: [PATCH 11/11] images renamed --- angular/Grid/Editing.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/angular/Grid/Editing.md b/angular/Grid/Editing.md index d610d271..0b4ff57b 100644 --- a/angular/Grid/Editing.md +++ b/angular/Grid/Editing.md @@ -7,7 +7,7 @@ control: Grid documentation: ug api: /api/Angular/grid --- -# Editing in Angular Grid +# Editing in Essential Angular Grid The grid control has support for dynamic insertion, updating and deletion of records. You can start the edit action either by double clicking the particular row or by selecting the required row and clicking on Edit icon in toolbar. Similarly, you can add new record to grid either by clicking on insert icon in toolbar or on an external button which is bound to call [`addRecord`](https://help.syncfusion.com/api/angular/ejgrid#methods:addrecord "addRecord") method of grid. `Save` and `Cancel` while on edit mode is possible using respective toolbar icon in grid. @@ -63,7 +63,7 @@ N> For [`toolbarItems`](https://help.syncfusion.com/api/angular/ejgrid#members:t The following output is displayed as a result of the above code example. -![Anglar Grid editing](Editing_images/Editing_img1.png) +![Angular Grid editing](Editing_images/Editing_img1.png) ## Cell edit type and its params @@ -168,7 +168,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![Angular Grid Cell edit type and its params](Editing_images/Editing_img4.png) +![Angular Grid cell edit type and its params](Editing_images/Editing_img4.png) ## Cell Edit Template @@ -337,7 +337,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![Angular Grid inline](Editing_images/Editing_img4.png) +![Angular grid inline](Editing_images/Editing_img4.png) The following output is displayed as a result of the above code example. @@ -441,13 +441,13 @@ Place the ng-template in the "index.html" page. The following output is displayed as a result of the above code example. -![Angular Grid inline template form](Editing_images/Editing_img6.png) +![Angular Grid inline template form before](Editing_images/Editing_img6.png) {:caption} Before the template elements are converted to JS controls -![Angular Grid before the template elements are converted to JS controls](Editing_images/Editing_img7.png) +![Angular Grid inline template form after](Editing_images/Editing_img7.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -596,11 +596,11 @@ Place the ng-template in the "index.html" page. The following output is displayed as a result of the above code example. -![Angular Grid dialog template form](Editing_images/Editing_img9.png) +![Angular Grid dialog template form before](Editing_images/Editing_img9.png) {:caption} Before the template elements are converted to JS controls -![Angular Grid place the template in the index.html page](Editing_images/Editing_img10.png) +![Angular Grid dialog template form after](Editing_images/Editing_img10.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -805,11 +805,11 @@ Place the ng-template in the "index.html" page. The following output is displayed as a result of the above code example. -![Angular Grid external template Form](Editing_images/Editing_img13.png) +![Angular Grid external template form before](Editing_images/Editing_img13.png) {:caption} Before the template elements are converted to JS controls -![Angylar Grid converted to JS controls](Editing_images/Editing_img14.png) +![Angular Grid external template form after](Editing_images/Editing_img14.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -862,7 +862,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![Angular Grid batch/excel-like](Editing_images/Editing_img15.png) +![Angular Grid batch](Editing_images/Editing_img15.png) ## Confirmation messages @@ -1092,7 +1092,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![Angular Grid column validation](Editing_images/Editing_img18.png) +![Angular Grid jquery validation](Editing_images/Editing_img18.png) ## Persisting data in Server @@ -1181,7 +1181,7 @@ The grid actions (sorting, filtering, paging, searching, and aggregates) details Please refer the below screen shot. -![Angular Grid persisting data in Server](Editing_images/Editing_img20.png) +![Angular Grid URL adaptor](Editing_images/Editing_img20.png) Also, using 'DataOperations' helper class you can perform grid action at server side. The in-built methods that we have provided in the DataOperations class are listed below. @@ -1545,7 +1545,7 @@ public ActionResult BatchUpdate(string action, List added, List 1. If it is remote, then the newly added record is placed based on the index from current view data.