Problem using Blazor Grid.LoadData event

Radzen Studio Blazor Server
1

I am trying out your Grid for Blazor. It seems that no data is ever displayed if I have set the LoadData event. Am I doing something wrong? I'm using Blazor-WASM with the new 3.2 preview.

// Models.cs
	public class EventSummary
	{
		public int Id { get; set; }
		public DateTime UtcTime { get; set; }
		public EnergyType EnergyType { get; set; }
		public string Description { get; set; }
	}

	public enum EnergyType
	{
		Gas = 0,
		Eletricity = 1
	}

// Index.razor
@page "/"

<button @onclick=FakeSomeData>Fake data</button>
Data size = @FakeData.Count()
<RadzenGrid TItem=EventSummary
			FilterCaseSensitivity=FilterCaseSensitivity.CaseInsensitive
			AllowPaging=true
			AllowFiltering=true
			PageSize=10
			AllowSorting=true
			LoadData=@LoadSomeData
			Data=@FakeData
			ColumnWidth="200px">
	<Columns>
		<RadzenGridColumn TItem=@EventSummary
						  Property=@nameof(EventSummary.Description)
						  Title="Description" />
		<RadzenGridColumn TItem=@EventSummary
						  Property=@nameof(EventSummary.UtcTime)
						  Title="Date">
			<Template Context="data">
				@String.Format("{0:d}", data.UtcTime)
			</Template>
		</RadzenGridColumn>
	</Columns>
</RadzenGrid>

@code {
	private IEnumerable<EventSummary> FakeData = Array.Empty<EventSummary>();
	private void FakeSomeData()
	{
		FakeData = Enumerable.Range(1, 10)
			.Select(x => new EventSummary
			{
				Id = x,
				Description = "Description #" + x,
				EnergyType = EnergyType.Gas,
				UtcTime = DateTime.UtcNow
			});
		StateHasChanged();
	}

	private Task LoadSomeData(LoadDataArgs args)
	{
		FakeSomeData();
		return Task.CompletedTask;
	}
}
2

There is a known issue with Blazor WASM and components that use Linq (such as the Radzen DataGrid). Check the developer tools for any exception. If it is the same issue you can try the workaround mentioned in our getting started instructions (step 5):

If you are using client-side Blazor also add the following code to your .csproj file (after the closing RazorLangVersion element):

<BlazorLinkOnBuild>false</BlazorLinkOnBuild>

This workaround has a big downside though. It stops the Blazor (Mono?) linker which usually strips unused code. As a result the application payload increases a lot.

3

You need to set Count also similar to our demo: https://blazor.radzen.com/datagrid-loaddata

<button @onclick=FakeSomeData>Fake data</button>
Data size = @FakeData.Count()
<RadzenGrid TItem=EventSummary
            FilterCaseSensitivity=FilterCaseSensitivity.CaseInsensitive
            AllowPaging=true
            AllowFiltering=true
            PageSize=10
            AllowSorting=true
            LoadData=@LoadSomeData
            Data=@FakeData
            Count="@Count"
            ColumnWidth="200px">
    <Columns>
        <RadzenGridColumn TItem=@EventSummary
                          Property=@nameof(EventSummary.Description)
                          Title="Description" />
        <RadzenGridColumn TItem=@EventSummary
                          Property=@nameof(EventSummary.UtcTime)
                          Title="Date">
            <Template Context="data">
                @String.Format("{0:d}", data.UtcTime)
            </Template>
        </RadzenGridColumn>
    </Columns>
</RadzenGrid>

@code {
    public class EventSummary
    {
        public int Id { get; set; }
        public DateTime UtcTime { get; set; }
        public EnergyType EnergyType { get; set; }
        public string Description { get; set; }
    }

    public enum EnergyType
    {
        Gas = 0,
        Eletricity = 1
    }

    private IEnumerable<EventSummary> FakeData = Array.Empty<EventSummary>();
    int Count;
    private void FakeSomeData()
    {
        FakeData = Enumerable.Range(1, 10)
            .Select(x => new EventSummary
            {
                Id = x,
                Description = "Description #" + x,
                EnergyType = EnergyType.Gas,
                UtcTime = DateTime.UtcNow
            });
        Count = FakeData.Count();
        StateHasChanged();
    }

    private Task LoadSomeData(LoadDataArgs args)
    {
        FakeSomeData();
        return Task.CompletedTask;
    }
}

image
image1920×1080 105 KB

4

Hi

Thanks for your prompt response!

That fixed it in my test app. Unfortunately not in my real app. My real app already has the BlazorLinkOnBuild option set to false, the grid is binding to an array.

I know the data is turning up + StateHasChanged is being called because I have Count = @State.Value.Length in my razor code and after a second or two (calling out to the server) I see it update to 50.

5

I'm referring to Count property of the grid.

6

Excellent, thank you!