Hey guys, I am venkat and this is part 14 of web development with blazor video series. In this
video we'll discuss how to filter data. So here is what we want to be able to do. At the moment, both
filtering and paging are enabled for this grid. Notice, at the moment we've got 34 employees and
they're spread across seven pages in this grid and notice just below the data grid header,
for every column we have a text box using which we can filter these rows. For example, if we want to
display only male employees, in this text box we type "Male" and then press the enter key. Notice,
now only male employees are displayed, you can see a visual clue as well here, Gender : Male,
so basically all the records that are displayed in this grid are male employees and we have 14
employees in total and they're spread across three pages. Now, if we want Female employees,
same idea, we type female, press the enter key, now we have all female employees. So let's see
how to implement this. This is the same project we've been working with so far in this video
series. What i've done behind the scenes is, cleaned up this page a bit so it's easier on the
eyes. What we have here is a Syncfusion data grid and the data source for this grid is "Employees"
property which we have right here and we have this client-side EmployeeService which is calling our
server-side REST API, retrieving the employee's data from the database and storing the data
in this "Employees" list variable which obviously our data grid is binding to and
these are the columns that we are displaying in the grid, employee FirstName, LastName etc. Now,
remember to enable paging all we need to do is set this property to true AllowPaging="true".
Along the same lines to enable filtering we have another boolean property AllowFiltering = "true".
There we go, for this data grid both the features are enabled filtering and paging. It's that simple
and at the moment if you notice we're using the default page size which is 12 and if we want to
change this to some other size we use a component called component. We discussed
how to do this in detail in our previous videos in this series. Now same idea, to display just the
"Male" employees, in the respective filter text box type "Male" and press the enter key, so we see
all the male employees here, we have 14 of them, on the first page we see 12 and the rest of them
on the second page and similarly if we want to see just the female employees type the word "female",
hit the enter key and we see all the 10 female employees on this first page of the grid. At
the moment to perform filtering we have to press the enter key but what if Idon't want to press
the enter key, as soon as I finish typing the filter term I want the filtering to be performed
immediately. Well, to be able to do that, we have to customize filter settings and for that we use
a component called component. So inside our data grid,
let's use component and then what we want to set here is "Mode" and if you're
wondering what value should we provide for this? Well, hover the mouse over this "Mode" property
and you can see, we have to supply something called "FilterBarMode", and as soon as I start
typing that, we can see FilterBarMode is an enum and we have two options OnEnter and Immediate.
OnEnter is the default which obviously we have been using so far which requires us to press
the enter key after we type our search term, instead we want to use "Immediate"
Now, let me type our search term "Male", I did not press the enter key, notice after a
short while, we only have "Male" employees displayed. Similarly, let's type "Female",
wait for a short while, filtering is automatically performed and we only see
"Female" employees and to remove the filter, same idea again, delete the filter value,
wait for a short while and we have all the records displayed. At this point, you might be wondering
can we control the amount of time that we have to wait after we type our search term? Well, we can.
On this component we have another property called "ImmediateModeDelay",
the default value for this property is 1500 milliseconds, this means we have to wait
1500 milliseconds after we type our search term to perform the filtering. Now,
let's say we don't want to wait 1500 milliseconds, we want the search to be performed immediately,
maybe after 200 milliseconds. Notice, now the search is performed more quickly.
Now, here is another interesting feature, in these filter text boxes we can also use
expressions. For example, let's filter by the ID column. So, if I want to find an employee
whose id is 10, we simply type that value and we see the respective employee record,
but what if I want to find all employees where id is less than or equal to 10? Well, we can type
that exact expression and we see the matching employees. Similarly > = 10 or simply > 10,
not just on "number" column type, we can also use these sort of expressions
even on string column type. For example, in the "LastName" text box, if I type "ln",
by default it uses "starts with" search, so we see all the employees whose name starts with "ln",
but what if I want to use "ends with" search instead. For example, let's say we want to find
both these employees - "Galloway" and "Longway" whose name ends with "ay". For "ends with" search,
we use this "%ay", notice we see both the employees whose name ends with "ay". So the
point is, we can filter the records in the grid with different expressions. Now, what expressions
can we use really depend on the underlying column data type. If a column type is numeric,
then we can use expressions like =, !=, <, <= to etc. If a column type is string then we can use
"starts with", "ends with" expressions. You can find a complete list here. The default
filter operator really depends on the underlying column data type. For example, if the column type
is numeric then the default filter operator is "equal", if it is string, "starts with".
For example, id column type is numeric, so if I type the value 10, notice it is using the default
equals operator. On the other hand, FirstName column type is string and if I type "sa", notice
it is returning us both the employees whose name starts with "Sa". So, on the string column type,
it's using the default operator "starts with". Can we change these default filter operators? Yes,
we can and for that, we use this "FilterSettings" object. Now, on this "EmployeeId" grid column
instead of using the default "=" operator let's use "<=" operator. For that, we set this property
FilterSettings and when I hover the mouse over, we can see the value it's expecting,
it's expecting an instance of FilterSettings, so let's use the "@" character and then,
a pair of brackets and let's create a new instance of FilterSettings object and then,
all we have to do is, set this property "Operator" equals, Operator is an enum and we can see all the
operators that we could use and the operator that we want to use is less than or equal.
Now, if I type 3, we see all the 3 employees whose id is less than or equal to 3 similarly 5, 10.
We can also disallow specific columns from being used as filters. For example,
let's say we don't want to allow users filtering based on this
"Email" column, for that on the respective grid column we set AllowFiltering = false.
Now, when I hover the mouse over this "Email" filter text box, we have a visual clue indicating
we cannot filter by this column. At the moment, on our data grid we don't have an initial filter,
this means when the grid first loads we see all the rows, in our case the entire set of 34 rows.
Let's say, when this data grid initially loads,
we want the data to be pre-filtered by "Id" column, for that we apply an initial filter,
so inside this component, we use another component
and inside this we can use one or more
Field by which we want to filter data, in our case "EmployeeId" and then value,
this can be any EmployeeId value, 10 for example
and then Operator, what operator we want to use? Let's use equal.
Notice, on the datagrid initial load, we have the data pre-filtered by the id column. At the moment,
for all these columns, we're using a text box as the filter interface, and this is the default,
but for this "Gender" column, it makes more sense to include a drop down list with the
three options - Male, Female and Other, maybe even include a custom option like "All". We'll discuss
how to do that in our next video. That's it in this video. Thank you for listening.