Hey guys, I am Venkat and this is part 24 of web development with Blazor video series.
In this video we'll discuss everything you need to know about Blazor data grid columns.
In the interest of time here's what I have done in the background. In the pages folder,
I've included this new component DatagridColumns which is right here, and this is pretty
straightforward component, we have a Syncfusion data grid here, and the data source for this grid
is Employees property which is right here, and it is this EmployeeService which calls our server
side REST API, retrieves data from a sql server database table and stores that in the Employees
property, if you're new to building REST APIs from scratch, we discussed them in detail in part 5
of this video series, this Employees property is then set as the data source for our data grid,
so if we take a look at this component in the browser, notice every column in the data
source is displayed employee first name, last name etc, notice this Department column here,
this is a complex property within our Employee class, and at the moment we cannot see
the full value of this column, and that's because the width of this column is not sufficient
to display the entire value, so what we want to do is turn on word wrap, and to do that
on a Syncfusion data grid all we need to do is set this property AllowTextwrap = true
Notice, both email and department column values are wrapped as expected, at the moment we have
not explicitly specified the list of columns that we want to display in this data grid,
so every column that we have in the data source is automatically bound and displayed in the data
grid, now here's what we want to do, we only want to display these four columns employee first name,
last name and email, for that we use these two components and ,
so first we include component plural and inside this we include ,
we need to tell this to which field we wanted to bind to in the underlying data
source, as you can see the data source for the grid is Employees which is of type List,
so the model class for this grid is Employee class, basically we have to tell this grid column
which field, that is which property we want it to bind to in this Employee class,
and for that we use Field property and then on the Employee class we have EmployeeId property
Notice, just the EmployeeId column is displayed as expected, at the moment we haven't explicitly
specified the header text that we want on this grid column, so by default it's using the column
header in the underlying data source, now, if you want to change it, you know the drill, we simply
use HeaderText property, we can also specify the width for this column, finally let's also specify
text alignment and the value for this property is TextAlign enum and let's left align the text.
There we go, notice the header text and text alignment, at the moment we really don't know if
this column width is 60 pixels, that's because we only have one column in this grid and it appears
as if it's spanning the entire width of the grid, so let's include another grid column, what
i'm actually going to do is include grid column without any properties even the field property,
no change, it appears as if we have only one column in this grid, we expected two columns to
be displayed, let's actually switch the order of these columns, I'm going to include this
grid column first and then the id grid column, now we see the id column on the extreme right,
that's because the width of this column is 60 pixels, so it's occupying just that width and the
rest of it is occupied by this empty grid column, because we have not specified a header text or the
field that we want this grid column to bind to, it is displaying an empty column in the grid,
now, let's delete this empty grid column and include few other columns, there we go, we see
the five grid columns that we have explicitly specified using these grid column components,
we can also dynamically build these grid column components in code, let me actually explain what
I mean with an example, first let's delete these grid columns, in this Employee class we have
several properties, we don't want to display all these properties in the data grid, we only want to
display selected set of properties, so for that let me introduce another property here, these
are the columns that we want to display in the data grid, employee id, first name, last name and
email, so inside this grid columns component let's use for each loop, we want to loop through every
property that we have in this Employee class, so for that let's create a variable prop in typeof
on this we have GetProperties() method which is going to return us all the properties of the
Employee class, as we are looping through each property we want to check if that property is
in this list - ColumnsToDisplay, if it is, then we want to dynamically build the
component, bind it to the property and display it in the component, so first let's check if
ColumnsToDisplay.Contains our loop variable is prop and on that we have Name property
if the property is present in the list, then build the grid column component,
specify the Field property and bind it to prop.Name
There we go, we only see the four columns that we have specified in this list, we can also
control which of these columns are editable, for that let me introduce another property,
only these two columns must be editable first name and last name, first let's enable editing on the
datagrid, for that we use component and set AllowEditing to true
At the moment when we put a row in edit mode notice
all the columns of the grid are editable and that's not what we want,
we want only these two columns to be editable - first name and last name, so for that,
on this grid column that we are dynamically building, let's set AllowEditing property to
EditableColumns.Contains whatever is the property name, so basically whatever is the property that
we are looping over, if that property is present in EditableColumns, then set AllowEditing to true,
now when we edit a row, notice only first name and last name columns are editable,
we can use the same approach to dynamically set any property of this component,
for example we want to mark this grid column as the primary key column if the property name
is EmployeeId, so we set IsPrimaryKey property,
and we want to set it as primary key only if the property name is EmployeeId
In the Employee class, Department is a complex property, what do you think is going to happen
if we bind this Department property to the data grid, let's take a look, in the interest of time
I've already made the required changes, these are the columns that we want to display in the grid
EmployeeId, first name, last name, date of birth and department, keep in mind department
is a complex property and if we take a look at this class, here's the fully qualified name
BlazorProject.Shared.Department, and if we take a look at the web page, we see the fully qualified
name instead of the department name, so basically to bind to a complex property in the data grid
we have a different syntax, so instead of using nameof keyword, we include double quotes
and then our complex property, in our case it is Department
dot the property that we want to bind to in the department class,
in our case we want to bind to DepartmentName property, so let's copy and paste it here.
Now, we see the department name as expected. That's it in this video. Thank you for listening.