diff --git a/components/gantt/gantt-tree/editing/incell.md b/components/gantt/gantt-tree/editing/incell.md index a1b3e9d3ba..1b9f71524e 100644 --- a/components/gantt/gantt-tree/editing/incell.md +++ b/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 @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 Data { get; set; } + private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + private int LastId { get; set; } = 1; + private List 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) - diff --git a/components/gantt/gantt-tree/editing/inline.md b/components/gantt/gantt-tree/editing/inline.md index 55ca17ea03..2859e36233 100644 --- a/components/gantt/gantt-tree/editing/inline.md +++ b/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 @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 Data { get; set; } + private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + private int LastId { get; set; } = 1; + private List 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; diff --git a/components/gantt/gantt-tree/editing/overview.md b/components/gantt/gantt-tree/editing/overview.md index b25d18813b..1774d423cf 100644 --- a/components/gantt/gantt-tree/editing/overview.md +++ b/components/gantt/gantt-tree/editing/overview.md @@ -298,6 +298,27 @@ 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 based on the `NewRowPosition` value: + +
+````C# +if (NewRowPosition == GanttTreeListNewRowPosition.Bottom) +{ + dataCollection.Add(newItem); +} +else // Top +{ + dataCollection.Insert(0, newItem); +} +```` ## Example diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md index 07a8552ba4..541babd201 100644 --- a/components/grid/editing/incell.md +++ b/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). diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md index a3ff818a1b..c34a0d03d4 100644 --- a/components/grid/editing/inline.md +++ b/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). diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md index 87a3cf9ffd..a93232fa4d 100644 --- a/components/grid/editing/overview.md +++ b/components/grid/editing/overview.md @@ -205,6 +205,29 @@ 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 based on the `NewRowPosition` value: + +
+````C# +if (NewRowPosition == GridNewRowPosition.Bottom) +{ + dataCollection.Add(newItem); +} +else // Top +{ + dataCollection.Insert(0, newItem); +} +```` + ## Examples See Grid CRUD operations in action at: diff --git a/components/treelist/editing/incell.md b/components/treelist/editing/incell.md index 532e33ccde..3956bc4325 100644 --- a/components/treelist/editing/incell.md +++ b/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). diff --git a/components/treelist/editing/inline.md b/components/treelist/editing/inline.md index 049e007cc5..6219a2e255 100644 --- a/components/treelist/editing/inline.md +++ b/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). diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md index def09dfe60..f15f3a45cc 100644 --- a/components/treelist/editing/overview.md +++ b/components/treelist/editing/overview.md @@ -192,6 +192,28 @@ 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 based on the `NewRowPosition` value: + +
+````C# +if (NewRowPosition == TreeListNewRowPosition.Bottom) +{ + dataCollection.Add(newItem); +} +else // Top +{ + dataCollection.Insert(0, newItem); +} +```` + ## Examples See TreeList CRUD operations in action at: