diff --git a/components/grid/templates/popup-form-template.md b/components/grid/templates/popup-form-template.md index 82c4b7dde..04563775a 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 new file mode 100644 index 000000000..7a2cb38dd --- /dev/null +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -0,0 +1,460 @@ +--- +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 +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 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: + +* [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. 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 Displaying 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 Hiding 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 +} +```` + +## See Also + +- [Grid Popup Editing - Documentation]({%slug components/grid/editing/popup%}) +- [Customizing the Grid's Edit Form]({%slug grid-templates-popup-form%})