Hey guys, I am Venkat and this is part 27 of web development with Blazor video series. Syncfusion
Blazor data grid provides four different templates to customize various parts of the data grid. We
discussed column and header templates in our previous video that is part 26, in this video
we'll discuss row and detail templates, in the interest of time here's what I've done already
in the background, in the pages folder I added this new component DataGridTemplates2.razor,
and in this component we have a Syncfusion data grid, and the data source for this
grid is Employees property which is right here, and it is this EmployeeService that
calls our server-side REST API, retrieves database data and populates this property,
and these are the list of columns that we're displaying in the grid at the moment, EmployeeId,
FirstName, LastName, DateOfBirth etc, so if we take a look at this page in the web browser we see
the list of all employees as expected, now here's what we want to be able to do, display employee
photo along with their details like first name, last name, gender etc, this can be very easily
achieved using component, first let's change the width of the grid to 455 pixels,
and we want to be able to use row template, here's the important bit to keep in mind,
must always be nested inside component, so first we use , and
then inside this we use , inside this we can include any custom content that we want,
in our case we're going to write some c sharp code as well, so let's include razor code block,
remember inside the data grid template we have access to an implicit parameter called context
which we can type guest to Employee type, and then let's store it in a variable name, it Employee
Now, here's the important bit to keep in mind, in the data grid we want only one datagrid column,
and the column header text is Pragim Technologies Employee List, so here we have list of employees
along with the photo and details, so the point is in the grid we want only one grid column,
so for that what I'm going to do is leave one here and delete the rest of them,
change width to 450, let's change header text as well, and we don't need these two properties here,
instead we want to set TextAlign property to center, now here is the most important
bit to keep in mind, the content that we want to render inside this
must be in elements, and the number of elements that we can have in a must
match with the number of that we have, at the moment we have only one ,
this means inside this we can have only one element, inside this we can include
any custom content that we want to render, in our case we want an html table, set width and cell
padding properties, inside this let's include table body, and then two elements,
now if we take a look at the output we want, in the first we want employee photo,
and for that in the first here let's include an element and then set the source
to @employee.PhotoPath, if you're wondering what is this employee? well this is the local
variable that we have created right here, and if we take a look at the employees database table,
notice we have the employee PhotoPath in this database column, and if you're wondering where
are these photos present? well they are present within our application in the images folder
inside wwwroot folder, so as a good practice let's also set alt attribute to Employee Photo,
now if we take another look at the output we want, in the first here we want to
display employee photo and in the second we want another table to display employee details
like first name, last name, gender etc, so in the second let me paste the html for a table,
we are using two bootstrap classes for styling - table,
table-borderless, we have a with two tds, in the first here we want to display the label
First Name, and then the value for first name, and to get the value of employee first name,
we use the employee variable dot first name, similarly last name, gender and
date of birth, here is the html for that, let's save our changes and take a look at the browser,
notice the output is not how we want it to be and that's because the employee images are too big
to fit in the data grid, and obviously to fix this we need to include a few styles, we need
to set height, width and border radius for this element, so let's include a css class here.
So, basically we are setting the width and height to 150 pixels and border radius to 75 pixels,
and let's use this css class, on our image element class equals image thumbnail,
there we go, it's much better now, we want to include two more styles, first of all we
want to center align the employee content and then include a border between each employee so there is
a clear separation, so for that on this top level element let's include the style attribute
and set border bottom and text align attributes,
there we go, we now have a nice border separating each employee, next DataGrid ,
this component is very useful when you have lots and lots of row data that you want to present,
so here is what we want to be able to do, when we initially render the grid we want to
render all the rows of the grid in a collapsed state, notice we have a visual indicator here,
when I expand the row that's when we display the rest of the details about the employee,
in this case we are displaying employee photo along with the other details like first name,
last name etc, so let's see how easy it is to achieve this using data grid ,
first in the section, we specify the list of columns that we want to render
in collapsed state, in our case we want to render these four columns - EmployeeId, First name,
Last name, and Date of birth, and then replace this with , just
like , even the must be nested inside this component,
now the rows are rendered in a collapsed state, and when we expand we see the rest of the details,
notice at the bottom here we have a border which doesn't look that great, and to remove this,
you know the drill, on this element we simply want to get rid of this border bottom style,
now if you want you can have all the detail rows expanded on the initial data grid load,
for that all we need to do is handle the data grid DataBound event,
so inside this grid, let's include t value is employee and the even that we want
to handle is DataBound, let's call the event handler DataBoundHandler, our obvious next
step is to create this handler method, let's do that in the code block, public async void
in here all we need to do is, on the data grid call ExpandAllDetailRowsAsync() method, to be
able to do that we need a reference to the data grid, so let's create a property for that first,
SfGrid, and let's call the property EmployeeGrid, and then on the data grid itself
include @ref
and finally in the even handler method on the employee grid call ExpandAllDetailRowsAsync()
method, this is an async method so let's await, notice now on the initial page load we have all
the detail rows expanded, next here is what we want to be able to do, at the top of the grid
include this toggle button, if all the detail rows in the data grid are already expanded,
clicking on the button should collapse them, if they're already collapsed expand them,
so basically we want to be able to control the expanded and collapsed state of all the detail
rows by clicking this button that is external to the data grid, first bring in Syncfusion
buttons namespace, include a element, set padding bottom to 5 pixels, inside this
let's include a Syncfusion button and the tag for that is , we don't want to hard code
the content on the button, instead we want to bind it to this property ToggleButtonContent, we don't
have this property yet, we'll create it in just a bit, let's also wire up the on click even handler,
and let's call the even handler ToggleButtonClick, again we don't have this even handler method
either, so let's create both the property and the event handler method in the code block
First, the property, the data type is string, and the name of the property is ToggleButtonContent
and let's initialize this property to - "Expand all detail rows", next the click event handler
method, public async void ToggleButtonClick, when the button is clicked we want to do two things,
first check if the content on the button starts with expand, if it does then we want to expand all
detail rows, so we call the respective method on the data grid, and then change the content
on the button, if it doesn't start with expand do the opposite, collapse the detail rows and change
the content of the button to expand all detailed rows, now if you remember when we initially load
this data grid, we already have all the detailed rows expanded, so let's change the initial content
on the button to - "Collapse all detail rows", save our changes and take a look at the browser,
notice on the initial page load, all the detail rows are expanded, the text on the button is
collapse all detail rows, and as we click the button, the rows expand and collapse as expected,
the text on the button also toggles, that's it in this video, thank you for listening.