Starting to use the Grid component and get error about @context when attempting to run example

[awilsMookie]

Hello,

I trying to use the Grid component in some work I am doing and before doing so I'm attempting to run the example. I have a razor component name TestComponent.razor and I place it on the index.cshtml page. When I put basic components on the page (text box, date control, and submit button), I have not issues but when I put the grid control on the component. I get the following error when attempting to debug (build was successful).

CS0103 The name 'context' does not exist in the current context

Here is the code, I am attempting to run....the only difference from the code on the site is that I change the Employees object out for a Persons object. Any help would be appreciated.

@page "/"

<EditForm

 

<Grid @ref="grid"
      TItem="Person4"
      Class="table table-hover table-bordered table-striped"
      DataProvider="PersonDataProvider"
      AllowFiltering="true"
      Responsive="true" >

    <GridColumns>
        <GridColumn TItem="Person4" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Person4" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Person4" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Person4" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Person4" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code
{
private IEnumerable persons;

protected override void OnInitialized()
{
	persons = new List<Person>
	{
		new Person { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
		new Person { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
		new Person { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
		new Person { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
		new Person { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
		new Person { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
		new Person { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
		new Person { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
		new Person { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
	};
}

private async Task<GridDataProviderResult<Person>> PersonDataProvider(GridDataProviderRequest<Person> request)
{
    return await Task.FromResult(request.ApplyTo(persons));
}

}

[gvreddy04]

@awilsMookie Thank you for trying BlazorBootstrap. Please share the full code of the page along with the exception details. It would be helpful if you could create a GitHub repository with minimal steps to reproduce the issue.

[awilsMookie]

Hello @gvreddy04....

Think I added my reply in the wrong place.

I created a sample project (see attached). I think I am pass the @context issue but the grid is not showing up. Any help would be appreciated.

Thank you
RazorWithComponent.zip

[awilsMookie]

Also when I looked through Developer tools in Chrome. I found this error:

https://localhost:7139/_framework/blazor.webassembly.js net::ERR_ABORTED 404 (Not Found)

[gvreddy04]

@awilsMookie We do not check .zip files due to security reasons. It would be helpful if you could create a GitHub repository with minimal steps to reproduce the issue.

How did you set up your project?

Please share the following details as well:

.NET Version: [e.g. .NET 6, .NET 7, .NET 8, .NET 9]
BlazorBootstrap: [e.g. 2.0.0, 2.1.0, 2.2.0]
Blazor WebAssembly / Server: [e.g. WebAssembly, Server]
Blazor Interactive Render Mode: [e.g. Auto, Server, WebAssembly, None]
Blazor Interactivity Location: [e.g. Global, Per page/component]"

[awilsMookie]

@gvreddy04

Created a GitHub repository at

https://github.com/awilsMookie/RazorWithComponent

.NET Version: .NET 8.0
App Type: ASP.NET Core Web App (Razor Pages)
Blazor.Bootstrap 3.2.0

[awilsMookie]

@gvreddy04

For the web app...I did not indicate an interactive render mode or location