Hey guys, I am venkat and this is part 13 of web development with blazor video series. In
this video we'll discuss grouping data. So, here is what we want to be able to do, at the moment,
on this page I have a data grid and in this grid we've got around 35 rows and notice,
above the data grid header we have a section here and this section is called "Column Drop Area". So,
this means we can drag and drop any of these grid header columns into this drop area and
when we do that, these data rows will be grouped by that specific column. Let's say for example,
we want to group these rows by "Gender" column, so what I can do is hold down the ctrl key,
drag and drop "Gender" column into this drop area and notice when I did that we have the data
grouped by "Gender" column. So, we have gender male 11 employees in this category and I can
even collapse this category if I want and then we have gender female 12 employees. Similarly,
gender other 12 employees.We have a very good high level summary. So, let's see how to implement this
grouping. Now, this is the same project we've been working with throughout this video series. In the
interest of time I've made a few changes. I have introduced a new endpoint "/api/employees/all".
So when we navigate to this endpoint, it's going to retrieve all the employees that we have
in this Employees table. Notice, at the moment in this table we've got 34 rows and this new
endpoint "api/employee/all" returns all those 34 employees that we have in the Employees table. So,
let me quickly walk you through the changes that I have made to introduce this new endpoint.
In the EmployeesController I introduced this new method GetAllEmployees(). To get to this method
we issue a GET request and I also included an extension to the route that we already have
at the controller level. So if we navigate to "api/employees", the name of the controller slash
all, then this method is called and if you look at what this method is doing, it is simply calling
GetAllEmployees() method of EmployeeRepository and I have the interface and the implementation class
both open here and if you look at the interface the method signature is pretty straightforward,
it doesn't take any parameters and returns an IEnumerable objects and the
implementation is also straightforward, all it's doing is on the appdbcontext instance it's
calling Employees, converting that to a list and returning it to the caller. So when we navigate
to this uri "api/employees/all", this method is called and it returns the list of all employees.
Now, if you're new to REST APIs, we discuss them in this Blazor web assembly tutorial. So in part 5
of this video series we discussed how to build a REST API using .NET 5 from
scratch. So if you're new please check out this video. I'll include the link to the course page
in the description box below this video. Now, behind the scenes I've
made another small change as well, so if we navigate to our root application url /all
notice we have a data grid here and it displays the list of 34 employees that we have in our
"Employees" table. So what it's doing is calling our server side REST API endpoint
"api/employees/all", retrieving the list and displaying that list right here and to make this
happen what I have done is introduced this new razor component "AllEmployees.razor" and I placed
it in the "pages" folder within our client project and notice the page directive right here, so the
page directive is "/all" meaning if we navigate to our root application url slash all then render
this component and within this component we have the Syncfusion data grid here and these are the
columns that we want to display within the grid, EmployeeId, FirstName, LastName etc and the data
source for this grid is "Employees" property and where is this Employees property present? Well,
it's present in the code block right here. The data type is List. Obviously to this
property somebody has to provide the employee data and that somebody is our client-side
employee service and if you're wondering where is this client-side service present? Well,
it's present in the services folder, notice we have both the interface and the implementation
class and I have both of them already open. Here is the interface, look at the method declaration,
pretty straightforward, no parameters and it returns IEnumerable objects and the
implementation is also pretty straightforward, all it does is call the endpoint "api/employee/all".
We know this endpoint returns the list of all 34 employees and all this method is doing is
returning that list to our grid. Our grid is then rendering the data, that's how we are able to see
the complete list when we navigate to this uri, our application root url slash all.
At the moment, on this datagrid grouping is not enabled. To enable grouping
all we need to do is set the boolean property AllowGrouping equals true. Before we do that,
take a look at the data grid here, above the data grid header we don't have any column drop area.
Now let's set AllowGrouping equals true and see what's going to happen.
Notice we now have column drop area, this means the data in this grid can now be grouped by
any of these columns. Let's group the data by gender column. Notice, the moment I drag and
drop the column header, we have the data grouped by gender, so male employees we have 14, female
10. We can further group this data by any of these other columns, for example let's group it further
by date of birth, notice male employees we have 14 an employee with this date of birth we have one
and that employee is right here. We can group it further maybe by first name. Notice, we can also
expand and collapse these groups if we want to. By default we can group the data in the datagrid by
any of these columns, but what if I don't want to allow grouping by a specific column. For example,
let's say we don't want to allow the users to be able to group the data by "Email" column. Well,
in that case on the respective grid column simply set AllowGrouping equals false.
Now if I try to group by gender column, the grouping is allowed but notice what happens
when I try to drag and drop Employee column, notice I'm not able to drop employee column
into the column drop area, that's because we have disabled grouping on that specific column.
Now, here's one quick tip for you, Syncfusion grid component follows a naming convention pattern that
makes it easier for us to remember things like which component to use for what. If you recollect
in our previous videos in this series, we discussed data grid paging and sorting. To
customize page settings, we used GridPageSettings component. Similarly, to customize sort settings,
we used GridSortSettings component, there you go, you clearly see a naming pattern here. So,
you may have guessed already by now, to customize grid group settings we use a component called
GridGroupSettings. Now, let's customize this grid grouping behavior a bit.
Notice at the moment the data in the grid is grouped by gender column and if you take a look
at the list of columns that are displayed here in the grid, we don't have the gender column
in this list. Now let's try to group again by date of birth and see what's going to happen,
notice we don't have the date of birth column in the grid anymore, but that makes sense because the
grouped column values are displayed right here, so with male as gender we have 14 employees,
so male gender and this date of birth we have one employee, so it makes sense not to display
these grouped columns in the grid, but let's say for some reason you want those two columns also
to be displayed in the grid right here. So, this means we want to customize our grouping behavior
and to do that inside the grid we use a component called GridGroupSettings and then set this boolean
property ShowGroupedColumn to true. Now, when we group data by gender column for example,
notice we still have that gender column in the data grid. Similarly, if I further group the data
by date of birth, we still have that column here and we also have nice visual clue here, notice
first the data is grouped by gender and then by date of birth and then to ungroup the data,
we have two options. One option is to simply drag the column off the drop area, notice now
the data is ungrouped and the other option is to click this little x, notice the tooltip,
ungroup by this column and this button here, the little cross, it is called ungroup button.
Now let's say for some reason you don't want to show that ungroup button and again the idea is
very simple, on this GridGroupSettings component we have ShowUngroupButton,
simply set it to false, along the same lines we have another boolean property, ShowToggleButton,
basically this button allows us to group and ungroup data, so let's set this to true.
Notice, now next to the column header text we have this button, this is the toggle button,
when I click on this button notice the data is grouped by gender column and when I click on
date of birth same thing happens and if we want to ungroup we click on the same button again,
the data is ungrouped now and also notice we don't have that little x, the ungroup button, why? We
have set its visibility to false. Now take a look at the data that we have in this Employees table,
especially the first five rows, what I've done is changed the date of birth of all these five
employees to be the same date but the time is slightly different. Now what I want to do is,
group the data we have in the grid by date of birth column and if we take a look at for example
employee id 1, notice his date of birth, so we have only one employee with this date of birth,
why? because the time is different, but notice, again the date is the same but time is different,
now what I want to do is group all these employees by the date, you know I want to discard the time
part of it and to achieve that it's very easy, all we have to do is on the respective column,
so it's the date of birth column in the grid, we use the format string, so let's set
format to small d, that is we only want to display the date part not the time part,
notice the date of birth column, we don't have the time part, we only have the date part
and now if we group the data by date of birth and if we scroll all the way down,
notice all those five employees, that same date of birth are now grouped together,
the time part is ignored. Now, let's say for some reason you don't want to group by the format
string, you want to disable that feature, again the idea is same, we have another boolean property
EnableGroupByFormat, so basically it's asking us if we want to enable grouping by the format
string, in this case the date format string small d, let's say for example we don't want to do that,
we simply set this property to false. Notice, now same as before the date of birth column in the
grid is displayed without the time part but when I try to group by that column, in the grouping the
time part is considered, why? because we disabled grouping by the format string and then if we take
a look at those five employees, notice the time part is considered while grouping the employees.
So here is the key point to keep in mind, for numeric and datetime columns to enable
or disable grouping by the format string use EnableGroupByFormat boolean property. At the
moment data is grouped by gender column and take a look at the group caption here, first we have
the name of the column, Gender column, value Male and then the total count of employees 14,
and look at the text here it says items and iIdon't like that, to keep it meaningful I want
to change it to Employees, okay, so basically we want to customize the group caption and for that
we use something called CaptionTemplate. Inside this GridGroupSettings component we use another
component called, CaptionTemplate. In the interest of time, let me paste these two lines of code,
first we are retrieving the caption template context and storing it in this variable and this
is the line that is building the group caption dynamically. The "Field" property returns us the
name of the column by which we are grouping data, for example Gender column, Key property returns as
the column value Male or female for example and count gives us the total number of items we have
in that group and then next to count we want to display this literal text "Employees".
Now if we group the data by Gender column for example we have the custom group caption as
expected. We can also create an initial grouping, for example when the page first loads we want the
data in the grid to be grouped by let's say for example Gender and FirstName columns,
for that we create a string array variable and in the array we include the list of columns
by which we want the data to be grouped, in this case Gender first and then FirstName and then we
specify this as the value for "Columns" property on GridGroupSettings component.
There we go, data pre-grouped first by Gender and then by FirstName. Now I can further group this
data if I want to by any of these columns simply by dragging and dropping that column in the column
drop area, I can also ungroup by clicking on the toggle button. Now, let's say for some reason you
don't want to allow users to be able to group and ungroup data after the initial group is displayed,
for that we can simply hide the column drop area and to hide the column drop area
we set ShowDropArea boolean property to false. As expected, data is pre-grouped first by Gender and
FirstName but notice, since we don't have the column drop area there is no way through the UI
I can ungroup or further group this data. That's it in this video. Thank you for listening.