vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
768 stars 40 forks source link

Grid Data from dbContext #887

Open KJohnson82 opened 1 month ago

KJohnson82 commented 1 month ago

I'm having an issue getting the Grid to pull my data and process it, I have tried both the Data and the DataProvider options and its not pulling and displaying my data. If i do the following: `

@code {

private List<Department>? departments;

protected override async Task OnInitializedAsync()
{
    departments = await dbContext.Departments.ToListAsync();
}

} ` It pulls my data from my Sqlite database (DbContext) and displays it on the page. When I try to pull my data with the Grid option I it just returns null and doesn't display anything.

` <Grid itemref="grid" TItem="Location" Class="table table-hover table-bordered table-striped" Data="locations" @ DataProvider="LocationDataProvider" @ Responsive="true" AllowFiltering="true" AllowPaging="true">

<GridColumns>
    <GridColumn TItem="Location" HeaderText="Id" PropertyName="LocId">
        @context.LocId
    </GridColumn>
    <GridColumn TItem="Location" HeaderText="Location Number" PropertyName="LocNum">
        @context.LocNum
    </GridColumn>
    <GridColumn TItem="Location" HeaderText="Location Name" PropertyName="LocName">
        @context.LocName
    </GridColumn>
    <GridColumn TItem="Location" HeaderText="City, State" PropertyName="City">
        @context.City, @context.State
    </GridColumn>
</GridColumns>

@code { List? locations; Grid grid = default!;

protected override async Task OnInitializedAsync()
{

    locations = await dbContext.Locations.ToListAsync();
}

//I was trying to get this to work
private async Task<GridDataProviderResult<Location>> LocationDataProvider(GridDataProviderRequest<Location> request)
{
    IEnumerable<Location> locs;

    // Apply filtering, sorting, and paging to the data.
    return await Task.FromResult(request.ApplyTo(locations));
}

}

`

Any idea why this isn't working?

tet-web-dev commented 1 month ago

Maybe not a solution but just wanted to point out: The closing grid tag after the grid columns isn't present. also: instead of IENumberable locs; try: locations = dbContext.Locations // dont use ToList() here

rwb196884 commented 1 month ago

Same problem here. Client side component with data passed from server side. Data is present, but <Grid has no output.

@code {
    public class UserListComponentDto
    {
        public string UserId { get; set; }
        public string UserName { get; set; }
        public string Email { get; set; }
        public List<string> Roles { get; set; }

        public bool Adviser { get { return Roles.Any(z => z == Identity.User.Roles.Adviser); } }
    }

    BlazorBootstrap.Grid<UserListComponentDto> grid = default!;

    [Parameter]
    public IEnumerable<UserListComponentDto> Users { get; set; } = (new List<UserListComponentDto>()).AsQueryable();
}

  @* This prints stuff out. *@
    foreach(UserListComponentDto u in Users)
    {
        <p>User @(u.UserName)</p>
    }

  @* This does nothing. *@
    <Grid @ref="grid"
          TItem="UserListComponentDto"
      Class="table table-hover table-bordered table-striped"
          Data="Users"
@*           DataProvider="DataProvider"
 *@      AllowFiltering="true"
      Responsive="true">

    <GridColumns>
            <GridColumn TItem="UserListComponentDto" HeaderText="Email" PropertyName="Email">
                @context.Email
        </GridColumn>
    </GridColumns>

</Grid>
rwb196884 commented 1 month ago

locations = dbContext.Locations // dont use ToList() here

That will work if it's all server side. How do you get data to a client side component a page at a time? (Previously I've used Angular and an OData API. I feel that Blazor should be able to do that -- and more easily -- but it's not clear wither it can or if so then how.)

rwb196884 commented 1 month ago

If I copy the code from https://demos.blazorbootstrap.com/grid then the grid is also empty.