This is a migrated thread and some comments may be shown as answers.

@ref bug in Grid?

4 Answers 1485 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Maurice
Top achievements
Rank 1
Veteran
Maurice asked on 23 Jun 2020, 12:55 PM

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

4 Answers, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 23 Jun 2020, 02:46 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Maurice
Top achievements
Rank 1
Veteran
answered on 23 Jun 2020, 03:01 PM

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 ?

0
Accepted
Marin Bratanov
Telerik team
answered on 23 Jun 2020, 04:41 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Maurice
Top achievements
Rank 1
Veteran
answered on 24 Jun 2020, 07:08 AM

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

Tags
Grid
Asked by
Maurice
Top achievements
Rank 1
Veteran
Answers by
Svetoslav Dimitrov
Telerik team
Maurice
Top achievements
Rank 1
Veteran
Marin Bratanov
Telerik team
Share this question
or