1. Home
  2. Forum
  3. Blazor
  4. Grid Error With Dynamic type row

Grid Error With Dynamic type row

I have a grid correctly displaying columns automatically from a data table, using a dynamic type.  However it seems there is a strange casting error in the Grid.OnAfterRenderAsync call inside Syncfusion which causes the page to no longer respond after rendering out the grid data.

I am using version 17.3.0.27-beta and .NET core 3.1.0-preview3.19553.2 and linking to scripts like this:
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DKHTracker</title>
    <base rel='nofollow' href="~/" />
    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.27/material.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ejs.interop.min.js"></script>
</head>



Here is the sample code:

<EjsGrid  DataSource="@CustomerList" Height="500">
</EjsGrid>

@code {
    public List<dynamic> CustomerList = new List<dynamic>();

    override protected async Task OnInitializedAsync() {
        DataTable dt = await Sql.Query("SELECT id, name, email FROM customer ORDER BY name");
        foreach (DataRow row in dt.Rows)
            CustomerList.Add(new Sql.DynamicDataRow(row));
    }
}

And the dynamic object is:
public class DynamicDataRow : DynamicObject {
            private readonly DataRow row;

            public DynamicDataRow(DataRow row) {
                this.row = row;
            }

            public override bool TryGetMember(GetMemberBinder binder, out object result) {
                DataColumn column = row.Table.Columns[binder.Name];
                if (column != null) {
                    result = row[column];
                    return true;
                }

                result = null;
                return false;
            }

            public override IEnumerable<string> GetDynamicMemberNames() {
                var names = row.Table.Columns.Cast<DataColumn>().Select(x => x.ColumnName);
                return names;
            }
        }



I get the following error:
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: Unable to cast object of type 'Sy
stem.String' to type 'System.Collections.Generic.List`1[Syncfusion.EJ2.Blazor.Gr
ids.GridColumn]'.
System.InvalidCastException: Unable to cast object of type 'System.String' to ty
pe 'System.Collections.Generic.List`1[Syncfusion.EJ2.Blazor.Grids.GridColumn]'.
   at Syncfusion.EJ2.Blazor.Grids.EjsGrid`1.OnAfterRenderAsync(Boolean firstRend
er)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'bQ6RWWW8xlzMDA9GKbyEsGoVl6I6DCoL1pfgkFfzWK
k'.
System.AggregateException: One or more errors occurred. (Unable to cast object o
f type 'System.String' to type 'System.Collections.Generic.List`1[Syncfusion.EJ2
.Blazor.Grids.GridColumn]'.)
 ---> System.InvalidCastException: Unable to cast object of type 'System.String'
 to type 'System.Collections.Generic.List`1[Syncfusion.EJ2.Blazor.Grids.GridColu
mn]'.
   at Syncfusion.EJ2.Blazor.Grids.EjsGrid`1.OnAfterRenderAsync(Boolean firstRend
er)

Is this a bug in the current version, or am I doing something wrong?  In previous versions i think this code worked ok.


1 Reply
VN Vignesh Natarajan Syncfusion Team November 20, 2019 12:43 PM UTC

Hi Ryan,  

Greetings from Syncfusion support.  

Query: “However it seems there is a strange casting error in the Grid.OnAfterRenderAsync call inside Syncfusion which causes the page to no longer respond after rendering out the grid data.” 

We understand that you are facing issue while binding a dynamic object to Grid. We are able to reproduce the reported behavior at our end while preparing a sample as per your code example. From your code, we found that you are trying the render the Grid with AutoGenerated columns. For AutoGenerated column, its (column) type must be known. But in your scenario, it is dynamic object.  Hence the reported issue occurred 

So to resolve the issue, kindly modify your Grid code example as below  

<EjsGrid DataSource="@CustomerList" Height="500"> 
        <GridColumns> 
            @foreach (DataColumn col in DtFlat.Columns) 
            { 
                <GridColumn Field[email protected] Width="100px" /> 
            } 
        </GridColumns> 
    </EjsGrid> 
 
@code{ 
    DataTable DtFlat; 
    public List<dynamic> CustomerList = new List<dynamic>(); 
    //List<System.Dynamic.ExpandoObject>    lstObj; 
    protected override async Task OnInitializedAsync() 
    { 
        DtFlat = OrdersDetails.GetAllRecords(); 
        foreach (DataRow row in DtFlat.Rows) 
        { 
. . . . . . ..  
        } 
    } 
} 

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


Note: Currently we do not have support for dataOperations or CRUD operations while using dynamic object. But we have considered that requirement as feature using ExpandoObject. And it will be included in any of our upcoming release. Kindly refer the below feedback link for your reference.  

 
 
Please get back to us if you have further queries.  
  
Regards, 
Vignesh Natarajan. 


Loader.
Up arrow icon