[KB] Add Grid Inline Form KB

knowledge-base/grid-inline-edit-form.md

@@ -0,0 +1,227 @@
+---
+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.
+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
+ticketid: 1639016
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Grid for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+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
+
+Add an inline [Blazor Form]({%slug form-overview%}) to your Grid rows by following these steps:
+
+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.   
+
+````CSHTML
+@using System.ComponentModel.DataAnnotations
+
+<TelerikGrid @ref="@GridRef"
+             Data="@GridData"
+             Class="no-expand-column">
+    <GridToolBarTemplate>
+        <GridCommandButton OnClick="@OnGridAddButtonClick" Icon="@SvgIcon.Plus">Add</GridCommandButton>
+    </GridToolBarTemplate>
+    <GridColumns>
+        <GridColumn Field="@nameof(SampleModel.Id)" />
+        <GridColumn Field="@nameof(SampleModel.Name)" />
+        <GridColumn Field="@nameof(SampleModel.Price)" DisplayFormat="{0:c2}" />
+        <GridColumn Field="@nameof(SampleModel.Quantity)" />
+        <GridColumn Field="@nameof(SampleModel.StartDate)" DisplayFormat="{0:d}" />
+        <GridCommandColumn>
+            @{
+                var item = (SampleModel)context;
+            }
+            <GridCommandButton OnClick="@( () => OnGridEditButtonClick(item) )" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+    <DetailTemplate>
+        <TelerikForm Model="@GridItemInEditMode"
+                     OnValidSubmit="@OnGridFormValidSubmit"
+                     Columns="2"
+                     ColumnSpacing="2em">
+            <FormValidation>
+                <DataAnnotationsValidator />
+            </FormValidation>
+            <FormButtons>
+                <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
+                               Icon="@SvgIcon.Save">
+                    Save
+                </TelerikButton>
+                <TelerikButton ButtonType="@ButtonType.Button"
+                               OnClick="@OnGridFormCancel"
+                               Icon="@SvgIcon.Cancel">
+                    Cancel
+                </TelerikButton>
+            </FormButtons>
+        </TelerikForm>
+    </DetailTemplate>
+</TelerikGrid>
+
+<style>
+    .no-expand-column .k-hierarchy-col {
+        width: 0;
+    }
+
+    .no-expand-column .k-hierarchy-cell + .k-table-td,
+    .no-expand-column .k-hierarchy-cell + .k-table-th {
+        border-left-width: 0;
+    }
+
+    .no-expand-column .k-hierarchy-cell > * {
+        display: none;
+    }
+
+    .no-expand-column .k-detail-row:hover {
+        background-color: transparent;
+    }
+</style>
+
+@code {
+#nullable enable
+
+    private List<SampleModel> GridData { get; set; } = new();
+
+    private TelerikGrid<SampleModel> 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<SampleModel>() { 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<SampleModel>();
+
+        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<SampleModel>();
+
+        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
+                };
+        }
+    }
+}
+````
+
+## See Also
+
+* <a href="https://demos.telerik.com/blazor-ui/grid/overview" target="_blank">Live Demo: Grid Overview</a>
+* <a href="https://demos.telerik.com/blazor-ui/form/overview" target="_blank">Live Demo: Form Overview</a>
+* [Documentation: Grid Overivew]({%slug grid-overview%})
+* [Documentation: Form Overview]({%slug form-overview%})