docs(grid, treelist): linked popup templates articles in customization (#1475)

* docs(grid, treelist): linked popup templates articles in customization section and enhanced form template articles

Author: yanisslav

components/gantt/gantt-tree/editing/overview.md

@@ -566,5 +566,5 @@ There are a few considerations to keep in mind with the CUD operations of the tr
 ## See Also
 
   * [Live Demo: Gantt Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
-  * [Live Demo: Gantt PopUp Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
+  * [Live Demo: Gantt Popup Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
   * [Live Demo: Gantt InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell)

components/gantt/gantt-tree/editing/popup.md

@@ -23,7 +23,7 @@ In a similar fashion, the `Cancel`, `Delete` command buttons and the `Add` toolb
 
 You can also cancel the events by setting the `IsCancelled` property of the event arguments to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
 
-To enable PopUp editing in the Gantt Tree, set its `TreeListEditMode` property to `GanttTreeListEditMode.Popup`, then handle the CRUD events as shown in the example below.
+To enable Popup editing in the Gantt Tree, set its `TreeListEditMode` property to `GanttTreeListEditMode.Popup`, then handle the CRUD events as shown in the example below.
 
 
 >caption The Command buttons and the Gantt events let you handle data operations in Popup edit mode.

components/grid/editing/built-in-dialogs/delete-confirmation.md

@@ -95,7 +95,7 @@ The delete confirmation dialog triggers before item deletion. You can enable it
 ## See Also
 
 * [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
-* [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
+* [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
 * [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell)
 * [Live Demo: Grid Custom Editor Template](https://demos.telerik.com/blazor-ui/grid/custom-editor)
 * [Live Demo: Grid Custom Edit Form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form)

components/grid/editing/built-in-dialogs/overview.md

@@ -21,7 +21,7 @@ The default texts of the dialogs are exposed in the [localization]({%slug global
 ## See Also
 
 * [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
-* [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
+* [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
 * [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell)
 * [Live Demo: Grid Custom Editor Template](https://demos.telerik.com/blazor-ui/grid/custom-editor)
 * [Live Demo: Grid Custom Edit Form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form)

components/grid/editing/incell.md

@@ -196,7 +196,7 @@ Click a cell, edit it and click outside of the grid to see the change. You can a
 
 * The `OnCreate` event will fire as soon as you click the `Add` button. The Grid will render the new row and enter edit mode for the first editable column (to fire `OnEdit` and let the user alter the column). This means you should have [default values]({%slug grid-kb-default-value-for-new-row%}) that satisfy any initial validation and requirements your models may have.
 
-    * This means that there is no actual inserted item, an item in InCell editing is always in Edit mode, never in Insert mode. Thus, you cannot use the `InsertedItem` field of the Grid [State]({%slug grid-state%}). If you want to insert items programmatically in the Grid, alter the `Data` collection, and use the `OriginalEditItem` feature of the state (see the [Initiate Editing or Inserting of an Item]({%slug grid-state%}#initiate-editing-or-inserting-of-an-item) example - it can put the InLine and PopUp edit modes in Insert mode, but this cannot work for InCell editing).
+    * This means that there is no actual inserted item, an item in InCell editing is always in Edit mode, never in Insert mode. Thus, you cannot use the `InsertedItem` field of the Grid [State]({%slug grid-state%}). If you want to insert items programmatically in the Grid, alter the `Data` collection, and use the `OriginalEditItem` feature of the state (see the [Initiate Editing or Inserting of an Item]({%slug grid-state%}#initiate-editing-or-inserting-of-an-item) example - it can put the InLine and Popup edit modes in Insert mode, but this cannot work for InCell editing).
 
 * The `OnEdit` event fires every time a cell is opened for editing. Until version **2.27**, the event fired **once per row** - when the user edits a cell from a different row.
 

components/grid/editing/overview.md

@@ -452,7 +452,7 @@ There are a few considerations to keep in mind with the CUD operations of the gr
 ## See Also
 
   * [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
-  * [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
+  * [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
   * [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell)
   * [Live Demo: Grid Custom Editor Template](https://demos.telerik.com/blazor-ui/grid/custom-editor)
   * [Live Demo: Grid Custom Edit Form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form)

components/grid/editing/popup.md

@@ -1,19 +1,23 @@
 ---
-title: PopUp Editing
-page_title: Grid - PopUp Editing
+title: Popup Editing
+page_title: Grid - Popup Editing
 description: Popup editing of data in Grid for Blazor.
 slug: components/grid/editing/popup
-tags: telerik,blazor,grid,PopUp,editing
+tags: telerik,blazor,grid,Popup,editing
 published: True
 position: 2
 ---
 
-# Grid PopUp Editing
+# Grid Popup Editing
 
 In this article:
 
 * [Basics](#basics)
 * [Customization](#customization)
+    * [Popup Customization](#popup-customization)
+    * [Edit Form Customization](#edit-form-customization)
+    * [Popup Form Customization](#popup-form-customization)
+    * [Popup Buttons Customization](#popup-buttons-customization)
 
 ## Basics
 
@@ -23,12 +27,12 @@ In a similar fashion, the `Cancel`, `Delete` command buttons and the `Add` toolb
 
 You can also cancel the events by setting the `IsCancelled` property of the event arguments to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
 
-To enable PopUp editing in the grid, set its `EditMode` property to `Telerik.Blazor.GridEditMode.Popup`, then handle the CRUD events as shown in the example below.
+To enable Popup editing in the grid, set its `EditMode` property to `Telerik.Blazor.GridEditMode.Popup`, then handle the CRUD events as shown in the example below.
 
-The PopUp editing mode supports [validation]({%slug common-features/input-validation%}). To use it, all you need to do is decorate your model with the desired annotations. Validation errors will be shown in the popup and will prevent the Update operation.
+The Popup editing mode supports [validation]({%slug common-features/input-validation%}). To use it, all you need to do is decorate your model with the desired annotations. Validation errors will be shown in the popup and will prevent the Update operation.
 
 
->caption The Command buttons and the grid events let you handle data operations in PopUp edit mode (see the code comments for details)
+>caption The Command buttons and the grid events let you handle data operations in Popup edit mode (see the code comments for details)
 
 ````CSHTML
 @using System.ComponentModel.DataAnnotations
@@ -260,9 +264,17 @@ The `GridPopupEditFormSettings` nested tag exposes the following parameters to a
 }
 ````
 
+### Popup Form Customization
+
+In the `GridPopupEditFormSettings`, you can declare a `FormTemplate`. This template enables you to fully customize the appearance and content of the create/edit Popup window in the Grid. For more information and examples on customizing the Grid Popup window, refer to the [Popup Form Template]({%slug grid-templates-popup-form%}) article.
+
+### Popup Buttons Customization
+
+You can specify a `ButtonsTemplate` in the `GridPopupEditFormSettings` to customize how the buttons look in the create/edit Popup window of the Grid. To learn more and see an example of customizing the Grid Popup buttons, refer to the [Popup Buttons Template]({%slug grid-templates-popup-buttons%}) article.
+
 ## See Also
 
-  * [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
+  * [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
   * [Custom Editor Template Per Field]({%slug components/grid/features/templates%}#edit-template)
   * [Custom Editor Layout](https://github.com/telerik/blazor-ui/tree/master/grid/custom-popup-form)
 

components/grid/selection/overview.md

@@ -144,9 +144,9 @@ In the [Incell EditMode]({%slug components/grid/editing/incell%}) selection can
 
 To see how to select the row that is being edited in InCell edit mode without using a `<GridCheckboxColumn />` check out the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article.
 
-#### Inline and PopUp Edit Modes
+#### Inline and Popup Edit Modes
 
-In [Inline EditMode]({%slug components/grid/editing/inline%}) and [PopUp EditMode]({%slug components/grid/editing/popup%}) selection can be done by clicking on the desired row or by using a `<GridCheckboxColumn />`.
+In [Inline EditMode]({%slug components/grid/editing/inline%}) and [Popup EditMode]({%slug components/grid/editing/popup%}) selection can be done by clicking on the desired row or by using a `<GridCheckboxColumn />`.
 
 ### Selection in Template
 

components/grid/sizing.md

@@ -54,7 +54,7 @@ You can increase or decrease the size of the Grid by setting the `Size` attribut
 
 ## Notes
 
-1. The `Size` option does not affect elements displayed inside a PopUp (such as [Filter Menu]({%slug grid-filter-menu%}), [Column Menu]({%slug grid-column-menu%}), etc.). By design, all PopUp elements are rendered on root level, so they are not technically inside the Grid. Thus, the `Size` option cannot propagate to them. Тo change the `Size` options of the elements inside PopUps, you can use a template(where available), so you can override the built-in rendering. You can then add custom elements and explicitly specify their `Size`.
+1. The `Size` option does not affect elements displayed inside a Popup (such as [Filter Menu]({%slug grid-filter-menu%}), [Column Menu]({%slug grid-column-menu%}), etc.). By design, all Popup elements are rendered on root level, so they are not technically inside the Grid. Thus, the `Size` option cannot propagate to them. Тo change the `Size` options of the elements inside Popups, you can use a template(where available), so you can override the built-in rendering. You can then add custom elements and explicitly specify their `Size`.
 
 1. The `Size` option does not propagate to components rendered inside templates (this includes elements in [GridToolBar]({%slug components/grid/features/toolbar%}), [CommandColumn]({%slug components/grid/columns/command%}), etc.). To change the size of the elements in those components you have to set it explicitly.
 

components/grid/templates/popup-form-template.md

@@ -11,7 +11,11 @@ position: 50
 
 # Popup Form Template
 
-With the `FormTemplate` feature, you can customize the appearance and content of the create/edit Popup window of the Grid.
+With the `FormTemplate` feature, you can customize the appearance and content of the create/edit Popup window of the Grid. Declare the desired custom content inside the `<FormTemplate>` inner tag of the `<GridPopupEditFormSettings>`.
+
+You can use the `Context` attribute of the `<FormTemplate>` tag to set the name of the context variable. The context variable is of type `object` and can be cast to the model type to which the Grid is bound.
+
+>When using the template, the default Popup form is replaced by the declared content within the `FormTemplate` tag. Consequently, the default `Update` and `Cancel` buttons are removed. This means the [`OnUpdate` and `OnCancel`](https://docs.telerik.com/blazor-ui/components/grid/events#cud-events) events cannot be triggered. To modify or cancel the update of a record, you need to include custom controls to manage these actions.
 
 >caption Using a `FormTemplate` to modify the Edit/Create Popup window.