From 8f43a75e0910c08febc7f8aa9f9948b8ec33e165 Mon Sep 17 00:00:00 2001 From: Kendo Bot Date: Wed, 16 Oct 2024 17:52:10 +0300 Subject: [PATCH 1/7] Added new kb article grid-handle-empty-popup-footer (#2414) * Added new kb article grid-handle-empty-popup-footer * chore(Grid): polish article and add links * Update knowledge-base/grid-handle-empty-popup-footer.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/grid-handle-empty-popup-footer.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/grid-handle-empty-popup-footer.md --------- Co-authored-by: KB Bot Co-authored-by: Nadezhda Tacheva Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- .../grid/templates/popup-form-template.md | 3 +- .../grid-handle-empty-popup-footer.md | 460 ++++++++++++++++++ 2 files changed, 462 insertions(+), 1 deletion(-) create mode 100644 knowledge-base/grid-handle-empty-popup-footer.md 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 new file mode 100644 index 0000000000..7a2cb38dd0 --- /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%}) From d2a27bbf271452b390ceaef144ad15f5f2178e60 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:58:08 +0300 Subject: [PATCH 2/7] 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 7a2cb38dd0..26a38e12ae 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -34,7 +34,7 @@ This KB article also answers the following questions: ## Solution -There are two approaches to address this requirement: +To hide the empty footer or utilize it by placing the custom form buttons, choose either of the following approaches: * [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) From 43ddd07f265d18eb3ded11bbe555bb4df8f224a5 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:58:14 +0300 Subject: [PATCH 3/7] 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 26a38e12ae..f376ec9f43 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -24,7 +24,7 @@ ticketid: 1665785 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. +I want to either hide this empty footer or utilize it by placing the custom form buttons within. This KB article also answers the following questions: From cf43349c7ea545916ea77017e2b7e745cba0fe97 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:58:19 +0300 Subject: [PATCH 4/7] 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 f376ec9f43..48fcfe9cf0 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -22,7 +22,7 @@ ticketid: 1665785 ## 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. +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. I want to either hide this empty footer or utilize it by placing the custom form buttons within. From 2256158fa327e8c1730ee061fe8ce69717606177 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:09:31 +0300 Subject: [PATCH 5/7] Update knowledge-base/grid-handle-empty-popup-footer.md Co-authored-by: Dimo Dimov <961014+dimodi@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 48fcfe9cf0..d657afa124 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -1,5 +1,5 @@ --- -title: Hiding or Removing the Empty Popup Footer when Using the Popup Form Template +title: Remove Empty Popup Footer when Using 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 From c53aa771f3c558fdfd815964a2f3cad25ab94a2a Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:09:37 +0300 Subject: [PATCH 6/7] Update knowledge-base/grid-handle-empty-popup-footer.md Co-authored-by: Dimo Dimov <961014+dimodi@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 d657afa124..92beaa817c 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -2,7 +2,7 @@ title: Remove Empty Popup Footer when Using 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 +page_title: How to Remove Empty Popup Footer when Using Grid 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 From 4c09b262da62c1a456a23a4dc0c7c05800d0bec7 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 12 Nov 2024 16:29:59 +0200 Subject: [PATCH 7/7] Polish and refactor --- .../grid-handle-empty-popup-footer.md | 168 ++++++------------ 1 file changed, 58 insertions(+), 110 deletions(-) diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md index 92beaa817c..898e920ce9 100644 --- a/knowledge-base/grid-handle-empty-popup-footer.md +++ b/knowledge-base/grid-handle-empty-popup-footer.md @@ -36,10 +36,10 @@ This KB article also answers the following questions: To hide the empty footer or utilize it by placing the custom form buttons, choose either of the following approaches: -* [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) +* [Display Custom Buttons in the Footer](#display-custom-buttons-in-the-footer) +* [Remove the Footer and Keep the Buttons in the FormTemplate](#remove-the-footer-and-keep-the-buttons-in-the-formtemplate) -### Option 1: Display Custom Buttons in the Footer +### Display Custom Buttons in the Footer To display custom buttons in the footer and handle form submission, follow these steps: @@ -66,7 +66,7 @@ To display custom buttons in the footer and handle form submission, follow these @{ - EditItem = FormContext.Item as Person; + EditItem = (Person)FormContext.Item; GridRef { get; set; } - private List GridData { get; set; } - private Person EditItem { get; set; } - private List _people; + private TelerikGrid? GridRef { get; set; } + private List GridData { get; set; } = new(); + private Person? EditItem { get; set; } 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; - } + public string Name { get; set; } = string.Empty; + public DateTime HireDate { get; set; } = DateTime.Today; + public string Position { get; set; } = string.Empty; } protected override void OnInitialized() { - LoadData(); - } - - private void LoadData() - { - GridData = GetPeople(); + GeneratePeople(30); } private void DeleteItem(GridCommandEventArgs args) { - DeletePerson(args.Item as Person); - - LoadData(); + DeletePerson((Person)args.Item); } private async Task OnSubmit() { - - if (EditItem.EmployeeId != default) + if (EditItem!.EmployeeId != default) { UpdatePerson(EditItem); } @@ -173,8 +151,6 @@ To display custom buttons in the footer and handle form submission, follow these } await ExitEditAsync(); - - LoadData(); } private async Task OnCancel() @@ -184,69 +160,67 @@ To display custom buttons in the footer and handle form submission, follow these private async Task ExitEditAsync() { - var state = GridRef?.GetState(); - state.OriginalEditItem = null; - state.EditItem = null; - state.InsertedItem = null; + var state = GridRef!.GetState(); + state.OriginalEditItem = null!; + state.EditItem = null!; + state.InsertedItem = null!; - await GridRef?.SetStateAsync(state); + await GridRef!.SetStateAsync(state); } #region Service Methods private List GetPeople() { - return People; + return GridData; } private DataSourceResult GetPeople(DataSourceRequest request) { - return People.ToDataSourceResult(request); + return GridData.ToDataSourceResult(request); } private void DeletePerson(Person person) { - People.Remove(person); + GridData.Remove(person); } private void UpdatePerson(Person person) { - var index = People.FindIndex(i => i.EmployeeId == person.EmployeeId); + var index = GridData.FindIndex(i => i.EmployeeId == person.EmployeeId); if (index != -1) { - People[index] = person; + GridData[index] = person; } } private void CreatePerson(Person person) { - person.EmployeeId = People.Max(x => x.EmployeeId) + 1; + person.EmployeeId = GridData.Max(x => x.EmployeeId) + 1; - People.Insert(0, person); + GridData.Insert(0, person); } - private List GeneratePeople(int count, int startIndex = 0) + private void GeneratePeople(int count, int startIndex = 1) { - List result = new List(); + GridData = new(); - for (int i = startIndex; i < startIndex + count; i++) + for (int i = startIndex; i <= startIndex + count; i++) { - result.Add(new Person() + GridData.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() + Position = i % 3 <= 2 ? PositionsData[i % 3] : PositionsData.First() }); } - - return result; } #endregion } ```` -### Option 2: Remove the Footer and Keep the Buttons in the FormTemplate +### 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. @@ -276,7 +250,7 @@ This approach relies on using CSS to hide the empty footer. Add your custom clas @{ - EditItem = FormContext.Item as Person; + EditItem = (Person)FormContext.Item; GridRef { get; set; } - private List GridData { get; set; } - private Person EditItem { get; set; } - private List _people; + private TelerikGrid? GridRef { get; set; } + private List GridData { get; set; } = new(); + private Person? EditItem { get; set; } 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; - } + public string Name { get; set; } = string.Empty; + public DateTime HireDate { get; set; } = DateTime.Today; + public string Position { get; set; } = string.Empty; } protected override void OnInitialized() { - LoadData(); - } - - private void LoadData() - { - GridData = GetPeople(); + GeneratePeople(30); } private void DeleteItem(GridCommandEventArgs args) { - DeletePerson(args.Item as Person); - - LoadData(); + DeletePerson((Person)args.Item); } private async Task OnValidSubmit() { - - if (EditItem.EmployeeId != default) + if (EditItem!.EmployeeId != default) { UpdatePerson(EditItem); } @@ -381,8 +333,6 @@ This approach relies on using CSS to hide the empty footer. Add your custom clas } await ExitEditAsync(); - - LoadData(); } private async Task OnCancel() @@ -392,63 +342,61 @@ This approach relies on using CSS to hide the empty footer. Add your custom clas private async Task ExitEditAsync() { - var state = GridRef?.GetState(); - state.OriginalEditItem = null; - state.EditItem = null; - state.InsertedItem = null; + var state = GridRef!.GetState(); + state.OriginalEditItem = null!; + state.EditItem = null!; + state.InsertedItem = null!; - await GridRef?.SetStateAsync(state); + await GridRef!.SetStateAsync(state); } #region Service Methods private List GetPeople() { - return People; + return GridData; } private DataSourceResult GetPeople(DataSourceRequest request) { - return People.ToDataSourceResult(request); + return GridData.ToDataSourceResult(request); } private void DeletePerson(Person person) { - People.Remove(person); + GridData.Remove(person); } private void UpdatePerson(Person person) { - var index = People.FindIndex(i => i.EmployeeId == person.EmployeeId); + var index = GridData.FindIndex(i => i.EmployeeId == person.EmployeeId); if (index != -1) { - People[index] = person; + GridData[index] = person; } } private void CreatePerson(Person person) { - person.EmployeeId = People.Max(x => x.EmployeeId) + 1; + person.EmployeeId = GridData.Max(x => x.EmployeeId) + 1; - People.Insert(0, person); + GridData.Insert(0, person); } - private List GeneratePeople(int count, int startIndex = 0) + private void GeneratePeople(int count) { - List result = new List(); + GridData = new(); - for (int i = startIndex; i < startIndex + count; i++) + for (int i = 1; i <= count; i++) { - result.Add(new Person() + GridData.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() + Position = i % 3 <= 2 ? PositionsData[i % 3] : PositionsData.First() }); } - - return result; } #endregion }