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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Blazor Live DataGrid – A Quick start to create and bind live data

Platform: Blazor |
Control: Grid |
Published Date: February 15, 2021 |
Last Revised Date: February 18, 2021

 

 

 

 

What is Blazor Live DataGrid?

Blazor Live DataGrid is a customized DataGrid component to show the live data in Blazor applications. It is optimized for handling and updating large number of records at real-time which is suitable for binding financial records and more.

 

How to bind the live data in Blazor Live DataGrid?

To bind live data without refreshing the entire data, we can use the SetRowData() method of the Blazor Grid Component.

 

Refer to the below code example.

 

CSHTML

<SfGrid @ref="Grid" DataSource="@GridData" Height="300" Width="1000" EnableVirtualization="true" EnableColumnVirtualization="true"> 
    <GridColumns> 
        @foreach (var prop in typeof(Order).GetProperties()) 
        { 
            <GridColumn Field="@prop.Name" IsPrimaryKey="@(prop.Name == "OrderID")" Width="90"></GridColumn> 
        } 
    </GridColumns> 
</SfGrid> 
  
@code{ 
    private static System.Timers.Timer aTimer; 
    SfGrid<Order> Grid { get; set; } 
. . . . . . . .  
    public void OnTimerEvent(Object source, ElapsedEventArgs e) 
    { 
        if(skip > 90000) 
        { 
            skip = 0; 
        } 
        GridData[skip].CustomerID = "Updated"; 
        GridData[skip].EmployeeID = 0; 
        GridData[skip].ShipCity = "Updated"; 
        GridData[skip].ShipCountry = "Updated"; 
        Grid.SetRowData(GridData[skip].OrderID, GridData[skip]); 
        skip = skip + 1;         
        InvokeAsync(StateHasChanged); 
    } 
 

 

 

Reference

You can get a runnable sample for the Blazor Live DataGrid from this link.

 

Conclusion

I hope you enjoyed learning about the quick start to create and bind live data in the Blazor Grid. You can explore runnable sample of Getting started with Blazor Live DataGrid from this GitHub location.

You can refer to our Blazor DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Grid example to understand how to present and manipulate data.  

For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Blazor Grid and other Blazor components.

 

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon