Dynamic columns: timing problem with OnParametersSetAsync

[Sven H]

Hi

I'm trying to use a Grid with a variable number of columns which can be set by a parameter. I can make the columns show up, but in some cases, the column headers remain empty. I attached a small test project which illustrates the problem. This is my component containing the Grid (MyGrid.razor in the test project):

<SfGrid DataSource="@_gridRows">

    <GridColumns>

        <GridColumn Field=@nameof(GridRow.Date) HeaderText="Date"></GridColumn>

        @foreach (string columnHeader in _columnHeaders)

        {

            <GridColumn Field="@($"Values.{columnHeader}")" HeaderText="@columnHeader" />

        }

    </GridColumns>

</SfGrid>

@code

{

    private class GridRow

    {

        public DateTime Date { get; }

        public ExpandoObject Values { get; }

        public GridRow(DateTime date, ExpandoObject values)

        {

            Date = date;

            Values = values;

        }

    }

    [Parameter]

    public int NumberOfColumns { get; set; }

    private List<GridRow> _gridRows;

    private List<string> _columnHeaders;

    protected override async Task OnParametersSetAsync()

    {

        _gridRows = new List<GridRow>();

        _columnHeaders = new List<string>();

        // Without this delay, it works fine

        await Task.Delay(2000);

        for (int i = 0; i < NumberOfColumns; i++)

        {

            _columnHeaders.Add($"Column_{i}");

        }

        for (DateTime date = DateTime.Today.AddMonths(-1); date <= DateTime.Today; date = date.AddDays(1))

        {

            ExpandoObject values = new ExpandoObject();

            for (int i = 0; i < NumberOfColumns; i++)

            {

                values.TryAdd($"Column_{i}", $"{date.ToShortDateString()}_{i}");

            }

            _gridRows.Add(new GridRow(date, values));

        }

    }

}

When I run this with NumberOfColumns = 5, it looks like this:

So the columns are there, but the column headers are missing.

If I remove the "await Task.Delay(2000)", it works fine:

(in my real code, there is a database access which takes some time instead of the Task.Delay)

If I use the synchronous version OnParametersSet, it also works, even if I add a Thread.Sleep(2000). But I would prefer to use the async version.

Any idea what's wrong?

Thanks

Sven

Attachment: BlazorApp_359ffb58.zip

[Renjith Singh Rajendran]

Hi Sven, 

 

Greetings from Syncfusion support. 

 

We suggest you to use the “Columns” property of Grid to overcome the problem you are facing. In the OnParametersSetAsync method, you can populate the List for Columns property. We have modified the sample for your convenience. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomerSample-673339024 

 

Please refer the code below, 

 

 

@if (Cols.Count() != 0) 

{ 

    <SfGrid DataSource="@_gridRows" GridLines="GridLine.Both" Columns="@Cols"> 

    </SfGrid> 

} 

 

@code 

{ 

    public List<GridColumn> Cols = new List<GridColumn>();

    ...  

    protected override async Task OnParametersSetAsync() 

    { 

        _gridRows = new List<GridRow>(); 

        _columnHeaders = new List<string>(); 

         ... 

        Cols.Add(new GridColumn() { Field = "Date", HeaderText = "Date" }); 

        @foreach (string columnHeader in _columnHeaders) 

        { 

            Cols.Add(new GridColumn() { Field = "Values." + columnHeader, HeaderText = columnHeader }); 

        } 

     } 

} 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith Singh Rajendran 

[Sven H]

Thanks a lot for the feedback. I see that with this change, it works in the sample project. And in my actual project, it works a bit better now, but I still have issues. It seems that some settings of the columns are not taken into account properly and it behaves as they have not been set at all, e.g. instead of the HeaderText which I set, the Field string is used as header text (which I guess is the default if HeaderText is not set). I can't reproduce this in the sample project yet, but if I manage to do so, I will come back to you.

Regards

Sven

[Renjith Singh Rajendran]

Hi Sven, 

Thanks for your update. 

We will wait to hear from you. Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran