Hey guys, I am Venkat and this is part 26 of web development with Blazor video series. In
this video we'll discuss data grid templates in asp.net core Blazor. Templates give you a great
control over the rendered html. Syncfusion Blazor data grid is highly customizable,
it's a templated component which means we can customize various parts of the data grid
UI to render custom components or content based on application requirements and our own logic.
The following are the different types of data grid templates - column template, header template,
row template and detail template. Now, here is what we want to be able to do, display employee
image in one of the data grid columns as shown right here, if you want to follow along, I already
have all these images uploaded onto my blog and you can download them from there, I'll include
the link to my blog in the description box below this video. At the moment, in our Blazor client
project inside this wwwroot folder, we don't have images folder, so let's add a new folder,
name it images, we want to store all these employee images in the images folder in
wwwroot folder so we can serve them up to the Blazor component, so let's cut them from here
and then paste them in the images folder.
Now, here's the important bit, notice the names of the images,
we have numbers, the name of each employee image is their respective employee id as employee ids
are unique, you can use your own naming strategy but using employee id is better for two reasons,
employee ids are unique so even if there are two employees with the same name the possibility of
accidentally overwriting employee images is reduced, the code to display employee image
becomes much easier as employee id is part of employee entity and available in the data grid,
we'll see this code in just a bit, at the moment in Employees database table, this
photopath column is null, we want to update this to include each employee's photo path, and we know
employee photos are present in the images folder, so let's include a simple update statement,
update employees set photopath equals, we know all employee photos are present in the images
folder and to this we want to append employee id which we can retrieve from the EmployeeId column,
and to this we want to append the image extension, in our case it is .png, and if we execute this
query now, we get an error, and that's because it's trying to convert the string images
to integer, we actually want to do the opposite, we want to convert this EmployeeId integer column
to string, so for that let's use sql server Cast() function, you want to cast EmployeeId as a string
Execute the query, select the data again, there we go, photopath column updated as expected,
in the interest of time here's what I've done already in the background,
in the pages folder I included this new component DatagridTemplates.razor which is right here,
and in this component we have a Syncfusion data grid, and these are the grid columns that we are
displaying at the moment, Employee Id, FirstName, LastName, DateOfBirth etc, so if we take a look
at this page in the browser, we see the employee details as expected, and here's what we want to be
able to do, just before this id column we want to include photo column and then display each
employee photo, now this is the grid column that displays employee id, just before this column
we want another grid column, we have set header text to photo, center align and width to 120,
inside this grid column we want a column template and for that we use component,
inside this we can include any custom content we want based on our application requirements,
in our case we want to include an image element and render each employee image,
remember inside the data grid we have access to an implicit parameter called context,
and we can typecast that to Employee type, let's store this in a variable name it employee,
all that is left to do is include an image element and bind the src attribute to employee variable
dot photo path property, as a good practice let's also set the alternate text to employee photo,
close the image tag, save the changes and take a look at the browser, we have the employee photos
displayed but as you can see the photos are too big, so let's specify height and width for the
image element that we are rendering, just below the data grid let's include element,
type equals text css and we want to include a css class, let's name it thumbnail
let's set height to 80 pixels and width
also to 80 pixels and then we want to specify this as the css class for our image element
There we go we, have employee images displayed as expected,
at the moment each employee image is rendered as a square,
if you want a circle all we need to do is set this style, border-radius, let's set it to 40 pixels
There we go, we now have a circle instead of a square. At the moment what we are using here is
a column template, we use a column template to customize the content that we have in a specific
data grid column, but what if i want to customize the data grid header,
well we use , now here's what we want to be able to do,
next to the header text in gender column we want to display a custom image,
as usual first let's cut this image from here and paste it in the images folder.
Next, inside this gender grid column we want header template
Inside the header template, include a element, and then we want the text gender,
next to that we want to render an image element, set the src attribute to
images/gendericon.png, let's also set the image height and width using the style attribute,
as a best practice we can use a css class, I will leave that as an exercise for you,
so let's set height to 20 pixels and width also to 20 pixels, and then finally alt text.
We don't see the image, why is that? Well,
that's because we're using this character tilde (~) in the path, we don't need this
There we go, we now see our custom image displayed in the datagrid header.
In this video we discussed column and header templates, we use column template to customize
grid column cell content, and header template to customize grid column header cell content, in our
next video we'll discuss row and detail templates. That's it in this video, thank you for listening.