Hey guys, I am Venkat and this is part 28 of web development with Blazor video series. In
this video we'll discuss everything you need to know about cells in Blazor data grid.
Take a look at the data that we have in this Employees database table,
especially look at this row with EmployeeId 2, in the FirstName and LastName columns we have some
html and then in the application, I included this new component DataGridCells.razor, within
this component we have this Syncfusion data grid which is binding to the Employees database table,
and if we take a look at this component in the browser, notice we have the html displayed
as is, so here's the important point to keep in mind, if you have html tags in the data the
data grid is binding to, then by default data grid displays that html as is, if you want the html to
be processed instead of displaying as it is then set DisableHtmlEncode = false on the respective
, the default value is true, on this FirstName let's set HtmlEncodeDisable
property to false, and on the LastName column to true, remember the default value is anyway true,
notice the first row in the data grid, Sam's first name is bolded and underlined, this means the html
in this column is processed whereas the html in the last name column is displayed as is, now
here's what we want to be able to do, apply styles dynamically to data grid cells at runtime based on
a specific cell value, for example if the employee first name starts with letter "G", then change the
cell background color to green, if it starts with letter "R" then change the cell background color
to red, if it starts with any other letter other than "G" or "R" then change the cell background
color to yellow, we can very easily achieve this using QueryCellInfo event of the data grid, so
first let's handle the event, for that we include component and the type of value our
grid is working with is Employee, and the event that we want to handle is QueryCellInfo and let's
call the even handler QueryCellInfoHandler, notice when I hover the mouse over this event, we can see
the event handler receives a parameter of type QueryCellInfoEventArgs, notice the name of the
event is QueryCellInfo and the event argument name is QueryCellInfoEventArgs, the only difference is,
in the argument we have EventArgs word appended, so our obvious next step is to create this even
handler method, let's do that in the code block after this OnInitialized() method,
private void the name of the handler, and we know this event handler receives a parameter of type
QueryCellInfoEventArgs, our grid is working with Employee data, let's call the parameter
args, in the interest of time let me paste the implementation code here, this is straight forward
csharp code, first we are checking if the field that we are dealing with is FirstName, and this
is important because this event QueryCellInfo is raised for every cell in the data grid,
and we want to process this code only if the field that is being rendered is FirstName, hence
this first if check here, and then we are checking if the employee first name starts with letter g,
if it does then change the background color to green and font color to white,
if it starts with letter r then change the background color to red and again font color
to white, if it starts with any other letter then change the background color to yellow,
there we go we have the output as expected, at the moment we are applying styles to a cell,
but what if I want to apply styles to the entire row, again we want to do that dynamically at
runtime based on a specific column value, well same idea the only difference is we handle
a different event, to apply styles to a cell we handle QueryCellInfo event, similarly
to apply styles to a row we handle RowDataBound event, QueryCellInfo event is triggered for every
cell in the data grid, RowDataBound on the other hand is triggered for every row in the data grid,
for QueryCellInfo event the event payload is QueryCellInfoEventArgs, that is
the even handler method receives a parameter of type QueryCellInfoEventArgs, along the same
lines RowDataBound even handler receives a parameter of type RowDataBoundEventArgs,
so in the data grid instead of handling QueryCellInfo event, let's handle RowDataBound,
and let's call the event handler RowBound, our obvious next step is to modify the event handler
method which we have at the bottom right here, first we want to change the name of the event
handler to RowBound to keep it meaningful and we know RowDataBound event receives a parameter
of type RowDataBoundEventArgs, we don't need this if check here, basically this is checking
if the cell that is being rendered is first name, remember RowDataBound event is triggered for every
row and not for every cell, so we don't need this if check anymore, and then we want to apply styles
to the entire row not to individual cell, so args.Row.AddStyle, let's do that here and here
as well, there we go, we now have styles applied to the entire row instead of individual cells,
now instead of applying inline styles we can also apply css classes, we have three classes here
GreenClass, RedClass and YellowClass, and then in the RowDataBound event handler instead of using
AddStyle() method we use AddClass() and the parameter to this method is a string array which
means we can specify more than one css class, so we are dynamically applying Green, Red or Yellow
class depending on whether the employee first name starts with letter G, R or some other letter,
and if we take a look at the browser we have the styles applied the same way as before. Now,
take a look at this that is bound to FirstName field, I've changed the HeaderText
to "Employee First Name" and this is a bit longer, if we take a look at the Employees database table,
again for this row I've changed the FirstName to "Pragim Technologies" which is obviously
a bit longer than these other first names, so if we take a look at this grid in the browser,
notice we're not able to see both the header text and first name value, basically the width
of the column is not enough to display the full value, so what we want to do is turn on text wrap,
so for that on the data grid we have this property AllowTextWrap, let's set that to true.
Notice, both the header and column content are wrapped as expected, but what if I only want to
wrap column content but not the header or vice versa? Well, for that we set WrapMode and to
set the wrap mode we use a different component and that is component,
on this we have WrapMode and wrap mode can be - Both, Content or Header,
the default is Both which means both the column header and the content are wrapped,
if you want only the column content to be wrapped then select Content.
Notice, now only the column content is wrapped and not the header, we can also show and hide
data grid lines, obviously we use GridLines property, the value for this property is
GridLine enum and it has five options - Default, from the name you might have already guessed,
this is the default option if we do not explicitly specify GridLines property on the data grid,
this option displays data grid lines based on the selected theme, Both - displays both the
horizontal and vertical data grid lines, None - no data grid lines, Horizontal, only horizontal
lines, Vertical, you guessed it, only vertical. At the moment as you can see on this data grid we
have set GridLines to Both, so in the browser we can see both horizontal and vertical grid lines,
at the moment notice we are not able to fully see this Employee First Name column header and the
content that we have in this first row, one option to fix this is to turn on allow text trap which
obviously wraps the content, the other option is to use data grid ClipMode, so on the data grid
let's set ClipMode property, the value for this is ClipMode enum, so the first option here - Clip,
truncates the cell content when it overflows, the second option displays an ellipsis and the
third option, as the name implies displays an ellipsis with a tooltip, notice both in
the header and the column itself we have an ellipses displayed and when I have the mouse over
we see the complete content as a tooltip. That's it in this video. Thank you for listening.