Dynamic Data Binding in Grid without defining column in design time

Question

I have an grid control in my blazor web application. I would like to know how to set data dynamically in grid and Column should be change dynamically without defining column in markup and also I would like to know how to set column width dynamically (Auto Colum width )

Vignesh Natarajan · Accepted Answer

Hi Ismail,

Thanks for contacting Syncfusion support.

Query: “ would like to know how to set data dynamically in grid and Column should be change dynamically without defining column in markup and also I would like to know how to set column width dynamically (Auto Colum width )”

We have analyzed your query and we understand that you want to change the Grid data dynamically. And also you want to generate the columns dynamically with auto fitted column. We have achieved your requirement by using AutoFit feature of GridColumn and building the GridColumn dynamically.

Refer the below code example.

@typeparam TValue

<SfGrid TValue="TValue" DataSource="@Lists" AllowPaging="true">

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

<GridColumns>

@foreach (var prop in typeof(TValue).GetProperties())

{

<GridColumn Field="@prop.Name" IsPrimaryKey="@(prop.Name == "OrderID")" AutoFit="true" AllowEditing="@prop.CanWrite"></GridColumn>

}

</GridColumns>

</SfGrid>

@code{

[Parameter]

public List<TValue> Lists { get; set; }

}

[Index.Razor]

<SfDataGrid TValue="Order" Lists="Orders"></SfDataGrid>

For your convenience we have prepared a sample which can be downloaded from below

Sample: https://www.syncfusion.com/downloads/support/forum/164922/ze/DataGrid960377213

Refer our UG documentation for your reference

https://blazor.syncfusion.com/documentation/datagrid/columns/#dynamic-column-building

https://blazor.syncfusion.com/documentation/datagrid/columns/#autofit

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

KINS · Answer

Thanks for quick support..Can I create grid column without loop ??Is there any properties like "AutoGenerateColumn=True" ..

Vignesh Natarajan · Answer

Hi Ismail, 
 
Thanks for the update.  
 
Query: “Can I create grid column without loop ?? Is there any properties like "AutoGenerateColumn=True" ..” 
 
Yes, we have provided support to AutoGenerate the Grid column based on the datasource type. Refer our UG documentation for your reference 
 
https://blazor.syncfusion.com/documentation/datagrid/columns/#auto-generation 
 
Note: Grid DataSource must be a generic class. AutoGenerated columns is not supported for ExpandoObject and DynamicObjects 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan

James · Answer

The answer is great and I got it working, but how do I get the RowSelected from the @typeparam SearchClass?You can see in the code at the bottom where I cannot get the id@typeparam SearchClass @foreach (var prop in typeof(SearchClass).GetProperties()) { if (prop.Name == "id") { } else { } } @code{[Parameter] public List Data { get; set; }private void GetSelectedRecord(RowSelectEventArgs args){// here I need the ID of the row clicked// If I put args.Data.id it doesnt know what .id is}}

Renjith Singh Rajendran · Answer

Hi James, 

We are not clear about this exact requirement or problem you are facing. We need the following details to further proceed on this. Please get back to us with the following details to proceed further. 


Share a detailed explanation of your complete requirement or the problem you are facing.
Are you facing difficulties in fetching the ID property value of SearchClass model from args.Data based on the SearchClass model value bind to Grid?
Or do you need to fetch the id attribute value of tr element which you clicked? If so, share the details regarding why you need to fetch the id attribute value?
Share a video demo explaining your requirement.
If possible share a simple issue reproducing sample based on your scenario. 

Please get back to us if you need further assistance. 

Regards, 
Renjith R

James · Answer

Page.razorPage.razor.cs [Parameter] public DataTable SearchResults_DataSourceTable { get; set; } [Parameter] public List SearchResults_DataSourceList { get; set; }public void SetupControlForSearchResults() { DataTable dtSearchResults = MyClass.GetAll(); List lstObj = new List(); foreach (DataRow row in dtSearchResults.Rows) { System.Dynamic.ExpandoObject e = new System.Dynamic.ExpandoObject(); foreach (DataColumn col in dtSearchResults.Columns) { e.TryAdd(col.ColumnName, row.ItemArray[col.Ordinal]); } lstObj.Add(e); } SearchResults_DataSourceTable = dtSearchResults; SearchResults_DataSourceList = lstObj;}HTMLSearchResults.razor@using System.Data@using Syncfusion.Blazor.Grids@inject NavigationManager NavManager@try{ @foreach (DataColumn col in DataSourceTable.Columns) { } }catch (Exception ex){ throw ex;}@code { [Parameter] public DataTable DataSourceTable { get; set; } [Parameter] public List DataSourceList { get; set; } public void GetSelectedRecord(RowSelectEventArgs args) { // This is where I cannot get the ID for the RowSelected }}

James · Answer

I am sorry, I am having trouble pasting the code into this comment box, it keeps losing the code so I will add this extra reply to explain.

The code I just posted is a HTMLSearchResults.razor component which I want to reuse for every page in my website. I want to dynamically load the DataTable from the parent Page.razor and send in the

DataTable DataSourceTable

List<System.Dynamic.ExpandoObject> DataSourceList

Everything works ok to build the grid dynamically with headers and data but the issue I am having is because I am using System.Dynamic.ExpandoObject for the RowSelected, it will never find the id of the row clicked.

As the code above states I have:

public void GetSelectedRecord(RowSelectEventArgs<System.Dynamic.ExpandoObject> args){

// here is where I cannot find the id of the row clicked

}

Vignesh Natarajan · Answer

Hi James,

Thanks for sharing the details.

Query: “the issue I am having is because I am using System.Dynamic.ExpandoObject for the RowSelected, it will never find the id of the row clicked.”

We have analyzed your query and we suggest you to achieve your requirement using the RowData property of RowSelected event of Grid. We have passed the selected record details in the RowSelected event as an argument. It will be inform of ExpandoObject and it can be accessed by converting it to dynamic object.

Refer the below code example.

@try

{

<SfGrid DataSource="@DataSourceList" TValue="System.Dynamic.ExpandoObject" AllowPaging="true" AllowFiltering="true" AllowSorting="true">

<GridEvents RowSelected="@GetSelectedRecord" TValue="System.Dynamic.ExpandoObject"></GridEvents>

<GridPageSettings PageCount="5"></GridPageSettings>

<GridColumns>

@foreach (DataColumn col in DataSourceTable.Columns)

{

<GridColumn Field=@col.ColumnName />

}

</GridColumns>

</SfGrid>

}

catch (Exception ex)

{

throw ex;

}

@code {

[Parameter] public DataTable DataSourceTable { get; set; }

[Parameter] public List<System.Dynamic.ExpandoObject> DataSourceList { get; set; }

public void GetSelectedRecord(RowSelectEventArgs<System.Dynamic.ExpandoObject> args)

{

var data = args.Data as dynamic;

Console.WriteLine(data.CustomerID);

}

Kindly refer the below sample for your reference

Sample: https://www.syncfusion.com/downloads/support/forum/164922/ze/DataGrid_Server527932491.zip

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

James · Answer

You are a star, thank you very much.Support from syncfusion is amazing, not only do you answer the question, you also give a working example... very much appreciated.Thank you for your time in replyingRegardsJames

Vignesh Natarajan · Answer

Hi James,  

Thanks for the update..  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan

Kerry Kerschbaumer · Answer

Hi Vignesh,This example is already helpful and I got it to work.However, my problem has one complexity more as I don't need a "template" grid working for multiple tables, but the columns of the table being dynamic itself.My data object looks like this: public class Effort { public int Id { get; set; } //just for db index public int Task { get; set; } //id of items in task table public int Role { get; set; } //id of items in roles table public string tName { get; set; } //name of tasks in task table (show as row title) public string rName { get; set; } //name of roles in role table (show as column title) public double eHrs { get; set; } //the value for every task/role table cell }.... .... List efforts = new List(); Currently the table shows one row for each tasks/role combination instead of the matrix between tasks and roles. Would that also be possible? I know that needs a second generic loop for the columns, but am not sure whether the mapping to the effort values would be correct?Thanks a lot,Klaus.

Rahul Narayanasamy · Answer

Hi Klaus, 

Greetings from Syncfusion. 

From your shared details, we suspect that you want to show the value for the column from the other table data based on the common field in the both tables (foreignkey value). If yes, we have already have the support for this requirement.  

Find the below documentation link for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/columns#foreign-key-column 

Whether did you want to achieve something like the below requirement? Also, we need some details regarding your requirement. Please share the below details which will be helpful to validate and provide a better solution. 


Could you please check whether did you want to achieve the same requirement from your end? 
Whether did you want to achieve the above requirement with dynamic data(ExpandoObject data)?
Share your exact requirement.

Regards, 
Rahul

Kerry Kerschbaumer · Answer

Hi Rahul,Thanks for your reply.Yes, I do have the column headers in one table and row headers in another table. I have no issue with showing those headers, but how to dynamically create the table structure.I already succeeded now to use ExpandoObject to create the structure, but am stuck now at update features due to th e read/only definition of the dictionary structure.Would it help to convert the ExpandoObject to a list first or use a json string instead as table data?ThanksKlaus.

Vignesh Natarajan · Answer

Hi Klaus,  
 
Thanks for the update.  
 
Query: “I have no issue with showing those headers, but how to dynamically create the table structure. I already succeeded now to use ExpandoObject to create the structure, but am stuck now at update features due to the read/only definition of the dictionary structure.” 
 
We understand that you are facing issue while binding the datasource to Grid in form of ExpandoObject. But we need some more details the issue you are facing. So kindly share the following details.  
 

Share the details about the Grid datasource. 
Also share the details on how you have bound data to Grid. 
Share the Grid code example. 
Are you facing any script while performing CRUD / Update action. 
If possible share a simple sample to validate the reported query further at our end. 
 
Above requested details will be very helpful for us t validate the reported query further at our end and provide solution as early as possible.  
 
Regards, 
Vignesh Natarajan

Kerry Kerschbaumer · Answer

Hi, thanks for your reply.I think most of your questions are answered when looking at the code of the razor page:@if (dynList == null){

Loading...

}else{ @foreach (var prop in cols) { @if (prop.Name == "Task") { } else { } }

}@code { List dynList = null; dynamic propEff = new ExpandoObject(); List tasks; List roles; List cols = new List(); private List ToolbarItems = new List() { "Edit", "Update", "Cancel" }; public class colProp { public string Name { get; set; } public bool CanWrite { get; set; } } protected override async Task OnInitializedAsync() { tasks = await db.PTask.ToListAsync(); roles = await db.Roles.ToListAsync(); int ix = 1; int iy = 1; string tName = ""; string rName = ""; //### Create dynamic template for table headers dynamic propEff = new ExpandoObject(); ((IDictionary)propEff).Add("tID", 0); ((IDictionary)propEff).Add("Task", ""); cols.Add(new colProp { Name = "Task", CanWrite = false }); foreach (Role pRole in roles) { ((IDictionary)propEff).Add(pRole.NAME, 0); cols.Add(new colProp { Name = pRole.NAME, CanWrite = true }); } //### Get DB values into table object dynList = db.GetDynEfforts().Result.ToList(); //### Create dummy entries if db is empty if (dynList == null) { //### Create new dynamic object dynList = new List(); foreach (PTask pTask in tasks) { ix = 1; tName = tasks.Where(t => t.Id == iy).FirstOrDefault().NAME; dynamic dynEff = new ExpandoObject(); ((IDictionary)dynEff).Add("tID", iy); ((IDictionary)dynEff).Add("Task", tName); foreach (Role pRole in roles) { rName = roles.Where(r => r.Id == ix).FirstOrDefault().NAME; ((IDictionary)dynEff).Add(pRole.NAME, 0); ix++; } dynList.Add(dynEff); await db.SetDynEfforts(dynEff); dynEff = null; iy++; } } } public async void EffortsActionHandler(ActionEventArgs args) { if (args.RequestType != Syncfusion.Blazor.Grids.Action.BeginEdit) { if (!db.SetDynEfforts(args.Data).Result) throw new InvalidOperationException("Error during DB save operation"); } }The input and output db data looks like this:Id PTask Role eHrs1 1 1 02 1 2 33 1 3 04 1 4 45 1 5 06 1 6 0The db Interface is realised through the db.GetDynEfforts and db.SetDynEfforts and works correctly.Problematic is especially the "@bind-Value" param in the EditTemplate for the numeric editor (which is necessary as it needs to edit decimal values, which I understand is not possible with the regular number format cell).ThanksKlaus.

Rahul Narayanasamy · Answer

Hi Klaus, 

Thanks for the update. 

We are happy to hear that you achieved your requirement by yourself. Please get back to us if you need further assistance. 

Regards, 
Rahul

Kerry Kerschbaumer · Answer

Dear SyncFusion Team,I found now an (already existing) suitable description in SF documentation regarding using binding to a ExpandoObject (Incl. this video: https://www.youtube.com/watch?v=Xhaw3DdHmJk&t=448s)That actually helped a lot and I got the hole solution working now with the following components:1) a dynamic object with respective methods to use for read & update: public class EffortItem : DynamicObject { public Dictionary EffortDict = new Dictionary(); public override bool TryGetMember(GetMemberBinder binder, out object result) { string name = binder.Name; return EffortDict.TryGetValue(name, out result); } public override bool TrySetMember(SetMemberBinder binder, object value) { EffortDict[binder.Name] = value; return true; } public override IEnumerable GetDynamicMemberNames() { return this.EffortDict?.Keys; } public void Add(string Key, object Value) { EffortDict.Add(Key, Value); } public object Get(string Key) { var ret = (EffortDict.TryGetValue(Key, out object result)) ? result : null; return ret; } }2) Database interface methods to load and store the dynamic object data from/into database: //################################## //### Converter for Efforts data public async Task<>> GetDynEfforts() { List dynList = new List(); try { //### Get DB data var efforts = await this.Efforts.ToListAsync(); var tasks = await this.PTask.ToListAsync(); var roles = await this.Roles.ToListAsync(); int ix = 1; double myEff = 0.0; string tName = ""; if (efforts.Count == 0) return null; //### Create dynamic object dynList = Enumerable.Range(1, tasks.Count).Select((iy) => { ix = 1; tName = tasks.Where(t => t.Id == iy).FirstOrDefault().NAME; EffortItem dynEff = new EffortItem(); dynEff.Add("tID", iy); dynEff.Add("Task", tName); foreach (Role pRole in roles) { myEff = efforts.First(e => e.PTask == iy && e.Role == ix).eHrs; dynEff.Add(pRole.NAME, (double) myEff); ix++; } return dynEff; }).Cast().ToList(); return dynList;<> } catch (Exception args) { MessagingCenter.Send(new AlertContent("Get Data Error", args.Message + "/" + args.InnerException, "fas fa-exclamation-triangle"), "AlertNotification"); return null; } } public async Task SetDynEfforts(EffortItem updEfforts) { //### Get DB data Efforts myEffort = null; var roles = Roles.ToList(); double myEff = 0; int tID; //### Update db data from dynamic object try { tID = (int)updEfforts.Get("tID"); foreach (Role pRole in roles) { var ok = double.TryParse(updEfforts.Get(pRole.NAME).ToString(), out myEff); if (!ok) myEff = 0; myEffort = Efforts.Where(e => (e.PTask == tID && e.Role == pRole.Id)).FirstOrDefault(); if (myEffort != null) { myEffort.eHrs = myEff; this.Efforts.Update(myEffort); } else { myEffort = new Efforts { PTask = tID, Role = pRole.Id, eHrs = myEff }; this.Efforts.Add(myEffort); } } await this.SaveChangesAsync(); return true; } catch { return false; } }3) the Razor page to dynamically show the table in 2 dynamic dimensions and CRUD handling events:@if (dynList == null){Loading...}else{ @foreach (var colName in dynList[0].GetDynamicMemberNames()) { @switch (colName) { case "Task": break; case "tID": break; default: break; } }

}@code { List dynList { get; set; } = null; dynamic propEff = new ExpandoObject(); List tasks; List roles; private List ToolbarItems = new List() { "Edit", "Update", "Cancel" }; protected override async Task OnInitializedAsync() { tasks = await db.PTask.ToListAsync(); roles = await db.Roles.ToListAsync(); int ix = 1; string tName = ""; string rName = ""; //### Get DB values into table object dynList = await db.GetDynEfforts(); //### Create dummy entries if db is empty if (dynList == null) { //### Create new dynamic object dynList = new List(); dynList = Enumerable.Range(1, tasks.Count).Select((iy) => { ix = 1; tName = tasks.Where(t => t.Id == iy).FirstOrDefault().NAME; EffortItem dynEff = new EffortItem(); dynEff.Add("tID", iy); dynEff.Add("Task", tName); foreach (Role pRole in roles) { dynEff.Add(pRole.NAME, (double)0.0); ix++; } return dynEff; }).Cast().ToList(); //### Save to db as initial setup foreach (EffortItem dynEff in dynList) db.SetDynEfforts(dynEff); } } public async void EffortsActionHandler(ActionEventArgs args) { if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save) { //if (!db.SetDynEfforts(args.Data).Result) throw new InvalidOperationException("Error during DB save operation"); var ret = db.SetDynEfforts(args.Data); } }