How do you create a custom component using Radzen DataGrids

Question

I want to be able to create a reusable Blazor Radzen DataGrid component as I plan on using this code in other pages throughout my project. I want to be able to dynamically render a DataGrid based on data from any given class. Lets say only have my Class Customer . In my current example ; I am making use of Dummy Data at the moment from my DummyData.cs file:

using Bogus;
using System;
using System.Collections.Generic;

namespace TestingDynamicEditableTable.Data
{
    public static class DummyData
    {
        private static readonly Faker<Customer> CustomerFaker = new Faker<Customer>()
            .RuleFor(c => c.CustomerID, f => f.Random.AlphaNumeric(5))
            .RuleFor(c => c.CompanyName, f => f.Company.CompanyName())
            .RuleFor(c => c.ContactName, f => f.Person.FullName);

        public static IEnumerable<Customer> GetCustomers(int count = 50)
        {
            return CustomerFaker.Generate(count);
        }
    }

    
}

This is my current file:

@page "/counter"
@using TestingDynamicEditableTable.Data
@using System.Collections.Generic
@using System.Linq

<RadzenDataGrid @ref="customersGrid" AllowPaging="true" PageSize="5" AllowSorting="true" EditMode="@editMode" AllowGrouping="true" AllowColumnResize="true"
                Data="@customers" TItem="Customer" RowUpdate="@OnUpdateRow" ColumnWidth="200px">
    <Columns>
        <RadzenDataGridColumn TItem="Customer" Property="CustomerID" Title="ID" Width="40px" Frozen="true" />
        <RadzenDataGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" Width="280px">
            <EditTemplate Context="customer">
                <RadzenTextBox @bind-Value="customer.CompanyName" Style="width:100%" />
            </EditTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" Width="220px">
            <EditTemplate Context="customer">
                <RadzenTextBox @bind-Value="customer.ContactName" Style="width:100%" />
            </EditTemplate>
        </RadzenDataGridColumn>

        <RadzenDataGridColumn TItem="Customer" Context="customer" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
            <Template Context="customer">
                <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@(args => EditRow(customer))" @onclick:stopPropagation="true">
                </RadzenButton>
                <RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@(args => DeleteRow(customer))">
                </RadzenButton>
            </Template>



            <EditTemplate Context="customer">
                <RadzenButton Icon="save" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(customer))">
                </RadzenButton>
                <RadzenButton Icon="cancel" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="my-1 ms-1" Click="@((args) => CancelEdit(customer))">
                </RadzenButton>
            </EditTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

<RadzenButton Text="Add New Customer" Click="AddNewCustomer" />

@code {
    RadzenDataGrid<Customer> customersGrid;
    List<Customer> customers;
    DataGridEditMode editMode = DataGridEditMode.Single;

    Customer editingCustomer;

    protected override void OnInitialized()
    {
        customers = DummyData.GetCustomers().ToList();
    }

    void EditRow(Customer customer)
    {
        editingCustomer = customer;
        customersGrid.EditRow(customer);
    }

    void OnUpdateRow(Customer customer)
    {
        // Implement logic to update the customer data
        editingCustomer = null;
    }

    void SaveRow(Customer customer)
    {
        customersGrid.UpdateRow(customer);
    }

    void CancelEdit(Customer customer)
    {
        editingCustomer = null;
        customersGrid.CancelEditRow(customer);
    }

    void AddNewCustomer()
    {
        var newCustomer = new Customer();
        customers.Add(newCustomer);
        customersGrid.InsertRow(newCustomer);
    }

    void DeleteRow(Customer customer)
    {
        customers.Remove(customer);
        customersGrid.Reload(); // Reload the grid to reflect the changes
    }
}

Ive tried this in my CustomDataGrid.razor file

@typeparam TItem

<RadzenDataGrid TItem="TItem" AllowPaging="true" PageSize="5" AllowSorting="true" EditMode="@editMode" AllowGrouping="true" AllowColumnResize="true"
                Data="@Items" RowUpdate="@RowUpdate" ColumnWidth="200px">
    <Columns>
        @foreach (var column in Columns)
        {
            @column
        }
    </Columns>
</RadzenDataGrid>

@code {
    [Parameter]
    public List<TItem> Items { get; set; }

    [Parameter]
    public List<RenderFragment<RadzenDataGridColumn<TItem>>> Columns { get; set; }

    [Parameter]
    public EventCallback<TItem> RowUpdate { get; set; }

    DataGridEditMode editMode = DataGridEditMode.Single;
}

This is my Counter.razor file:

@page "/counter"
@using TestingDynamicEditableTable.Data
@using System.Collections.Generic
@using System.Linq

<CustomDataGrid TItem="Customer" Items="@customers" Columns="@customerColumns" RowUpdate="@OnUpdateRow" />

<RadzenButton Text="Add New Customer" Click="AddNewCustomer" />

@code {
    List<Customer> customers;
    List<RenderFragment<RadzenDataGridColumn<Customer>>> customerColumns;

    Customer editingCustomer;

    protected override void OnInitialized()
    {
        customers = DummyData.GetCustomers().ToList();
        customerColumns = new List<RenderFragment<RadzenDataGridColumn<Customer>>>()
        {
            CreateColumn("CustomerID", "ID", "40px"),
            CreateColumn("CompanyName", "Company Name", "280px"),
            CreateColumn("ContactName", "Contact Name", "220px")
        };
    }

    RenderFragment<RadzenDataGridColumn<Customer>> CreateColumn(string property, string title, string width)
    {
        return builder =>
        {
            builder.OpenComponent(0, typeof(RadzenDataGridColumn<Customer>));
            builder.AddAttribute(1, "Property", property);
            builder.AddAttribute(2, "Title", title);
            builder.AddAttribute(3, "Width", width);
            builder.CloseComponent();
        };
    }

    // Event handlers and other methods...
}

I keep getiting these errors:

Severity    Code    Description Project File    Line    Suppression State   Details
Error (active)  CS1061  'RadzenDataGridColumn<Customer>' does not contain a definition for 'AddAttribute' and no accessible extension method 'AddAttribute' accepting a first argument of type 'RadzenDataGridColumn<Customer>' could be found (are you missing a using directive or an assembly reference?)    TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 32      
Error (active)  CS0103  The name 'OnUpdateRow' does not exist in the current context    TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 6       
Error (active)  CS0103  The name 'AddNewCustomer' does not exist in the current context TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 8       
Error (active)  CS1643  Not all code paths return a value in lambda expression of type 'RenderFragment<RadzenDataGridColumn<Customer>>' TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 29      
Error (active)  CS1061  'RadzenDataGridColumn<Customer>' does not contain a definition for 'OpenComponent' and no accessible extension method 'OpenComponent' accepting a first argument of type 'RadzenDataGridColumn<Customer>' could be found (are you missing a using directive or an assembly reference?)  TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 31      
Error (active)  CS1061  'RadzenDataGridColumn<Customer>' does not contain a definition for 'CloseComponent' and no accessible extension method 'CloseComponent' accepting a first argument of type 'RadzenDataGridColumn<Customer>' could be found (are you missing a using directive or an assembly reference?)    TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 35      
Error (active)  CS1061  'RadzenDataGridColumn<Customer>' does not contain a definition for 'AddAttribute' and no accessible extension method 'AddAttribute' accepting a first argument of type 'RadzenDataGridColumn<Customer>' could be found (are you missing a using directive or an assembly reference?)    TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 34      
Error (active)  CS1061  'RadzenDataGridColumn<Customer>' does not contain a definition for 'AddAttribute' and no accessible extension method 'AddAttribute' accepting a first argument of type 'RadzenDataGridColumn<Customer>' could be found (are you missing a using directive or an assembly reference?)    TestingDynamicEditableTable D:\etc\Practice\TestingDynamicEditableTable\TestingDynamicEditableTable\Pages\Counter.razor 33      

I'm hoping there is a better way of solving this problem