Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor, MudBlazor and dynamically creating a MudTable from a data source with an unknown number of columns

$
0
0

new to Blazor and MudBlazor. I have picked up a Blazor project that is using MudBlazor for the UI. I have a requirement to be able to dynamically create a sortable, orderable and filterable table and I am told that I need to use MudBlazor to do this. Previously I have been easily able to do this using Javascript and HTML but my problem is I dont quite understand how to create a table dynamically using MudBlazor and their own documentation is not very clear either. This is what I am trying to do:

<MudTable ServerData="@(new Func<TableState, Task<TableData<EntityRowDto>>>(GetEntityRowData))" @ref="rowTable" Elevation="1" Hover Striped Loading><HeaderContent>    @{        for (int i = 0; i < rowTable.Items.ElementAt(0).SourceRowJsonProperties.Keys.Count; i++)        {<MudTh>@rowTable.Items.ElementAt(0).SourceRowJsonProperties.ElementAt(i).Key</MudTh>        }    }</HeaderContent><RowTemplate>    @{        for (int outer = 0; outer < rowTable.Items.Count(); outer++)        {            @for (int i = 0; i < rowTable.Items.ElementAt(outer).SourceRowJsonProperties.Keys.Count; i++)            {<MudTd>@rowTable.Items.ElementAt(outer).SourceRowJsonProperties.ElementAt(i).Value</MudTd>            }        }    }</RowTemplate><NoRecordsContent><MudText>No rows found</MudText></NoRecordsContent><LoadingContent><MudText>        Loading...</MudText></LoadingContent><PagerContent><MudTablePager /></PagerContent>
@code {private MudTable<EntityRowDto>? rowTable;private async Task<TableData<EntityRowDto>> GetEntityRowData(TableState state){    var pageNumber = state.Page == 0 ? 1 : state.Page;    var url = $"api/entityrow?pageNumber={pageNumber}&pageSize={state.PageSize}";    var response = await Http.GetFromJsonAsync<PagedResponse<EntityRowDto>>(url);    return new TableData<EntityRowDto>        {            TotalItems = response?.Metadata.TotalItemCount ?? 0,            Items = response?.Items ?? Enumerable.Empty<EntityRowDto>()        };}

}

This compiles ok but it errors when I run it and I assume it is because I am not accessing the data context correctly for the MudTable?

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]Unhandled exception rendering component: Value cannot be null. (Parameter 'source')System.ArgumentNullException: Value cannot be null. (Parameter 'source')at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)at System.Linq.Enumerable.ElementAt[EntityRowDto](IEnumerable`1 source, Int32 index)at Deltafs.Integrations.Dashboard.Client.Components.EntityRows.EntityRowTable.b__0_0(RenderTreeBuilder __builder2) in C:\Data Migration V2\DataMigration.Reporting\Deltafs.Integrations.Dashboard.Client\Components\EntityRows\EntityRowTable.razor:line 10

Is what I am trying to do possible? How do I access the data context for the mudTable once it has been assigned?

Any advice greatly appreciated.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>