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 1/4] 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 2/4] 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 3/4] 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 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 4/4] 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.