From bed0c1bf030cd4ff114709006809633af381ade0 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 4 Oct 2024 14:43:15 +0000 Subject: [PATCH 1/5] Added new kb article grid-handle-empty-popup-footer --- .../grid-handle-empty-popup-footer.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 knowledge-base/grid-handle-empty-popup-footer.md diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md new file mode 100644 index 0000000000..7556d3b44a --- /dev/null +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -0,0 +1,76 @@ +--- +title: How to handle the empty popup footer when using the Popup Form Template +description: Learn how to either hide the empty footer in the edit popup of the Grid for Blazor or use it to display custom Form buttons. +type: how-to +page_title: How to handle the empty popup footer when using the Popup Form Template +slug: grid-kb-handle-empty-popup-footer +tags: grid, blazor, edit form, popup form template, footer, custom buttons, empty +res_type: kb +ticketid: 1665785 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +When using the Popup Form Template in the Grid for Blazor, the footer remains empty, creating unnecessary space and affecting the UI's aesthetics. The requirement is to either hide this empty footer or utilize it by placing custom form buttons within. This KB article also answers the following questions: +- How to hide the empty footer in the Popup Form Template of the Grid for Blazor? +- How to display custom buttons in the footer of the Popup Form Template? +- How to manage form submission with custom buttons in the Grid for Blazor? + +## Solution + +There are two approaches to address this requirement with the [Grid](https://docs.telerik.com/blazor-ui/components/grid/editing/popup) component for Blazor: + +### Option 1: Display Custom Buttons in the Footer + +To display custom buttons in the footer and handle form submission, follow these steps: + +1. Keep the `` tag inside the custom Form empty to prevent it from rendering its default buttons. +2. Declare custom buttons in the `` and manage their `OnClick` events for form submission. + +Here is an example demonstrating this approach: + +```razor + + ... + + + ... + + + + + + + +``` +[View Sample in Telerik REPL](https://blazorrepl.telerik.com/cIuNHkbv33TPbOw234) + +### Option 2: Remove the Footer and Keep Buttons in the FormTemplate + +To remove the footer while keeping the buttons within the ``, use CSS to hide the empty footer. + +Here is an example demonstrating how to hide the footer: + +```css +/* Add this CSS to hide the empty footer */ +.your-custom-class .k-popup-footer { + display: none; +} +``` +[View Sample in Telerik REPL](https://blazorrepl.telerik.com/GIEXdYkj2896rYiO43) + +## See Also + +- [Grid Editing - Popup Mode Documentation](https://docs.telerik.com/blazor-ui/components/grid/editing/popup) +- [Customizing the Grid's Edit Form](https://docs.telerik.com/blazor-ui/knowledge-base/grid-custom-edit-form) From 7037ab91cf6fa1e3285acd1d2af85b2444eb920e Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 4 Oct 2024 18:22:02 +0300 Subject: [PATCH 2/5] chore(Grid): polish article and add links --- .../grid/templates/popup-form-template.md | 3 +- .../grid-handle-empty-popup-footer.md | 462 ++++++++++++++++-- 2 files changed, 425 insertions(+), 40 deletions(-) diff --git a/components/grid/templates/popup-form-template.md b/components/grid/templates/popup-form-template.md index 82c4b7dde9..04563775ae 100644 --- a/components/grid/templates/popup-form-template.md +++ b/components/grid/templates/popup-form-template.md @@ -27,7 +27,8 @@ With the `FormTemplate` feature, you can customize the appearance and content of ## Specifics When using the template, the default Popup form is replaced by the declared content within the `FormTemplate` tag. This introduces the following specifics: -* The default **Update** and **Cancel** buttons are removed. This means that the [`OnUpdate` and `OnCancel`]({%slug components/grid/editing/overview%}#events) events cannot be triggered. To modify or cancel the update of a record, you need to include custom controls to manage these actions. +* The default **Update** and **Cancel** buttons are removed. This means that the [`OnUpdate` and `OnCancel`]({%slug components/grid/editing/overview%}#events) events cannot be triggered. To modify or cancel the update of a record, you need to include custom controls to manage these actions. +* The popup footer remains empty by design. You can [either hide it or place your custom buttons in it]({%slug grid-kb-handle-empty-popup-footer%}). * The `FormTemplate` disables the [built-in validation]({%slug grid-editing-validation%}) of the Grid. Implement a [Form Validation]({%slug form-validation%}) instead. * The [`` parameters]({%slug components/grid/editing/popup%}#edit-form-customization) do not apply to a custom `TelerikForm` that you may render inside the `` tag. Set the desired Form configurations such as `Columns`, `Orientation`, and more on the [Form component]({%slug form-overview%}#form-parameters). diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md index 7556d3b44a..6a28edd90f 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -22,55 +22,439 @@ ticketid: 1665785 ## Description -When using the Popup Form Template in the Grid for Blazor, the footer remains empty, creating unnecessary space and affecting the UI's aesthetics. The requirement is to either hide this empty footer or utilize it by placing custom form buttons within. This KB article also answers the following questions: -- How to hide the empty footer in the Popup Form Template of the Grid for Blazor? -- How to display custom buttons in the footer of the Popup Form Template? +When I am using the [Popup Form Template]({%slug grid-templates-popup-form%}) in the Grid for Blazor, the [default Update and Cancel buttons are removed]({%slug grid-templates-popup-form%}#specifics). I am not using the [`ButtonsTemplate`]({%slug grid-templates-popup-buttons%}) and the footer remains empty. This takes unnecessary space and affects the UI's aesthetics. + +The requirement is to either hide this empty footer or utilize it by placing the custom form buttons within. + +This KB article also answers the following questions: + +- How to hide the empty footer in the edit popup of the Grid for Blazor? +- How to display custom buttons in the footer of the edit popup? - How to manage form submission with custom buttons in the Grid for Blazor? ## Solution -There are two approaches to address this requirement with the [Grid](https://docs.telerik.com/blazor-ui/components/grid/editing/popup) component for Blazor: +There are two approaches to address this requirement: + +* [Option 1: Display Custom Buttons in the Footer](#option-1-display-custom-buttons-in-the-footer) +* [Option 2: Remove the Footer and Keep the Buttons in the FormTemplate](#option-2-remove-the-footer-and-keep-the-buttons-in-the-formtemplate) ### Option 1: Display Custom Buttons in the Footer To display custom buttons in the footer and handle form submission, follow these steps: -1. Keep the `` tag inside the custom Form empty to prevent it from rendering its default buttons. -2. Declare custom buttons in the `` and manage their `OnClick` events for form submission. - -Here is an example demonstrating this approach: - -```razor - - ... - - - ... - - - - - - - -``` -[View Sample in Telerik REPL](https://blazorrepl.telerik.com/cIuNHkbv33TPbOw234) - -### Option 2: Remove the Footer and Keep Buttons in the FormTemplate - -To remove the footer while keeping the buttons within the ``, use CSS to hide the empty footer. - -Here is an example demonstrating how to hide the footer: - -```css -/* Add this CSS to hide the empty footer */ -.your-custom-class .k-popup-footer { - display: none; +1. Declare a [``]({%slug form-formitems-buttons%}) tag inside the custom Form and leave it empty, so the Form does not render its default buttons. +2. Declare custom buttons in the [``]({%slug grid-templates-popup-buttons%}) and handle their `OnClick` events to manage the Form submission. + +>caption Here is an example demonstrating how to display custom buttons in the popup footer + +````CSHTML +@using Telerik.DataSource +@using Telerik.DataSource.Extensions + + + + Add Employee + + + + + + @{ + EditItem = FormContext.Item as Person; + + + + + + + + + + + + + @*remove the deafult buttons from the Form*@ + + + } + + + Save + Cancel + + + + + + + + + + Edit + Delete + + + + +@code { + private List PositionsData { get; set; } = new List() + { + "Manager", "Developer", "QA" + }; + + private TelerikGrid GridRef { get; set; } + private List GridData { get; set; } + private Person EditItem { get; set; } + private List _people; + + public class Person + { + public int EmployeeId { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + public string Position { get; set; } + } + + public List People + { + get + { + if (_people == null) + { + _people = GeneratePeople(30); + } + + return _people; + } + } + + protected override void OnInitialized() + { + LoadData(); + } + + private void LoadData() + { + GridData = GetPeople(); + } + + private void DeleteItem(GridCommandEventArgs args) + { + DeletePerson(args.Item as Person); + + LoadData(); + } + + private async Task OnSubmit() + { + + if (EditItem.EmployeeId != default) + { + UpdatePerson(EditItem); + } + else + { + CreatePerson(EditItem); + } + + await ExitEditAsync(); + + LoadData(); + } + + private async Task OnCancel() + { + await ExitEditAsync(); + } + + private async Task ExitEditAsync() + { + var state = GridRef?.GetState(); + state.OriginalEditItem = null; + state.EditItem = null; + state.InsertedItem = null; + + await GridRef?.SetStateAsync(state); + } + + #region Service Methods + private List GetPeople() + { + return People; + } + + private DataSourceResult GetPeople(DataSourceRequest request) + { + return People.ToDataSourceResult(request); + } + + private void DeletePerson(Person person) + { + People.Remove(person); + } + + private void UpdatePerson(Person person) + { + var index = People.FindIndex(i => i.EmployeeId == person.EmployeeId); + if (index != -1) + { + People[index] = person; + } + } + + private void CreatePerson(Person person) + { + person.EmployeeId = People.Max(x => x.EmployeeId) + 1; + + People.Insert(0, person); + } + + private List GeneratePeople(int count, int startIndex = 0) + { + List result = new List(); + + for (int i = startIndex; i < startIndex + count; i++) + { + result.Add(new Person() + { + EmployeeId = i, + Name = "Employee " + i.ToString(), + HireDate = new DateTime(2020, 6, 1).Date.AddDays(count - (i % 7)), + Position = i % 3 <= 2 ? PositionsData[i % 3] : PositionsData.FirstOrDefault() + + }); + } + + return result; + } + #endregion +} +```` + +### Option 2: Remove the Footer and Keep the Buttons in the FormTemplate + +This approach relies on using CSS to hide the empty footer. Add your custom class to the edit popup of the Grid to override its default styling. + +>caption Here is an example demonstrating how to hide the empty popup footer + +````CSHTML +@using Telerik.DataSource +@using Telerik.DataSource.Extensions + + + + + + Add Employee + + + + + + @{ + EditItem = FormContext.Item as Person; + + + + + + + + + + + + + Save + Cancel + + + } + + + + + + + + + + Edit + Delete + + + + +@code { + private List PositionsData { get; set; } = new List() + { + "Manager", "Developer", "QA" + }; + + private TelerikGrid GridRef { get; set; } + private List GridData { get; set; } + private Person EditItem { get; set; } + private List _people; + + public class Person + { + public int EmployeeId { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + public string Position { get; set; } + } + + public List People + { + get + { + if (_people == null) + { + _people = GeneratePeople(30); + } + + return _people; + } + } + + protected override void OnInitialized() + { + LoadData(); + } + + private void LoadData() + { + GridData = GetPeople(); + } + + private void DeleteItem(GridCommandEventArgs args) + { + DeletePerson(args.Item as Person); + + LoadData(); + } + + private async Task OnValidSubmit() + { + + if (EditItem.EmployeeId != default) + { + UpdatePerson(EditItem); + } + else + { + CreatePerson(EditItem); + } + + await ExitEditAsync(); + + LoadData(); + } + + private async Task OnCancel() + { + await ExitEditAsync(); + } + + private async Task ExitEditAsync() + { + var state = GridRef?.GetState(); + state.OriginalEditItem = null; + state.EditItem = null; + state.InsertedItem = null; + + await GridRef?.SetStateAsync(state); + } + + #region Service Methods + private List GetPeople() + { + return People; + } + + private DataSourceResult GetPeople(DataSourceRequest request) + { + return People.ToDataSourceResult(request); + } + + private void DeletePerson(Person person) + { + People.Remove(person); + } + + private void UpdatePerson(Person person) + { + var index = People.FindIndex(i => i.EmployeeId == person.EmployeeId); + if (index != -1) + { + People[index] = person; + } + } + + private void CreatePerson(Person person) + { + person.EmployeeId = People.Max(x => x.EmployeeId) + 1; + + People.Insert(0, person); + } + + private List GeneratePeople(int count, int startIndex = 0) + { + List result = new List(); + + for (int i = startIndex; i < startIndex + count; i++) + { + result.Add(new Person() + { + EmployeeId = i, + Name = "Employee " + i.ToString(), + HireDate = new DateTime(2020, 6, 1).Date.AddDays(count - (i % 7)), + Position = i % 3 <= 2 ? PositionsData[i % 3] : PositionsData.FirstOrDefault() + + }); + } + + return result; + } + #endregion } -``` -[View Sample in Telerik REPL](https://blazorrepl.telerik.com/GIEXdYkj2896rYiO43) +```` ## See Also -- [Grid Editing - Popup Mode Documentation](https://docs.telerik.com/blazor-ui/components/grid/editing/popup) -- [Customizing the Grid's Edit Form](https://docs.telerik.com/blazor-ui/knowledge-base/grid-custom-edit-form) +- [Grid Popup Editing - Documentation]({%slug components/grid/editing/popup%}) +- [Customizing the Grid's Edit Form]({%slug grid-templates-popup-form%}) From a0dc93569319f4683ccc172662c5e1202bf9232a Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 15 Oct 2024 19:05:51 +0300 Subject: [PATCH 3/5] Update knowledge-base/grid-handle-empty-popup-footer.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-handle-empty-popup-footer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md index 6a28edd90f..51ccdaec49 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -46,7 +46,7 @@ To display custom buttons in the footer and handle form submission, follow these 1. Declare a [``]({%slug form-formitems-buttons%}) tag inside the custom Form and leave it empty, so the Form does not render its default buttons. 2. Declare custom buttons in the [``]({%slug grid-templates-popup-buttons%}) and handle their `OnClick` events to manage the Form submission. ->caption Here is an example demonstrating how to display custom buttons in the popup footer +>caption Displaying custom buttons in the popup footer ````CSHTML @using Telerik.DataSource From b0c2d7c2b54b04c645ae81de250fcd2cf84be7b2 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 15 Oct 2024 19:05:58 +0300 Subject: [PATCH 4/5] Update knowledge-base/grid-handle-empty-popup-footer.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-handle-empty-popup-footer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md index 51ccdaec49..116bc9fdde 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -250,7 +250,7 @@ To display custom buttons in the footer and handle form submission, follow these This approach relies on using CSS to hide the empty footer. Add your custom class to the edit popup of the Grid to override its default styling. ->caption Here is an example demonstrating how to hide the empty popup footer +>caption Hiding the empty popup footer ````CSHTML @using Telerik.DataSource From 783d5e16f8d98b77f5d5d01c81fe7708f1fc69ba Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 15 Oct 2024 19:07:38 +0300 Subject: [PATCH 5/5] Update knowledge-base/grid-handle-empty-popup-footer.md --- knowledge-base/grid-handle-empty-popup-footer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md index 116bc9fdde..7a2cb38dd0 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -1,5 +1,5 @@ --- -title: How to handle the empty popup footer when using the Popup Form Template +title: Hiding or Removing the Empty Popup Footer when Using the Popup Form Template description: Learn how to either hide the empty footer in the edit popup of the Grid for Blazor or use it to display custom Form buttons. type: how-to page_title: How to handle the empty popup footer when using the Popup Form Template