From 8bd47a953ee5cac51b2991466e5e36c8fbbd0a79 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 16 May 2024 11:41:21 +0300 Subject: [PATCH 01/21] docs(grid): kb on inline edit form --- knowledge-base/grid-inline-edit-form.md | 39 +++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 knowledge-base/grid-inline-edit-form.md diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md new file mode 100644 index 0000000000..399a492b6a --- /dev/null +++ b/knowledge-base/grid-inline-edit-form.md @@ -0,0 +1,39 @@ +--- +title: Add inline Telerik Form to the the Grid Rows +description: How to add inline Telerik Form to the Grid Rows. +type: how-to +page_title: Add inline Telerik Form to the the Grid Rows +slug: grid-kb-inline-form +position: +tags: telerik,blazor,grid,inline,form,rows +res_type: kb +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ + +## Description + +I want to add an inline Telerik Form to the Grid rows when I enter edit mode. + + +## Solution + +Adding an inline Telerik Form to the Grid rows is possible by following the steps below: + +* Define a DetailTemplate. +* Hide the hierarchy expand column with CSS. +* Use the SetStateAsync() method to enter and exit edit mode programatically. + +>tip The Telerik Form works with a cloned instance of the edited/added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid Data collection. + +https://supportheroes.telerik.com/ticket/1639016 \ No newline at end of file From e281ab51585ad1792e549eb793bc9ea7bde8f558 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 16 May 2024 11:47:10 +0300 Subject: [PATCH 02/21] docs(grid): add example to inline form kb --- knowledge-base/grid-inline-edit-form.md | 173 +++++++++++++++++++++++- 1 file changed, 169 insertions(+), 4 deletions(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 399a492b6a..dde28e2abc 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -28,12 +28,177 @@ I want to add an inline Telerik Form to the Grid rows when I enter edit mode. ## Solution -Adding an inline Telerik Form to the Grid rows is possible by following the steps below: +Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is possible by following the steps below: -* Define a DetailTemplate. +* Define a [DetailTemplate]({%slug components/grid/features/hierarchy%}). * Hide the hierarchy expand column with CSS. -* Use the SetStateAsync() method to enter and exit edit mode programatically. +* Use the [SetStateAsync() method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programatically. >tip The Telerik Form works with a cloned instance of the edited/added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid Data collection. -https://supportheroes.telerik.com/ticket/1639016 \ No newline at end of file +````CSHTML +@using System.ComponentModel.DataAnnotations + + + + Add New Item + + + + + + + + + @{ var item = (SampleModel)context; } + Edit + + + + + + + + + Save + Cancel + + + + + + + +@code { + #nullable enable + + private List GridData { get; set; } = new(); + + private TelerikGrid GridRef { get; set; } = null!; + + private SampleModel? GridItemInEditMode { get; set; } + + private async Task OnGridEditButtonClick(SampleModel item) + { + GridItemInEditMode = item.Clone(); + + var gridState = GridRef.GetState(); + gridState.ExpandedItems = new List() { item }; + + await GridRef.SetStateAsync(gridState); + } + + private async Task OnGridAddButtonClick() + { + var newItem = new SampleModel(); + GridData.Insert(0, newItem); + GridRef.Rebind(); + + await OnGridEditButtonClick(newItem); + } + + private async Task OnGridFormValidSubmit() + { + if (GridItemInEditMode == null) + { + return; + } + + var originalItemIndex = GridData.FindIndex(x => x.Id == GridItemInEditMode!.Id); + + if (GridItemInEditMode!.Id == 0) + { + GridItemInEditMode.Id = ++LastId; + } + + GridData[originalItemIndex] = GridItemInEditMode!; + + var gridState = GridRef.GetState(); + gridState.ExpandedItems = new List(); + + await GridRef.SetStateAsync(gridState); + + GridItemInEditMode = null; + } + + private async Task OnGridFormCancel() + { + if (GridItemInEditMode?.Id == 0) + { + var itemIndex = GridData.FindIndex(x => x.Id == 0); + GridData.RemoveAt(itemIndex); + } + + var gridState = GridRef.GetState(); + gridState.ExpandedItems = new List(); + + await GridRef.SetStateAsync(gridState); + + GridItemInEditMode = null; + } + + private int LastId { get; set; } + + protected override void OnInitialized() + { + var rnd = new Random(); + + for (int i = 1; i <= 5; i++) + { + GridData.Add(new SampleModel() + { + Id = ++LastId, + Name = $"Name {LastId}", + Price = rnd.Next(1, 100) * 1.23m, + Quantity = rnd.Next(0, 1000), + StartDate = DateTime.Today.AddDays(-rnd.Next(1, 30)).AddMonths(-rnd.Next(1, 100)) + }); + } + } + + public class SampleModel + { + [Display(AutoGenerateField = false)] + public int Id { get; set; } + [Required] + public string Name { get; set; } = string.Empty; + public decimal Price { get; set; } + public int Quantity { get; set; } + public DateTime? StartDate { get; set; } + + public SampleModel Clone() + { + return new SampleModel() + { + Id = Id, + Name = Name, + Price = Price, + Quantity = Quantity, + StartDate = StartDate + }; + } + } +} +```` \ No newline at end of file From 317f7d11470265a2252dfb8d0a521a9a435918e8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 16 May 2024 11:50:32 +0300 Subject: [PATCH 03/21] docs(grid): add icons to buttons --- knowledge-base/grid-inline-edit-form.md | 49 +++++++++++++++---------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index dde28e2abc..dda8a63c03 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -43,7 +43,7 @@ Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is poss Data="@GridData" Class="no-expand-column"> - Add New Item + Add @@ -52,8 +52,10 @@ Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is poss - @{ var item = (SampleModel)context; } - Edit + @{ + var item = (SampleModel)context; + } + Edit @@ -65,8 +67,15 @@ Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is poss - Save - Cancel + + Save + + + Cancel + @@ -92,7 +101,7 @@ Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is poss @code { - #nullable enable +#nullable enable private List GridData { get; set; } = new(); @@ -168,13 +177,13 @@ Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is poss for (int i = 1; i <= 5; i++) { GridData.Add(new SampleModel() - { - Id = ++LastId, - Name = $"Name {LastId}", - Price = rnd.Next(1, 100) * 1.23m, - Quantity = rnd.Next(0, 1000), - StartDate = DateTime.Today.AddDays(-rnd.Next(1, 30)).AddMonths(-rnd.Next(1, 100)) - }); + { + Id = ++LastId, + Name = $"Name {LastId}", + Price = rnd.Next(1, 100) * 1.23m, + Quantity = rnd.Next(0, 1000), + StartDate = DateTime.Today.AddDays(-rnd.Next(1, 30)).AddMonths(-rnd.Next(1, 100)) + }); } } @@ -191,13 +200,13 @@ Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is poss public SampleModel Clone() { return new SampleModel() - { - Id = Id, - Name = Name, - Price = Price, - Quantity = Quantity, - StartDate = StartDate - }; + { + Id = Id, + Name = Name, + Price = Price, + Quantity = Quantity, + StartDate = StartDate + }; } } } From 7e53b6d5e74bc785c3ca546da1e5c7d152eead0c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 13:34:15 +0300 Subject: [PATCH 04/21] docs(grid): polish the KB wording --- knowledge-base/grid-inline-edit-form.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index dda8a63c03..1b8133c68c 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -28,11 +28,11 @@ I want to add an inline Telerik Form to the Grid rows when I enter edit mode. ## Solution -Adding an inline [Telerik Form]({%slug form-overview%}) to the Grid rows is possible by following the steps below: +Add an inline [Telerik Form]({%slug form-overview%}) to the Grid rows by following these steps: * Define a [DetailTemplate]({%slug components/grid/features/hierarchy%}). * Hide the hierarchy expand column with CSS. -* Use the [SetStateAsync() method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programatically. +* Use the [SetStateAsync() method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. >tip The Telerik Form works with a cloned instance of the edited/added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid Data collection. From f8b7092e32a652e5a73acfb49beae6597881f19a Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:37:58 +0300 Subject: [PATCH 05/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 1b8133c68c..de5492cdf3 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -34,7 +34,7 @@ Add an inline [Telerik Form]({%slug form-overview%}) to the Grid rows by followi * Hide the hierarchy expand column with CSS. * Use the [SetStateAsync() method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. ->tip The Telerik Form works with a cloned instance of the edited/added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid Data collection. +>tip The Telerik UI for Blazor Form works with a cloned instance of the edited or added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid data collection. ````CSHTML @using System.ComponentModel.DataAnnotations From f0647946e87ff0bf40965ae17975d93013d175fa Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:38:03 +0300 Subject: [PATCH 06/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index de5492cdf3..e9a4f76525 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -1,5 +1,5 @@ --- -title: Add inline Telerik Form to the the Grid Rows +title: Add an Inline Form to a Grid Row description: How to add inline Telerik Form to the Grid Rows. type: how-to page_title: Add inline Telerik Form to the the Grid Rows From 1599a2ef5d647b5c626c4443d48153021d75a0ce Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:38:08 +0300 Subject: [PATCH 07/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index e9a4f76525..ebb802372a 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -1,6 +1,6 @@ --- title: Add an Inline Form to a Grid Row -description: How to add inline Telerik Form to the Grid Rows. +description: How to add an inline Telerik UI for Blazor Form to a Blazor Grid row. type: how-to page_title: Add inline Telerik Form to the the Grid Rows slug: grid-kb-inline-form From 85b5eab5ceb7b463c45223bd1f94b3afd50f8bc4 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:38:23 +0300 Subject: [PATCH 08/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index ebb802372a..1dafc512cd 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -28,7 +28,7 @@ I want to add an inline Telerik Form to the Grid rows when I enter edit mode. ## Solution -Add an inline [Telerik Form]({%slug form-overview%}) to the Grid rows by following these steps: +Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by following these steps: * Define a [DetailTemplate]({%slug components/grid/features/hierarchy%}). * Hide the hierarchy expand column with CSS. From 636e0831f0c51af9756d90afc53ed7bb1065afe2 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:39:19 +0300 Subject: [PATCH 09/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 1dafc512cd..d7cb4167d0 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -32,7 +32,7 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi * Define a [DetailTemplate]({%slug components/grid/features/hierarchy%}). * Hide the hierarchy expand column with CSS. -* Use the [SetStateAsync() method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. +* Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. >tip The Telerik UI for Blazor Form works with a cloned instance of the edited or added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid data collection. From 91fae70072f6edba462225005efd28c5b63fa179 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:39:26 +0300 Subject: [PATCH 10/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index d7cb4167d0..b580b1dedc 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -30,7 +30,7 @@ I want to add an inline Telerik Form to the Grid rows when I enter edit mode. Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by following these steps: -* Define a [DetailTemplate]({%slug components/grid/features/hierarchy%}). +* Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}). * Hide the hierarchy expand column with CSS. * Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. From 0cdbed740dfba006313e1c0d9c57f7ba01795676 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:42:52 +0300 Subject: [PATCH 11/21] docs(grid): use ol instead of ul --- knowledge-base/grid-inline-edit-form.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index b580b1dedc..5745fe8c89 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -30,9 +30,9 @@ I want to add an inline Telerik Form to the Grid rows when I enter edit mode. Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by following these steps: -* Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}). -* Hide the hierarchy expand column with CSS. -* Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. +1. Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}). +1. Hide the hierarchy expand column with CSS. +1. Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. >tip The Telerik UI for Blazor Form works with a cloned instance of the edited or added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid data collection. From b720d4afbeaa4b2a33e30f2a8002ca92584ca82e Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:45:00 +0300 Subject: [PATCH 12/21] docs(grid): improve the description --- knowledge-base/grid-inline-edit-form.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 5745fe8c89..f7a85afd3a 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -23,7 +23,13 @@ res_type: kb ## Description -I want to add an inline Telerik Form to the Grid rows when I enter edit mode. +My end users need to be able to submit an inline Form from within a Grid row. + +This KB answers the following questions: + +* How do I show an inline Form when the user enters edit mode in the Grid? +* How do I embed an editable inline Form inside a Grid row? +* How do I create a cancelable inline Form inside a Grid row? ## Solution From 78f99b5220884cc89f7eb1df8405b6b14ecbbfac Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 14:50:40 +0300 Subject: [PATCH 13/21] docs(grid): add tickets id --- knowledge-base/grid-inline-edit-form.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index f7a85afd3a..9cf8bf163b 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -7,6 +7,7 @@ slug: grid-kb-inline-form position: tags: telerik,blazor,grid,inline,form,rows res_type: kb +ticketid: 1639016 --- ## Environment From 126637fdefcf754323f0a5f2816ca84cdd7a90ff Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 16 May 2024 15:32:56 +0300 Subject: [PATCH 14/21] docs(grid): add see also section --- knowledge-base/grid-inline-edit-form.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 9cf8bf163b..753293b188 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -217,4 +217,11 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi } } } -```` \ No newline at end of file +```` + +## See Also + +* Live Demo: Grid Overview +* Live Demo: Form Overview +* [Documentation: Grid Overivew]({%slug grid-overview%}) +* [Documentation: Form Overview]({%slug form-overview%}) \ No newline at end of file From 75176b574f753611edf05a28dcda0041387e74e0 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 17 May 2024 15:43:15 +0300 Subject: [PATCH 15/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 753293b188..de21b30bba 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -108,7 +108,7 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi @code { -#nullable enable + #nullable enable private List GridData { get; set; } = new(); From cf8d5b96064c2fe36c3c0d5334cc6d247c0ea2fd Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 17 May 2024 15:43:40 +0300 Subject: [PATCH 16/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index de21b30bba..6d57e92a41 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -112,7 +112,7 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi private List GridData { get; set; } = new(); - private TelerikGrid GridRef { get; set; } = null!; + private TelerikGrid? GridRef { get; set; } private SampleModel? GridItemInEditMode { get; set; } From 46186bc3387cfadb9d55f412d9252ab6d60abc03 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 17 May 2024 15:43:47 +0300 Subject: [PATCH 17/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 6d57e92a41..f87e834111 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -1,6 +1,6 @@ --- title: Add an Inline Form to a Grid Row -description: How to add an inline Telerik UI for Blazor Form to a Blazor Grid row. +description: How to use an inline Telerik UI for Blazor Form below a Grid row. type: how-to page_title: Add inline Telerik Form to the the Grid Rows slug: grid-kb-inline-form From 08bea65a9bb8c4ef87b160cd8d598d81d5860d3b Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 17 May 2024 15:43:53 +0300 Subject: [PATCH 18/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index f87e834111..217fe6d25d 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -5,7 +5,7 @@ type: how-to page_title: Add inline Telerik Form to the the Grid Rows slug: grid-kb-inline-form position: -tags: telerik,blazor,grid,inline,form,rows +tags: telerik,blazor,grid,editing,form res_type: kb ticketid: 1639016 --- From 88692981764689505371d5f99d41db61f9780982 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 17 May 2024 15:43:58 +0300 Subject: [PATCH 19/21] Update knowledge-base/grid-inline-edit-form.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 217fe6d25d..ade94f3878 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -41,7 +41,7 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi 1. Hide the hierarchy expand column with CSS. 1. Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. ->tip The Telerik UI for Blazor Form works with a cloned instance of the edited or added item to support cancellation. If you cancel the addition or update of an item, you need to delete it from the Grid data collection. +>tip The Telerik UI for Blazor Form works with a cloned instance of the edited or added item to support cancellation. If you cancel the addition of a new item, you need to delete it from the Grid data collection. ````CSHTML @using System.ComponentModel.DataAnnotations From 4d23ff096f733401c4d2aacad44f49cc20cd759f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 20 May 2024 13:02:13 +0300 Subject: [PATCH 20/21] docs(kb): link a relevant KB based on feedback --- knowledge-base/grid-inline-edit-form.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index ade94f3878..99900a472c 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -39,7 +39,7 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi 1. Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}). 1. Hide the hierarchy expand column with CSS. -1. Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to enter and exit edit mode programmatically. +1. Use the [`SetStateAsync()` method]({%slug grid-state%}#setstateasync-examples) to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). >tip The Telerik UI for Blazor Form works with a cloned instance of the edited or added item to support cancellation. If you cancel the addition of a new item, you need to delete it from the Grid data collection. From da815d39ed2665d2b8d3e9a03712abd645103d54 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 22 May 2024 15:13:02 +0300 Subject: [PATCH 21/21] docs(kb): improvements --- knowledge-base/grid-inline-edit-form.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/knowledge-base/grid-inline-edit-form.md b/knowledge-base/grid-inline-edit-form.md index 99900a472c..7294025436 100644 --- a/knowledge-base/grid-inline-edit-form.md +++ b/knowledge-base/grid-inline-edit-form.md @@ -101,10 +101,6 @@ Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by followi .no-expand-column .k-hierarchy-cell > * { display: none; } - - .no-expand-column .k-detail-row:hover { - background-color: transparent; - } @code {