docs(Grid): add docs for new row position feature (#3096)

* docs(Grid): add docs for new row position feature

* chore: apply review recommendations

Author: Tsvetomir-Hr

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

@@ -18,10 +18,18 @@ Command columns and non-editable columns are skipped while tabbing.
 
 The InCell edit mode provides a specific user experience and behaves differently than other edit modes. Please review the notes below to get a better understanding of these specifics.
 
+## New Row Position
+
+To control whether a newly added item appears at the top or bottom of the Gantt Tree, set the `NewRowPosition` parameter.
+
+The `NewRowPosition` parameter accepts values from the `GanttTreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
 ### Note
 It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
 
-
 >caption InCell Editing Example.
 
 ````RAZOR
@@ -68,20 +76,9 @@ It is up to the data access logic to save the data once it is changed in the dat
 </TelerikGantt>
 
 @code {
-    public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
-
-    class FlatModel
-    {
-        public int Id { get; set; }
-        public int? ParentId { get; set; }
-        public string Title { get; set; }
-        public double PercentComplete { get; set; }
-        public DateTime Start { get; set; }
-        public DateTime End { get; set; }
-    }
-
-    public int LastId { get; set; } = 1;
-    List<FlatModel> Data { get; set; }
+    private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
+    private int LastId { get; set; } = 1;
+    private List<FlatModel> Data { get; set; }
 
     protected override void OnInitialized()
     {
@@ -122,6 +119,16 @@ It is up to the data access logic to save the data once it is changed in the dat
         base.OnInitialized();
     }
 
+    public class FlatModel
+    {
+        public int Id { get; set; }
+        public int? ParentId { get; set; }
+        public string Title { get; set; }
+        public double PercentComplete { get; set; }
+        public DateTime Start { get; set; }
+        public DateTime End { get; set; }
+    }
+
     private async Task CreateItem(GanttCreateEventArgs args)
     {
         var argsItem = args.Item as FlatModel;
@@ -251,4 +258,3 @@ It is up to the data access logic to save the data once it is changed in the dat
 ## See Also
 
   * [Live Demo: Gantt InCell Editing](https://demos.telerik.com/blazor-ui/gantt/editing-incell)
-   

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

@@ -20,6 +20,14 @@ You can also cancel the events by setting the `IsCancelled` property of the even
 
 To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property to `GanttTreeListEditMode.Inline`, then handle the CRUD events as shown in the example below.
 
+## New Row Position
+
+To control whether a newly added item appears at the top or bottom of the Gantt Tree, set the `NewRowPosition` parameter.
+
+The `NewRowPosition` parameter accepts values from the `GanttTreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
 
 >caption The Command buttons and the Gantt events let you handle data operations in Inline edit mode.
 
@@ -70,20 +78,9 @@ To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property
 </TelerikGantt>
 
 @code {
-    public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
-
-    class FlatModel
-    {
-        public int Id { get; set; }
-        public int? ParentId { get; set; }
-        public string Title { get; set; }
-        public double PercentComplete { get; set; }
-        public DateTime Start { get; set; }
-        public DateTime End { get; set; }
-    }
-
-    public int LastId { get; set; } = 1;
-    List<FlatModel> Data { get; set; }
+    private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
+    private int LastId { get; set; } = 1;
+    private List<FlatModel> Data { get; set; }
 
     protected override void OnInitialized()
     {
@@ -124,6 +121,16 @@ To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property
         base.OnInitialized();
     }
 
+    public class FlatModel
+    {
+        public int Id { get; set; }
+        public int? ParentId { get; set; }
+        public string Title { get; set; }
+        public double PercentComplete { get; set; }
+        public DateTime Start { get; set; }
+        public DateTime End { get; set; }
+    }
+
     private async Task CreateItem(GanttCreateEventArgs args)
     {
         var argsItem = args.Item as FlatModel;

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

@@ -298,6 +298,30 @@ You can customize the editors rendered in the Gantt Tree by providing the `Edito
 
     * `IsCanceled`- a boolean field indicating whether the operation is to be prevented.
 
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Gantt Tree. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.gantttreelistnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+This configuration is available in InCell and Inline edit modes. For more details, see the [Tree InCell Editing](slug:gant-tree-incell-editing#new-row-position) and [Tree Inline Editing](slug:gant-tree-inline-editing#new-row-position) articles.
+
+> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
+
+>caption Example of adding a new item to the Gantt based on the `NewRowPosition` value
+
+<div class="skip-repl"></div>
+````C#
+private void OnCreate(GanttCreateEventArgs args)
+{
+    if (NewRowPosition == GanttTreeListNewRowPosition.Bottom)
+    {
+        dataCollection.Add(newItem);
+    }
+    else // Top
+    {
+        dataCollection.Insert(0, newItem);
+    }
+}    
+````
 
 ## Example
 

components/grid/editing/incell.md

@@ -54,6 +54,17 @@ In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one aft
 
 The above algorithm is different from [inline](slug:grid-editing-inline) and [popup](slug:grid-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.
 
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Grid. Use the `NewRowPosition` parameter to specify the position.
+
+The `NewRowPosition` parameter accepts values from the `GridNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
+For a complete example of how this feature works, see the following [example](slug:grid-editing-incell#basic).
+
 ## Integration with Other Features
 
 Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).

components/grid/editing/inline.md

@@ -39,6 +39,15 @@ In inline edit mode, the Grid commands execute row by row and the corresponding
 
 When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons have no effect, but users can still navigate between all input components in the row to complete the editing.
 
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Grid. Use the `NewRowPosition` parameter to specify the position.
+
+The `NewRowPosition` parameter accepts values from the `GridNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
 ## Integration with Other Features
 
 Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).

components/grid/editing/overview.md

@@ -205,6 +205,32 @@ When editing a master row in a [hierarchy Grid](slug://components/grid/features/
 
 Learn more integration details for the [inline](slug:grid-editing-inline#integration-with-other-features) and [in-cell](slug:grid-editing-incell#integration-with-other-features) edit modes.
 
+
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Grid. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.gridnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+This configuration is available in InCell and Inline edit modes. For more details, see the [InCell Editing](slug:grid-editing-incell#new-row-position) and [Inline Editing](slug:grid-editing-inline#new-row-position) articles.
+
+> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
+
+>caption Example of adding a new item to the Grid based on the `NewRowPosition` value
+
+<div class="skip-repl"></div>
+````C#
+private void OnCreate(GridCommandEventArgs args)
+{
+    if (NewRowPosition == GridNewRowPosition.Bottom)
+    {
+        dataCollection.Add(newItem);
+    }
+    else // Top
+    {
+        dataCollection.Insert(0, newItem);
+    }
+}    
+````
+
 ## Examples
 
 See Grid CRUD operations in action at:

components/treelist/editing/incell.md

@@ -54,6 +54,15 @@ In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one aft
 
 The above algorithm is different from [inline](slug:treelist-editing-inline) and [popup](slug:treelist-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.
 
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the TreeList. Use the `NewRowPosition` parameter to specify the position.
+
+The `NewRowPosition` parameter accepts values from the `TreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
 ## Integration with Other Features
 
 Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:treelist-editing-overview#integration-with-other-features).

components/treelist/editing/inline.md

@@ -39,6 +39,15 @@ In inline edit mode, the TreeList commands execute row by row and the correspond
 
 When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons has no effect, but users can still navigate between all input components in the row to complete the editing.
 
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the TreeList. Use the `NewRowPosition` parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+The `NewRowPosition` parameter accepts values from the `TreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
 ## Integration with Other Features
 
 Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:treelist-editing-overview#integration-with-other-features).

components/treelist/editing/overview.md

@@ -192,6 +192,31 @@ When editing a row with child items, it will collapse unless you override the `E
 
 Learn more integration details for the [inline](slug:treelist-editing-inline#integration-with-other-features) and [in-cell](slug:treelist-editing-incell#integration-with-other-features) edit modes.
 
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the TreeList. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.treelistnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+This configuration is available in InCell and Inline edit modes. For more details, see the [InCell Editing](slug:treelist-editing-incell#new-row-position) and [Inline Editing](slug:treelist-editing-inline#new-row-position) articles.
+
+> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
+
+>caption Example of adding a new item to the TreeList based on the `NewRowPosition` value
+
+<div class="skip-repl"></div>
+````C#
+private void OnCreate(TreeListCommandEventArgs args)
+{
+    if (NewRowPosition == TreeListNewRowPosition.Bottom)
+    {
+        dataCollection.Add(newItem);
+    }
+    else // Top
+    {
+        dataCollection.Insert(0, newItem);
+    }
+}    
+````
+
 ## Examples
 
 See TreeList CRUD operations in action at: