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

Binding DataTables to Grids - a solution.

I have a requirement to get a DataTable and display it nicely on a Grid control.  This is pretty straightforward in Blazor with <tables>, but not trivial when it comes to binding the data to a nice, structured  Grid control.

As a control that is expecting an IEnumerable collection, DataTables don't really meet the criteria for the data binding that the Grid needs.  The DataRows are composed of ItemArrays, which will not bind nicely with the DataGrid in the ways it is expecting.  After days of pushing and prodding on this problem and a number of false starts, I've discovered dynamic objects in C# are a pretty fast and easy way to solve this mess, without having to dive into a whole mess of Reflection.  Essentially, the System.Dynamic.ExpandoObject is a weird hybrid that acts like a class, but can be set using a Dictionary.  So, by taking the columns and rows and copying them to a List of these ExpandoObjects, we're able to display the data on the screen.  This isn't going to be a two-way binding scenario (although I suppose it's possible with a bit of work), but just for displaying the data within a DataTable in a nice grid control is a good start.

Attachment: code_sample_c9996fe7.zip

9 Replies

RS Renjith Singh Rajendran Syncfusion Team July 22, 2019 01:24 PM UTC

Hi Richard, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suspect that, you are facing difficulties in binding a DataTable to Syncfusion Grid. Based on this requirement, we have prepared a sample to bind a DataTable as DataSource for a Syncfusion Grid. We have used the same codes which you have shared with us. We are attaching the sample for your convenience, please download the sample from the link below, 
Note : In the above sample we have used latest nuget and script version v. 

If we have misunderstood your query, or you are still facing the same problem, then please get back to us with the following details for better assistance. 

  1. Share the detailed description of your complete requirement.
  2. Share the Syncfusion version details.
  3. Share the details of the problem you are facing in binding a DataTable to Grid.
  4. Share the exact scenario or proper replication procedure.
  5. Share with us a video demo showing the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Renjith Singh Rajendran. 

AR A. Richard July 22, 2019 03:23 PM UTC

Good Morning Renjith,

Thank you for bundling my solution nicely into a full project with data and everything.  Just to give everyone a little more context, this solution is an example of late-binding the data to a SyncFusion Grid control, where the Grid control has no prior knowledge of the DataTable schema.  This can be handy when people have dynamic data that they need to display and not necessarily edit.


VN Vignesh Natarajan Syncfusion Team July 24, 2019 12:44 PM UTC

Hi Richard,  

Thanks for the detailed explanation.  

We are glad to hear that you are able to achieve your requirement using our solution. 

Please get back to us if you have further queries.  

Vignesh Natarajan. 

JO Joe December 8, 2020 02:47 AM UTC

Could you provide a version of this for the latest SfGrid controls?

VN Vignesh Natarajan Syncfusion Team December 8, 2020 05:22 AM UTC

Hi Joe,  
Thanks for contacting Syncfusion support.  
Query: “Could you provide a version of this for the latest SfGrid controls? 
We have achieved your requirement to bind DataTable to Grid component by converting the datatable to ExpandoObject list and using dynamic column building. Kindly download the sample from below which we have prepared using (Syncfusion.Blazor) Nuget version.  
Refer our UG documentation for your reference 
Please get back to us if you have further queries.   
Vignesh Natarajan 

MJ Mark Jay February 8, 2023 06:09 AM UTC

This does solve he problem and I can get my DataTable to display in the Blazor Grid. But editing and saving back to the database seems to be a complex matter.

Why can't the Blazor SFGrid just use a DataTable as a DataSource like all other Data Grids?

PS Prathap Senthil Syncfusion Team February 10, 2023 12:27 PM UTC

Hi Mark,

Based on your query, we suggest using a custom adapter. We have already documented this topic. Please see the documentation link below. 


Prathap S

AM Ahmad Mohammad replied to Prathap Senthil December 27, 2023 06:37 AM UTC

Heloo syncfusion teams

It is possible to use datatable with Template column if yes could you help me please


PS Prathap Senthil Syncfusion Team December 29, 2023 08:31 AM UTC

Hi Ahmad,

We would like to clarify that we don’t have direct support to bind data to the DataGrid from a datatable, so it's not possible to use the datatable with a template column. Please note that our Grid component requires strongly typed objects or POCO object-type data for binding. This means that data binding must be based on a specific model type (class). This behavior is inherent to the default functionality of the grid. If the model type is unknown, we recommend using ExpandoObjectBinding or DynamicObjectBinding. For more information on these binding options, please refer to the following documentation link:

However, you can achieve your requirement by converting the datatable to an ExpandoObject list, allowing you to use the template. We have attached a sample for your reference and code snippet for your reference.

<SfGrid DataSource="@CustomerList" TValue="ExpandoObject" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">

    <GridPageSettings PageSize="5"></GridPageSettings>


        <GridColumn Field="OrderID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></GridColumn>

        <GridColumn Field="CustomerID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right">



                    var employee = (context as IDictionary<string, object>);

                    var edit = (string)employee["CustomerID"];








@code {



    System.Data.DataTable dtOrder;


    public List<string> Columns;

    public List<ExpandoObject> CustomerList;


    protected override void OnInitialized()




        CustomerList = CreateOrderRows();





    public List<ExpandoObject> CreateOrderRows()


        dtOrder = new DataTable("orders");

        System.Data.DataColumn dcOrderID = new DataColumn("OrderID", typeof(String));

        System.Data.DataColumn dcCustomerID = new DataColumn("CustomerID", typeof(String));




        dtOrder.Rows.Add("Order1", "Customer1");

        dtOrder.Rows.Add("Order1", "Customer2");

        dtOrder.Rows.Add("Order2", "Customer2");



        var lstRows = new List<ExpandoObject>();

        foreach (System.Data.DataRow row in dtOrder.Rows)


            System.Dynamic.ExpandoObject e = new System.Dynamic.ExpandoObject();

            foreach (System.Data.DataColumn col in dtOrder.Columns)

                e.TryAdd(col.ColumnName, row.ItemArray[col.Ordinal]);




        return lstRows;






Sample Link: https://blazorplayground.syncfusion.com/embed/LXrUshXPLDWuuezP?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Prathap s

Live Chat Icon For mobile
Up arrow icon