0

I'm new to Blazor Server Apps and just trying to create a component similar to QuickGrid but just have simpler functionalities as a start.

Here is the sample component

@page "/test-grid-table"

@using System.Data

<TableSourceContext>
    <TableSource Name="EmployeeSource" DataSource="@_employees" />
    <TableSource Name="CountrySource" DataSource="@_countries" />
    <TableNode Title="AccSol Table" DataSource="EmployeeSource">
        <TableColumn DataSource="EmployeeDS" FieldName="ID" Type="TextBox" />
        <TableColumn DataSource="EmployeeDS" FieldName="FirstName" Type="TextBox" />
        <TableColumn DataSource="EmployeeDS" FieldName="MiddleName" Type="TextBox" />
        <TableColumn DataSource="EmployeeDS" FieldName="LastName" Type="TextBox" />
        <TableColumn DataSource="CountryDS" FieldName="CountryID" Type="DropdownList" DisplayFieldName="Name" DisplayFieldValue="ID" />
    </TableNode>
</TableSourceContext>

@code {

    private DataTable _employees = default!;
    private DataTable _countries = default!;
    protected override void OnParametersSet()
    {
        Console.WriteLine("TestAccSolGridTable OnParametersSetAsync");
        // Initialize _employees DataTable
        _employees = new DataTable();
        _employees.Columns.Add("ID", typeof(int));
        _employees.Columns.Add("FirstName", typeof(string));
        _employees.Columns.Add("MiddleName", typeof(string));
        _employees.Columns.Add("LastName", typeof(string));
        _employees.Columns.Add("CountryID", typeof(int));
        _employees.Rows.Add(1, "John", "A.", "Doe", 1);
        _employees.Rows.Add(2, "Jane", "B.", "Smith", 2);

        // Initialize _countries DataTable
        _countries = new DataTable();
        _countries.Columns.Add("ID", typeof(int));
        _countries.Columns.Add("Name", typeof(string));
        _countries.Rows.Add(1, "USA");
        _countries.Rows.Add(2, "Canada");

        base.OnParametersSet();
    }
}

In that example, I want to be able to set the data tables as datasources for my table grid columns. In my TableNode, I want to be able to set as many table columns as I want specifying the source table and the type of component if it is a TextBox or a DropdownList component which are not provided.

Here is the GitHub repository.

6
  • 1
    Most of the modern Blazor component library grid implementations use some form of the Component Registration Pattern. It's clunky to make things work without it. There's an article [of mine] here that demonstrates how to implement it - shauncurtis.github.io/Articles/…. Commented Jun 27, 2024 at 8:43
  • Hi Shaun, I've seen your article and your github code. It is successfully passing ChildContent from parent to child component but it is a direct parent-child connection. What if I have a sub-child like in my example? How do I make the child display the columns in the sub-child like in my example? Commented Jun 28, 2024 at 2:03
  • I'll have a look at your repo later. May take me a day or so to get back with some comments. Commented Jun 28, 2024 at 7:45
  • I've had a look at your Repo. It looks like you're trying to build a editable data table [like Excel]. I'm struggling with the code a little. TableNode has so far defeated me. It's over 700 lines of code with what looks like paging, data manipulation and UI code all in one place. I'm not a strick adherent of the Single Responsibility Principle but that class needs some work. I would suggest building a simpler starter version of what you want [a MRE] and getting the basic Registration functionality working first. Commented Jun 30, 2024 at 9:03
  • 1
    It will work in multilayer. If you have a relatively simple minimal reproducible example I'll have a look. Commented Jul 1, 2024 at 13:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.