@ref bug in Grid?

[Maurice]

If I have a grid like

<TelerikGrid @ref="@GridRef"  Data="@GridData"> ...... </TelerikGrid>

private ObservableCollection<WrittenVM> GridData { get; set; }
public TelerikGrid<WrittenVM> GridRef { get; set; }

 

Everything works and GridRef gets a value

If I use this code

@if (GridData == null)
            {
                <p><em>Loading...</em></p>
            }
            else
            {
                <TelerikGrid @ref="@GridRef"  Data="@GridData"> ...... </TelerikGrid>
}
private ObservableCollection<WrittenVM> GridData { get; set; }
public TelerikGrid<WrittenVM> GridRef { get; set; }

 

GridRef doesn't get a value and stays null

The loading text is displayed but I use 

      protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
.....
                if (GridRef !=null)
                {
                    await GridRef.SetState(desiredState);
                }

                StateHasChanged();
            }
        }

 

To make a custom state of the grid

[Svetoslav Dimitrov]

Hello Maurice,

The Grid ref will be populated when the output includes the Grid, meaning the Grid is rendered. This actually comes from the way the Framework handles references.

What I would suggest is for you to add a Task.Delay() of minimum a render frame, which is roughly 20 milliseconds, so that the component has enough time to render. This should look like this: 

 

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //some custom code here
            if (GridRef != null)
            {
                await Task.Delay(20);
                await GridRef.SetState(desiredState);
            }

            StateHasChanged();
        }
    }

On a side note, in general, I'd recommend using the OnStateInit event to set the initial grid state: https://docs.telerik.com/blazor-ui/components/grid/state#set-default-initial-state.

Regards,
Svetoslav Dimitrov
Progress Telerik

[Maurice]

I think the delay must be above the "if (GridRef != null)"

But even a delay of 10 seconds doesn't help.

The reason why here and not in set-default-initial-stae is because of this bug https://feedback.telerik.com/blazor/1470690-aggregates-don-t-work-when-grouping-is-set-in-onstateinit

Isn't it that the grid is created because it is in the else statement of my if then else but doesn't have any data so also no @ref ?

[Marin Bratanov]

Hello Maurice,

The first time the main component hosting the grid renders, there is no data yet. When the data arrives and the grid comes up, you get another render on this component, so you should just take out the grid reference usage out of the if(firstRender) block. Also, the StateHasChanged() call at the end may be unnecessary and cause an extra render without need.

 

Regards,
Marin Bratanov
Progress Telerik

[Maurice]

It works.

await GridRef.SetState(desiredState);

This does already a call to OnAfterRenderAsync. So with both setstate and a statehaschanged it was processed 3 times.

The normal call, the setstate call and the statehaschanged call