diff --git a/angular/Chart/Legend.md b/angular/Chart/Legend.md index 0fc32ef3..56d6dbbc 100644 --- a/angular/Chart/Legend.md +++ b/angular/Chart/Legend.md @@ -7,7 +7,7 @@ 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 babebaf7..d72b93a3 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 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. @@ -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) diff --git a/angular/Grid/Editing.md b/angular/Grid/Editing.md index 5c16b67b..0b4ff57b 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: Editing in Angular Grid Control | Syncfusion +description: Learn here all about Editing support in Syncfusion Essential Angular Grid control, its elements, and more. platform: Angular control: Grid documentation: ug api: /api/Angular/grid --- -# Editing +# 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. -![](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. -![](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 before](Editing_images/Editing_img6.png) {:caption} 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 @@ -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 before](Editing_images/Editing_img9.png) {:caption} Before the template elements are converted to JS controls -![](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 @@ -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 before](Editing_images/Editing_img13.png) {:caption} Before the template elements are 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. -![](Editing_images/Editing_img15.png) +![Angular Grid batch](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 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. -![](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. @@ -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