SfGrid + SfDataManager: display grid after remote data being loaded

[Volodymyr Savvakin]

Hi.

I'm using a SfGrid component with a SfDataManager (UrlAdaptor) to bind remote data to the grid. 

Is there an option to display the grid only after data being loaded? 

Perfectly, I'm looking for solutions like:

  

@if (!DataBinded)

{

    <Loader/>

}

else

{

    <SfGrid TValue="NewsModel" AllowPaging="true">

        <GridPageSettings PageSize="@SharedConstants.GridConstants.PageSize"></GridPageSettings>

        <SfDataManager Url="@Url" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>

        <GridEvents TValue="NewsModel" DataBound="UpdateState"></GridEvents>

        <GridColumns>

            ...

        </GridColumns>

    </SfGrid>

}

@code 

{

    public bool DataBinded { get; set; }

    public void UpdateState()

    {

        DataBinded = true;

    }

}

Looks like DataBound event does not trigger while the grid is not rendered because of if-else condition.

Thanks.

[Jeevakanth Palaniappan]

Hi Volodymyr, 

Greetings from Syncfusion support. 

We have validated your query and we suggest you to achieve your requirement by using the below code snippet. Here we set display as none to the grid class and so on initial rendering the grid will not be visible in the view. After the data is processed we have toggled the value for the local variable IsDataLoaded. Please find the below code snippet and the sample for your reference. 

<SfGrid DataSource="@Orders" Height="315"> 

    <GridEvents DataBound="@DataBoundHandler" TValue="Order"></GridEvents> 

    .. 

</SfGrid> 

 

 

@if(!IsDataLoaded) { 

<style> 

    .e-grid { 

        display: none; 

    } 

</style> 

} 

 

@code{ 

 

public bool IsDataLoaded { get; set; } = false; 

public void DataBoundHandler() { 

    IsDataLoaded = true; 

} 

 

} 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion-1139161079  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP.