how to best set cell css class based on the bound object value

Question

Hello,What would be the best way to set cell[0] for each row in a SfGrid (blazor) based on the value of one of the object's properties?I have attached a screenshot of what it looks like in an Avalonia based software that I am porting to blazor.It set's the padding of the first cell of each row based on it's depth as a child of the previous objects in a ordered List that preserves parent, children relationships on 4 levels.It simulates a tree component in the first column to get an understanding on the relationships. Based on your example on Template context that I have quoted below, I figure I could use this to wrap the Account.Name property which is bound to col[0] in a span and set it's css class that way to have various padding-left values for each level but not being very experience with the SfGrid component, I want to make sure I get advice on what is the preferred or recommended way to do this. Attachment: Screen_Shot_20230821_at_2.39.15_AM.png_93a4bdb8.zip

liamcannon · Answer

The people at syncfusion might have a better solution for this than I do, but I used QueryCellInfo inside of Grid Events.

and then I had a function

private void temp(QueryCellInfoEventArgs args) {

if (args.Column.Field == "columName") {

args.Cell.AddClass(new string[] { "className});
}
}

DataGrid customization in Blazor DataGrid Component | Syncfusion

DataGrid customization in Blazor DataGrid Component | Syncfusion

Alain · Answer

Your solution is elegant but I'm a bit worried where the documentation says QueryCellInfoEvent gets triggered with every request when we try to access a cell's content.I'm worried about how this may be more resource intensive in the end on larger datasets if the event is triggered every time we scroll etc than for example what I played around with to test which works as well.Have you noticed how often your handler runs in a real world app? I used inline rather than classes and didn't optimize it as it's just a dry run but would be interested in someone from syncfusion or an experienced sfgrid dev's input on both implementations.Seems like your's might be better when used with pagination.

Prathap Senthil · Answer

Hi Alain,

Query:” how to best set cell css class based on the bound object value”

We would like to clarify that the Querycellinfo event triggers every time a
request is made to access cell information, elements, or data, and also before
the cell element is appended to the DataGrid element. So, we suggest that you
use the RowDataBound event to access each row and traverse to the first cell
from that tr element. The RowDataBound event triggers every time a request is
made to access a row, and it triggers before the row element is appended to the
DataGrid element. The RowDataBound event is raised for each row in the DataGrid
and is called sequentially in the order of the rows in the data source.
Already, we have documented this topic. Please refer to the below documentation
for your reference.

https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound
https://blazor.syncfusion.com/documentation/datagrid/cell#customize-cell-styles
When dealing with large datasets for use in the DataGrid, we suggest you use
the virtual scrolling feature or paging feature in the Grid component. virtual
scrolling It is nothing but loading data on-demand while scrolling instead of
loading the entire large data set. For detailed information, please refer to
the following links:

https://blazor.syncfusion.com/documentation/datagrid/virtualization#row-virtualization
https://blazor.syncfusion.com/documentation/datagrid/virtualization#limitations-for-virtualization
https://blazor.syncfusion.com/documentation/datagrid/pagingRegards,
Prathap S