Syncfusion Grid CRUD Operation

Note: In order for the CRUD operation to work, you must have the following…

• A Primary Key column defined in the grid.
• The source of the grid must be a List. IEnumerable will not work.

<GridColumn Field=@nameof(ProductCategory.CategoryId) HeaderText="ID" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn>

You can either use the OnActionBegin or OnActionComplete grid events to handle the CRUD operations.

<GridEvents TValue="ProductCategory" OnActionBegin="GridOnActionBegin" OnActionComplete="GridOnActionComplete"></GridEvents>

Example

                    <SfGrid ID="Grid" @ref="Grid" DataSource="@ProductCategoryList" Toolbar="@(new List<string>() { "Add" })" >
                        <GridEvents TValue="ProductCategory" OnActionBegin="GridOnActionBegin" OnActionComplete="GridOnActionComplete"></GridEvents>
                        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams" ShowDeleteConfirmDialog="true">
                            <HeaderTemplate>
                                @{
                                    var text = GetHeader((context as ProductCategory));
                                    <span>@text</span>
                                }
                            </HeaderTemplate>
                            <Template>
                                @{
                                    var item = (context as ProductCategory);
                                }
                                <div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <SfTextBox ID="CategoryName" @bind-Value="@(item.CategoryName)" FloatLabelType="FloatLabelType.Always" Placeholder="Category Name"></SfTextBox>
                                        </div>
                                    </div>
                                </div>
                            </Template>
                        </GridEditSettings>
                        <GridColumns>
                            <GridColumn HeaderText="Manage" TextAlign="TextAlign.Center" Width="100">
                                <GridCommandColumns>
                                    <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>
                                    <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>
                                </GridCommandColumns>
                            </GridColumn>
                            <GridColumn Field=@nameof(ProductCategory.CategoryId) HeaderText="ID" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn>
                            <GridColumn Field=@nameof(ProductCategory.CategoryName) HeaderText="Category Name" Width="400"></GridColumn>
                        </GridColumns>
                    </SfGrid>        public SfGrid<CustomersdbShared.Models.ProductCategory> Grid;
        public DialogSettings DialogParams = new DialogSettings { MinHeight = "400px", Width = "450px" };
        public IEnumerable<ProductCategory> ProductCategoryList { get; set; }
        public string Header { get; set; }
        public string GetHeader(ProductCategory Value)
        {
            if (Value.CategoryId == 0)
            {
                return "Add New Category";
            }
            else
            {
                return "Edit " + Value.CategoryName.ToString();
            }
        }

    public async Task GridOnActionBegin(ActionEventArgs<ProductCategory> args)
    {
        Console.WriteLine("GridOnActionBegin: " + args.RequestType);

        switch (args.RequestType)
        {
            case Syncfusion.Blazor.Grids.Action.Add:
                Console.WriteLine("Add");
                break;

            case Syncfusion.Blazor.Grids.Action.Save:
                Console.WriteLine("args.Data.Id: " + args.Data.CategoryId);
                Console.WriteLine("Save");

                Console.WriteLine("args.Data.Id: " + args.Data.CategoryId);

                if (args.Data.CategoryId == 0)
                {
                    ProductCategory newRecord = new ProductCategory()
                    {
                        CategoryName = args.Data.CategoryName,
                        SortOrder = args.Data.SortOrder,
                        IsStoreDisplay = args.Data.IsStoreDisplay,
                        OrganizationId = this.OrgId,
                        CreatedBy = this.Username
                    };

                    var result = await ProductService.CreateProductCategory(newRecord);

                    args.Data = result;
                }
                else
                {
                    args.Data.UpdatedBy = this.Username;
                    await ProductService.UpdateProductCategory(args.Data);
                }

                break;
            case Syncfusion.Blazor.Grids.Action.Delete:
                Console.WriteLine("Delete");
                args.Data.UpdatedBy = this.Username;
                await ProductService.DeleteProductCategory(args.Data);
                break;
            default:
                Console.WriteLine("Default");
                break;
        }

    }

    public async Task GridOnActionComplete(ActionEventArgs<ProductCategory> args)
    {
        Console.WriteLine("GridOnActionComplete: " + args.RequestType);

        switch (args.RequestType)
        {
            case Syncfusion.Blazor.Grids.Action.Add:
                Console.WriteLine("Add");
                break;
            case Syncfusion.Blazor.Grids.Action.Save:
                Console.WriteLine("Save");
                break;
            case Syncfusion.Blazor.Grids.Action.Delete:
                Console.WriteLine("Delete");
                break;
            default:
                Console.WriteLine("Default");
                break;
        }
    }