Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion angular/Chart/Legend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
14 changes: 7 additions & 7 deletions angular/CircularGauge/Labels.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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

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

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

Expand All @@ -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)

60 changes: 30 additions & 30 deletions angular/Grid/Editing.md
Original file line number Diff line number Diff line change
@@ -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.

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

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

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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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:
Expand All @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -1545,7 +1545,7 @@ public ActionResult BatchUpdate(string action, List<EditableOrder> added, List<E

Please refer the below image for more information about batch parameters

![](Editing_images/Editing_img25.png)
![Angular Grid batch URL](Editing_images/Editing_img25.png)


## Adding New Row Position
Expand Down Expand Up @@ -1594,7 +1594,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_img26.png)
![Angular Grid adds new row position](Editing_images/Editing_img26.png)


## Render with blank row for easy add new
Expand Down Expand Up @@ -1645,7 +1645,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_img27.png)
![Angular Grid render with blank row](Editing_images/Editing_img27.png)


N> 1. If it is remote, then the newly added record is placed based on the index from current view data.
Expand Down Expand Up @@ -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)
![Angular Grid default column values on add new](Editing_images/Editing_img28.png)