vikramlearning
Grid Data from dbContext
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: `
-
@foreach (var department in departments)
{
if (@department.DeptManager is null || @department.DeptManager == "")
{
- @department.DeptName - @department.DeptLocation.LocName } else {
- @department.DeptName - @department.DeptLocation.LocName - @department.DeptManager }
}
</ul>
@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<Location>? locations; Grid<Location> 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?
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<Location> locs; try: locations = dbContext.Locations // dont use ToList() here
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>
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.)
If I copy the code from https://demos.blazorbootstrap.com/grid then the grid is also empty.
@rwb196884 For security reasons, we do not open .zip attachments. Please create a GitHub repo with minimal steps to reproduce the issue.
This simply does not work: https://github.com/vikramlearning/blazorbootstrap/blob/4d67533b2bcc1bfc140245c695b27e76b70cefc1/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_02_Server_Side_Filtering_Paging_And_Sorting.razor
I've just found out that the default MS project template you need to att @rendermode InteractiveAuto to the top of the page, and then the grid starts working.
I've just found out that the default MS project template you need to att
@rendermode InteractiveAutoto the top of the page, and then the grid starts working.
Not for me. I have played a lot with the source code also and, whatever I do, something is not working as expected. Let me throw a few examples (same behaviour no matter on the render mode).
- No changes in the source code. Next examples not working (grid empty)
<Grid @ref="@DataGrid"
Data="DataList"
TItem="Data">
</Grid>
@code{
Grid<Data> DataGrid { get; set; }
[Inject] private DataService DataService { get; set; } = null!;
private List<Data> DataList { get; set; }
protected override async Task OnInitializedAsync()
{
DataList = await DataService.GetData();
}
}
<Grid @ref="@DataGrid"
DataProvider="DataProvider"
TItem="Data">
</Grid>
@code{
Grid<Data> DataGrid { get; set; }
[Inject] private DataService DataService { get; set; } = null!;
private List<Data> DataList { get; set; }
protected override async Task OnInitializedAsync()
{
DataList = await DataService.GetData();
}
private async Task<GridDataProviderResult<Data>> DataProvider(GridDataProviderRequest<Data> request)
{
return await Task.FromResult(request.ApplyTo(DataList!));
}
}
<Grid @ref="@DataGrid"
Data="DataList"
TItem="Data">
</Grid>
@code{
Grid<Data> DataGrid { get; set; }
[Inject] private DataService DataService { get; set; } = null!;
private List<Data> DataList { get; set; }
protected override async Task OnInitializedAsync()
{
DataList = await DataService.GetData();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await DataGrid!.RefreshDataAsync();
}
}
}
<Grid @ref="@DataGrid"
DataProvider="DataProvider"
TItem="Data">
</Grid>
@code{
Grid<Data> DataGrid { get; set; }
[Inject] private DataService DataService { get; set; } = null!;
private List<Data> DataList { get; set; }
protected override async Task OnInitializedAsync()
{
DataList = await DataService.GetData();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await DataGrid!.RefreshDataAsync();
}
}
private async Task<GridDataProviderResult<Data>> DataProvider(GridDataProviderRequest<Data> request)
{
return await Task.FromResult(request.ApplyTo(DataList!));
}
}
- No changes in the source code. This is the only one example I found it working but also has some minor issues (If you have a pageSize set other than the default, any first action (sorting for example) resets pageSize to the default).
<Grid @ref="@DataGrid"
DataProvider="DataProvider"
TItem="Data">
</Grid>
@code{
Grid<Data> DataGrid { get; set; }
[Inject] private DataService DataService { get; set; } = null!;
private List<Data> DataList { get; set; }
protected override async Task OnInitializedAsync()
{
//Data load moved into OnAfterRender lifecycle
//DataList = await DataService.GetData();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
DataList = await DataService.GetData();
await DataGrid!.RefreshDataAsync();
}
}
private async Task<GridDataProviderResult<Data>> DataProvider(GridDataProviderRequest<Data> request)
{
return await Task.FromResult(request.ApplyTo(DataList!));
}
}
- The source code slightly changed. Result is all above examples are working but there are two issues. First is, after the grid is loaded, if there was a filter applied and stored into the settings, it is applied again but filter field is empty. To reset the filter you have to type some value again and delete to reset fully. Second issue is already mentioned above with the reset of the pageSize on any first action.
## Code change in grid component
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Task.Delay(300); //This line added. Any value below 300 milliseconds returns empty grid.
if (firstRender)
{
await RefreshDataAsync(firstRender);
isFirstRenderComplete = true;
}
// As Rendering now complete we can reset the column visibility change to false
isColumnVisibilityChanged = false;
await base.OnAfterRenderAsync(firstRender);
}
It is weird behaviour especially if you consider that any of that is working if the list of data is hardcoded. Another thing I do not understand is why grid is not loading the list loaded in the OnInitialized lifecycle as it is loaded before the grid is rendered. I had no more time so far to play a bit more with it.
