Hey guys, I am Venkat and this is part 8 of web development with blazer. In this video
we'll discuss how to perform paging in Blazor DataGrid. Let's quickly take a tour of what we
want to implement in this video. Take a look at the bottom of the grid here, we have 34 rows in
total and we are looking at the first page of seven available pages. We see five rows on the
page here, why? Well, because that's what we have selected from the drop down list right here. If I
change this to 10, we see 10 rows. If i select five, we see the five rows again. In the pager
at the bottom here, we're displaying three pages one, two and three. If I want to see
the next set of three pages, I click on these three dots. At the moment, we are displaying
three pages, can i change this to five pages? Absolutely, datagrid is highly customizable.
The support for paging is provided out of the box by Syncfusion DataGrid component. It's very
powerful and offers several features like adaptive UI, touch support, globalization and localization,
export to excel, pdf and csv, sorting, paging, filtering, grouping, supports all the CRUD
operations, aggregated column values and many more. You'll be amazed by the power
and functionality the datagrid component brings to your blazer app. Saves so much of our development
time and effort. It's very easy to integrate, configure and use. Another good news is Syncfusion
components are free, if you are an individual or a company and meet the following two conditions.
Less than one million US dollars in annual gross revenue and five or fewer developers. The
following is the link to claim the free community license which is what I am using as well. Now,
we discussed how to add and configure Syncfusion data grid component in part 4 of this video
series. I'll include the link both to the video and the playlist in the description box below
this video. Let's quickly go over the steps. Step 1 - Install Syncfusion.Blazor.Grid" nuget package.
Step 2 - For styling reference, Syncfusion bootstrap theme file in index.html file. In
a Blazor Webassembly project, you will find index.html file in "wwwroot" folder. Step
3 - In "imports.razor" file, include these two "using" declarations. Step 4 - Register Syncfusion
Blazor services, we do this in the "Main()" method in "program.cs" file. At this point,
you can use Syncfusion datagrid component on any of your Blazor application pages.
Now, this is the same project that we've been working with throughout this video series.
Notice, at the moment, on this index.razor page, we are already using Syncfusion datagrid component
and it is being bound to this "Employees" property which obviously provides employee data and
this Employees property is being initialized in this OnInitialized() async method. Notice,
here we are calling our employee REST API service, retrieving data and using it to populate this
"Employees" property. Take a look at this line on line number 37, Task.Delay(), we introduced this
line in our previous video to demonstrate Blazor spinner component. Now, we don't want to wait
three seconds every time we load this index.razor page, so in the interest of time, let's keep this
line commented. Now, to enable paging all we need to do is simply set this property
"AllowPaging" to "true". So, on the Syncfusion DataGrid component, set "AllowPaging=true".
At the moment in our "Employees" database table, we only have four rows and we see those four rows
as expected. Notice, at the bottom of the grid we have the pager, 1 of 1 pages with 4 items. Now,
let's insert a few more rows into this "Employees" table and I have the sql script ready for that.
I'll have the script available on my blog and include the link to it in the description box
below this video. Now, if you want to insert 20 rows, specify that number right here and execute
the script. Let's actually insert 30 rows, so change the number to 30 and execute the script.
Reload the web page, there we go, take a look at the pager at the bottom. We now have 34
items. We are looking at 1 of 3 pages, on the first page we have employee ids from 1 to 12,
on the second page, 13 to 24 and the rest on the third page. At the moment,
you might be thinking can I change the number of rows that are displayed on each page?
Absolutely, we can. At the moment, by default the data grid displays 12 rows. Let's change this
to 5 and for that all we need to do is, set this "PageSize" property of "GridPageSettings".
So inside this data grid, just like "GridColumns" we include "GridPageSettings"
and on this we set "PageSize" property
to whatever number we want, in our case we want to set it to 5.
There we go, 5 rows on each page. We still have the same number of total rows, that is
34, but now they are distributed across seven pages. At the moment, we have seven
pages in total and all those seven pages are displayed in the pager at the bottom here.
Can we control how many number of pages are displayed here? Well, absolutely,
for that we use "PageCount" property. So, just like "PageSize" on this "GridPageSettings",
we use "PageCount". Another quick tip here, notice from the intellisense,
we can see the data type of this property, it is integer which means we can set it to a number,
the number of pages that we want to display in the pager. Let's set it to three for example.
There we go, just the three pages as expected and we also have these three dots, upon clicking them,
we see the next three pages, upon clicking on the three dots again, we see the last one page.
At the moment, we have hard-coded the "PageSize" to "5", this means on every page of the grid five
rows are displayed. What if another user wants to see 10 rows and another 15 rows? Everytime,
we want to change the page size we don't want to change our code, that's not a good idea,
instead, can we display a dropdownlist with some values like 5, 10, 15 etc and then
the end user can pick the number of rows that they want to see
on each page of the grid? Absolutely, and for that as you might have already guessed, we set
another property and that property is "PageSizes" plural and we set it to a value of "true"
There we go, we now have a dropdownlist with different sizes. By default, five rows are
displayed, why? Well, that's because we have set the "PageSize" property to "5", but then,
the end user can pick and choose the number of rows they want to see. For example, if I select
10, we see 10 rows, if I select "all", we see all the 34 rows. Now, in this dropdownlist we can see
different sizes, can we change these numbers? Absolutely, now instead of 5, 10, 12 and 20,
let's display 5, 10, 15 and 20. For that, in our page, in the "code" block, let's include a
string array, let me use the "prop" code snippet for that. So the data type is "string" array
and let's call this property "pagerDropDown" and initialize it to a new string array.
and the values that we want are all,
5, 10, 15 and finally 20. All that is left to do is, use this property as the value
for "PageSizes" property. Notice from the intellisense, this property data type is "object"
meaning we can set it to any value, for example a boolean value like "true" or this string array
property which contains different page sizes. So, let's specify this as the value now, so we use the
symbol @ and then our property name. Notice, in the dropdown we now see our custom sizes
Now, let's understand where paging is happening, is it happening on the client side in the browser
or on the server? Well, in our example, in this case paging is happening on the client side. Let's
actually prove this. Now, we want asp.net core to log the sql commands that are sent to the database
and for that, we need to include a setting in our application configuration file "appsettings.json".
So, within the "logging" section right here, we want to tell asp.net core to log microsoft
entity framework core database commands. So with this change in place, let's run our app again.
On the web page we see the data the same way as before. If we take a look at the
"output" window in visual studio, by the way if you don't see this output window,
click on "View" and then "Output", and then in the dropdownlist right here,
select our asp.net core web server and here we can see the SQL statement that is
issued to the database. So, let's copy this and execute it from SQL Server Management Studio.
If we take a look at the "messages" tab, notice all the 34 rows from the "Employees" table
are retrieved. Now, the point that i'm trying to prove is, though our web page is displaying only
five rows, it's still retrieving all the rows from the database table. Now, let's see what's going to
happen when we go to page two, but before that let's delete the log that we already have here,
and for that, click this button "clear all" and then let's go to page 2. If we take a look at
the web server log in visual studio, notice no additional queries are issued to the database.
Now, let's go to page 3 and then maybe to page 6 and still no additional queries are issued to the
database. So, the point that I'm trying to prove is, paging is happening on the client side in
the browser. This is called "client-side paging" and it works fine if the number of rows are less,
maybe a few hundred or even a thousand, but if you have millions of rows, server-side paging
also called on-demand paging provides better performance over client-side paging. We'll discuss
implementing server-side paging in a later video. That's it in this video. Thank you for listening.