DataGrid Render using dynamic column binding & data binding

Question

I have list of columns for grid specified in a table 'Controls' containing the column_name & column_caption and a SRNO with some other extra details which is not necessary here.

public IEnumerable<ControlSettings> datagrid { get; set; } --> this contains the list of rows from above table.

List<Dictionary<string, object>> gridData { get; set; } = new List<Dictionary<string, object>>(); --> this contains data for the grid where dictionary key is set to be column_name from the above ControlSettings class.

<Blazorise.DataGrid.DataGrid Data="@gridData" TItem="Dictionary<string, object>">
<DataGridColumns>
@foreach (var column in datagrid)
{
<DataGridColumn TItem="Dictionary<string, object>" Field="@column.COLUMN_NAME" Caption="@column.COLUMN_CAPTION" />
}
</DataGridColumns>
</Blazorise.DataGrid.DataGrid>

This is the code i used for displaying the grid. But the grid is not getting displayed & getting error.

Error is : ArgumentException: Cannot detect the member of System.Collections.Generic.Dictionary`2[System.String,System.Object] (Parameter 'LOC')

Note: LOC is one of the column_name

The issue might be because of dictionary usage.

please help me with any suggestions to make this code work.

Amit Mohanty · Answer

The issue you're facing might be due to the way you are trying to bind dynamic data structures like dictionaries to strongly typed components. When you specify TItem="Dictionary ", the compiler tries to infer properties from Dictionary , which is not a strongly typed class with predefined properties. So you need to provide a strongly typed class or structure that Blazorise DataGrid can use to infer the properties.

Dhanya Nithin · Answer

This is what i have already done & giving the same error as i posted before

Jithu Thomas · Answer

// Assuming ControlSettings class has properties for COLUMN_NAME and COLUMN_CAPTION public class ControlSettings { public string COLUMN_NAME { get; set; } public string COLUMN_CAPTION { get; set; } // Add other necessary properties if needed } // Your component class @page "/your-page" @code { // Sample data for ControlSettings, replace this with your actual data public List datagrid = new List { new ControlSettings { COLUMN_NAME = "LOC", COLUMN_CAPTION = "Location" }, // Add more rows as needed }; // Sample data for the grid, replace this with your actual data List > gridData = new List > { new Dictionary { {"LOC", "Value1"}, // Add more key-value pairs for other columns }, // Add more rows as needed }; } "> @foreach (var column in datagrid) { " Field="@column.COLUMN_NAME" Caption="@column.COLUMN_CAPTION" /> } try this code snippet.