diff --git a/components/grid/templates/popup-form-template.md b/components/grid/templates/popup-form-template.md index 641052d1b8..6020fb5e20 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: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:grid-editing-overview#events) events do not fire. To modify or cancel the update of a record, you need to include custom components 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:grid-editing-popup#form-layout) 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). @@ -37,200 +38,238 @@ When using the template, the default Popup form is replaced by the declared cont Using a `FormTemplate` to modify the Edit/Create Popup window. ````RAZOR -@using System.Collections.Generic; +@using System.ComponentModel.DataAnnotations @using Telerik.DataSource @using Telerik.DataSource.Extensions + OnDelete="@OnGridDelete"> - Add Employee + Add Item - + @{ - EditItem = FormContext.Item as Person; - - + OnValidSubmit="@OnFormValidSubmit"> - - - - - + + + + - - - Save - Cancel - - + + + + + + Save + Cancel + + } - - - - - - Edit - Delete + + + + + + + Edit + Delete @code { - private List PositionsData { get; set; } = new List() - { - "Manager", "Developer", "QA" - }; + private ProductService GridProductService { get; set; } = new(); - private TelerikGrid GridRef { get; set; } - private List GridData { get; set; } - private Person EditItem { get; set; } - private List _people; + private TelerikGrid? GridRef { 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; } - } + private Product? GridEditItem { get; set; } - public List People + private async Task OnFormValidSubmit() { - get + if (GridEditItem is null) { - if (_people == null) - { - _people = GeneratePeople(30); - } + return; + } - return _people; + if (GridEditItem.Id != default) + { + await GridProductService.Update(GridEditItem); + } + else + { + await GridProductService.Create(GridEditItem); } + + await ExitGridEditMode(); } - protected override void OnInitialized() + private async Task ExitGridEditMode() { - LoadData(); + if (GridRef is null) + { + return; + } + + var state = GridRef.GetState(); + state.OriginalEditItem = null!; + state.EditItem = null!; + state.InsertedItem = null!; + + await GridRef.SetStateAsync(state); + + GridEditItem = default; } - private void LoadData() + private async Task OnGridDelete(GridCommandEventArgs args) { - GridData = GetPeople(); + var deletedItem = (Product)args.Item; + + await GridProductService.Delete(deletedItem); } - private void DeleteItem(GridCommandEventArgs args) + private async Task OnGridRead(GridReadEventArgs args) { - DeletePerson(args.Item as Person); + DataSourceResult result = await GridProductService.Read(args.Request); - LoadData(); + args.Data = result.Data; + args.Total = result.Total; + args.AggregateResults = result.AggregateResults; } - private async Task OnValidSubmit() + public class Product { + public int Id { get; set; } + [Required] + public string Name { get; set; } = string.Empty; + public string Description { get; set; } = string.Empty; + public decimal? Price { get; set; } + public int Quantity { get; set; } + [Required] + public DateTime? ReleaseDate { get; set; } + public bool Discontinued { get; set; } + } - if (EditItem.EmployeeId != default) - { - UpdatePerson(EditItem); - } - else + #region Data Service + + public class ProductService + { + private List Items { get; set; } = new(); + + private int LastId { get; set; } + + public async Task Create(Product product) { - CreatePerson(EditItem); - } + await SimulateAsyncOperation(); - await ExitEditAsync(); + product.Id = ++LastId; - LoadData(); - } + Items.Insert(0, product); - private async Task OnCancel() - { - await ExitEditAsync(); - } + return LastId; + } - private async Task ExitEditAsync() - { - var state = GridRef?.GetState(); - state.OriginalEditItem = null; - state.EditItem = null; - state.InsertedItem = null; + public async Task Delete(Product product) + { + await SimulateAsyncOperation(); - await GridRef?.SetStateAsync(state); - } + if (Items.Contains(product)) + { + Items.Remove(product); - #region Service Methods - private List GetPeople() - { - return People; - } + return true; + } - private DataSourceResult GetPeople(DataSourceRequest request) - { - return People.ToDataSourceResult(request); - } + return false; + } - private void DeletePerson(Person person) - { - People.Remove(person); - } + public async Task> Read() + { + await SimulateAsyncOperation(); - private void UpdatePerson(Person person) - { - var index = People.FindIndex(i => i.EmployeeId == person.EmployeeId); - if (index != -1) + return Items; + } + + public async Task Read(DataSourceRequest request) { - People[index] = person; + return await Items.ToDataSourceResultAsync(request); } - } - private void CreatePerson(Person person) - { - person.EmployeeId = People.Max(x => x.EmployeeId) + 1; + public async Task Update(Product product) + { + await SimulateAsyncOperation(); - People.Insert(0, person); - } + int originalItemIndex = Items.FindIndex(x => x.Id == product.Id); - private List GeneratePeople(int count, int startIndex = 0) - { - List result = new List(); + if (originalItemIndex != -1) + { + Items[originalItemIndex] = product; + return true; + } + + return false; + } - for (int i = startIndex; i < startIndex + count; i++) + private async Task SimulateAsyncOperation() { - 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() + await Task.Delay(100); + } + + public ProductService(int itemCount = 5) + { + Random rnd = Random.Shared; + for (int i = 1; i <= itemCount; i++) + { + Items.Add(new Product() + { + Id = ++LastId, + Name = $"Product {LastId}", + Description = $"Multi-line\ndescription {LastId}", + Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m, + Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000), + ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)), + Discontinued = LastId % 2 == 0 }); + } } - - return result; } - #endregion + + #endregion Data Service } ````