We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Blazor EjsGrid control - does not work with async fetched list

Blazor EjsGrid control - does not work with async fetched list

EjsGrid works fine like this:

Scenario 1

<EjsGrid id="Grid" ref="defaultGrid" DataSource="@gridData">
    <GridColumns>
        <GridColumn Field="Id" HeaderText="Id"></GridColumn>
    </GridColumns>
</EjsGrid>

        protected override async Task OnAfterRenderAsync()
        {
            AuditEntries = _context.AuditEntries
                .ToList();

            gridData = defaultGrid.DataSource = AuditEntries;
        }

Scenario 2

However when I change only two words (in bold) in OnAfterRenderAsync() to the following, the grid displays "No records"

        protected override async Task OnAfterRenderAsync()

        {

            AuditEntries = await _context.AuditEntries

                .ToListAsync();

            gridData = defaultGrid.DataSource = AuditEntries;

        }


The debugger shows me that in both scenarios, the AuditEntries list is fully populated. In Scenario 1 the grid works fine, in Scenario 2 the grid displays "No Records".

This really does not make sense!


10 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team April 24, 2019 12:47 PM UTC

Hi Andrew,  
Greetings from Syncfusion support.  
By default, Grid shows “No records to display” message at the initial loading. Once getting data from the server(or local) then we have remove this message and bind data to grid this is the default behavior.   
While using asynchronous function (await operator) and it take considerable to get the data from server so that it shows “No records to display” message in Grid. If you don’t want to show this message then we suggest you to use the below way to hide the message.  
    <style>   
        .e-emptyrow{  
          display: none  
        }  
    </style>  
If this message is not removed at all, even asynchronous call completed, then please use the following highlighted code changes to reflect data source changes on grid.   
 protected override async Task OnAfterRenderAsync()  
        {  
            AuditEntries = await _context.AuditEntries  
                .ToListAsync();  
            gridData = defaultGrid.DataSource = AuditEntries;  
            defaultGrid.DataBind();  
        }  
 
Regards, 
Thavasianand S. 


AN Andrew April 26, 2019 09:30 AM UTC

Yes, that worked. Thank you!!!

TS Thavasianand Sankaranarayanan Syncfusion Team April 26, 2019 09:47 AM UTC

Hi Andrew, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.

VU Vu replied to Thavasianand Sankaranarayanan October 31, 2019 03:05 AM UTC

Hi Andrew,  
Greetings from Syncfusion support.  
By default, Grid shows “No records to display” message at the initial loading. Once getting data from the server(or local) then we have remove this message and bind data to grid this is the default behavior.   
While using asynchronous function (await operator) and it take considerable to get the data from server so that it shows “No records to display” message in Grid. If you don’t want to show this message then we suggest you to use the below way to hide the message.  
    <style>   
        .e-emptyrow{  
          display: none  
        }  
    </style>  
If this message is not removed at all, even asynchronous call completed, then please use the following highlighted code changes to reflect data source changes on grid.   
 protected override async Task OnAfterRenderAsync()  
        {  
            AuditEntries = await _context.AuditEntries  
                .ToListAsync();  
            gridData = defaultGrid.DataSource = AuditEntries;  
            defaultGrid.DataBind();  
        }  
 
Regards, 
Thavasianand S. 


My code using Syncfusion 17.3.0.19 beta but it not working, please help me:

<EjsGrid DataSource="@jobs" @ref="gr" AllowPaging="true" TValue="JobHoSo">
    <GridColumns>
        <GridColumn Field=@nameof(JobHoSo.Name) HeaderText="Tên hồ sơ"></GridColumn>
        <GridColumn Field=@nameof(JobHoSo.LastedUpdateDate) HeaderText="Lần cập nhật gần nhất"
                    Format="ddMMyyyy hhmm" Type="ColumnType.DateTime" TextAlign="TextAlign.Right" Width="150"></GridColumn>
        <GridColumn Field=@nameof(JobHoSo.IsVisible) HeaderText="Cho phép sử dụng" TextAlign="TextAlign.Center" Width="150"></GridColumn>
        <GridColumn Field=@nameof(JobHoSo.IsCheck) HeaderText="Admin đã duyệt" TextAlign="TextAlign.Center" Width="150"></GridColumn>
    </GridColumns>
</EjsGrid>
@test
<button type="button" @onclick="Reload"> Reload </button>
@code {
    string test = "";
    JobHoSo jobmodel = new JobHoSo();
    private List<JobHoSo> jobs { get; set; } = new List<JobHoSo>();
    EjsGrid<JobHoSo> gr = new EjsGrid<JobHoSo>();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        jobs = await JobService.GetHoSo();
        gr.DataSource = jobs;
        await gr.DataBind();
        test = jobs.Count.ToString();
    }

    //protected override async Task OnInitializedAsync()
    //{
    //    //jobs = await JobService.GetHoSo();
    //    //test = jobs.Count.ToString() +"a";
    //}
    public async Task Reload(EventArgs e)
    {
        jobs = await JobService.GetHoSo();
    }

}


VN Vignesh Natarajan Syncfusion Team October 31, 2019 05:41 AM UTC

Hi Customer,  

Query: “My code using Syncfusion 17.3.0.19 beta but it not working, please help me” 

The solution updated on April 24th 2019 was based on older versions of Syncfusion Nuget package. In our latest release (17.3.0.19-beta), you can bind the data asynchronously to dataSource property directly in OnInitializedAsync method / lifecycle hooks of Blazor. 

Refer the below code example. 

<EjsGrid DataSource="@Orders" AllowPaging="true"> 
    <GridPageSettings PageSize="5"></GridPageSettings> 
    <GridColumns> 
.            .              .            .                  .  
    </GridColumns> 
</EjsGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    protected override async Task OnInitializedAsync() 
    { 
        Orders = await OrderData.GetOrders(); 
    } 
} 

For your convenience we have attached the sample using above code example. 


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


VU Vu October 31, 2019 08:27 AM UTC

I'm using data from aspnet core 3.1 and WASM, it not working when OnInitializedAsync() and working when reload button.


VU Vu November 1, 2019 03:23 AM UTC

This problem may be EJSGrid DataSrouce not working with API Data Async:

[HttpGet]
        public async Task<IEnumerable<JobHoSo>> GetJobs()
        {
            return await _context.JobHoSo.OrderByDescending(x => x.CreatedDate).ToListAsync();
        }

VN Vignesh Natarajan Syncfusion Team November 1, 2019 07:33 AM UTC

Hi Vu,  

Thanks for the update.  

Query: “I'm using data from aspnet core 3.1 and WASM, it not working when OnInitializedAsync() ” 

As per your suggestion we have prepared a Blazor Client side hosted sample and bound the EjsGrid data from WebAPI controller using our latest Nuget package (17.3.0.21-beta). We are not able to reproduce the reported issue at our end. DataSource from WebAPI is bound properly to Grid in OnInitializedAsync() method.  

Kindly download the sample from below  


From the screenshot shared, we understand that you are facing some script error while running the application. The reported script might occur when there is mismatch in the versions of Nuget package and script files. So kindly ensure that you have referred same version of Nuget package (17.30.19-beta) and Script files (17.3.21). 

Also refer the below table for the latest version script and css file    

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.21/fabric.css" rel="stylesheet" /> 

Note: In your code example, you have defined the Format as ddMMyyyy hhmm for Date column. It is not the default Format for Date column. This may be the cause of an issue. If you want to apply custom format such as (ddMMyyyy hhmm) to Date column, It can be achieved using CustomFormat feature of EjsGrid. 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries. 
  
Regards, 
Vignesh Natarajan. 


VU Vu November 1, 2019 08:19 AM UTC

This version(17.3.0.21-beta)  was fixed my problems.
Thanks Vignesh Natarajan [Syncfusion]!


VN Vignesh Natarajan Syncfusion Team November 4, 2019 04:28 AM UTC

Hi Vu,  

Thanks for the update.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


Loader.
Up arrow icon