Hey guys, I am Venkat and this is part 17 of web development with Blazor video series. In this
video we'll discuss implementing data grid search in Blazor. So, here is what we want to be able to
do, when we navigate to our root application url "/search" we see this web page with the data grid,
and notice at the moment in the grid we've got 34 employees. We can see that in the footer,
and at the top right hand corner of the grid here we have a search text box. Let's say for example
I want to search for an employee with name "Mary", I simply type her name and then when
I press the enter key, we see that specific employee. Similarly I can also search for all
female employees. So, at the moment we've got 10 employees spread across two pages. Now, to perform
the search itself, I have to type the search term and then I can either press the enter key
or simply tab out of the search text box. Let's see how to implement this search functionality.
At the moment what we have here is a new razor page "Search.razor", and on this page I have
a Syncfusion data grid. The data source for this grid is "Employees" property which is right here,
and to this property, it is this EmployeeService which is providing the server-side data. Basically
this client-side service calls our server side REST API, retrieves employees data
from the database table and populate this property which is then set as the data source
for our data grid, and these are the columns that we are displaying employee first name, last name,
etc, and all we have done so far is enabled paging on this data grid and set the page size to 5. We
discuss paging in detail in parts 8, 9 and 10 of this video series. So, if you're new to paging
please check out these videos. At this stage if we take a look at this page in the browser,
we see the data grid with the list of employees as expected. At the moment we don't have search
text box within the data grid, so our first natural order of business is to include that
search text box. With Syncfusion data grid, implementing search is very very simple. First,
we create a variable. Let's name the variable "SearchTool". The data type of this variable
is going to be a List and this list is going to contain just one string, and the value
of this string has to be "Search". This string is used as the key to get the search text box. If we
set the string to any other value it doesn't work, and then on the data grid itself we set "ToolBar"
property and the value for this property is this variable that we have just created.
There we go we have the search text box and the search also works as expected. To clear the search
simply delete everything that you have in the search text box and we can either press the
enter key or simply tab out of the search text box. Now, this data grid search functionality
is highly customizable. By default, whatever search term that we type in this search text box
is searched across all these data grid bound columns, that is Id, First name, Last name,
Date of birth, Gender and Email, basically every column, but what if I want to search
only in specific columns? For example, let's say we only want to search across first name and last
name columns. Well, we can very easily achieve this by using component.
It's a two-step process. First, we create another variable. Let's call it "searchColumns"
and this is going to be a string array, and then we simply specify the list of columns that we want
to search across. In our case, they are first name and last name. Next, on the data grid, just like
how we are using component to customize paging behavior, we are going to
use component to customize search behavior, and on this component we set
"Fields" property to this variable that contains the list of columns that we want to search across.
In the data grid we have an employee whose first name is John. So, if we search,
we find that respective record. On the other hand, we don't have any employee whose first name
or last name is "Female". Female is present only in the "Gender" column,
but we are not searching across Gender column, we're only searching across first name and last
name columns. So if I perform the search, as expected we see "No records to display".
At the moment, using this "Fields" property we are specifying an inclusion list, that is the list of
columns in which we want to perform the search, but what if I want to do the opposite? Let's say
for example, in this data grid we want to search across all the columns except the "Email" column,
basically we want to specify an exclusion list. Well, we can very easily achieve that,
for that don't include the "Fields" property. So, if we remove this "Fields" property, by default,
the data grid is going to search across all these columns, but we want to exclude Email column
from search, so for that, on the respective set AllowSearching = "False".
By default, data grid performs contains search. Let me explain what I mean. When I search for
"Male" employees, notice both male and female employees are displayed, why? Well, that's because
this string Male is also contained in Female, so both male and female employees are displayed,
because the data grid by default is performing contains search, but what if I want to display
only "Male" employees? then we have to change the operator to equal and it's very easy to do, again
in our component, we set the operator property, Operator is an enum and
we can see all the operators that we can use Contains, Endswith, Equal etc. Let's use Equal.
Now, when I search for "Male" employees, it's using the equal operator and we only see male
employees. We can also configure an initial search. For example, let's say when this data grid
initially loads, we only want to display female employees, and that's very easy to do. Again,
on our component, we set the "Key" property, in our case we want
to display female employees, so we set this property to "Female". If you want to display
an employee whose first name is "John", you specify "John" as the value for "Key" property.
There we go, on the initial page load in the search text box we see the string
Female, and even in the grid only female employees are displayed. At the moment,
to initiate searching, we first type our search term and then we either have to tab out of the
search text box or press the enter key. What if I want to perform immediate searching, that is,
as I am typing in the text box, I want the search to be initiated. To be able to perform immediate
searching in the grid we have to build the data grid toolbar and the search text box ourselves
in the html. So, at the top of the grid, this gray box that we see here, this is called the
toolbar and we have the search text box inside the toolbar. So, both the toolbar and the search
text box itself, we have to build it in the html ourselves. So, this means we don't need
these two variables and we also don't need this toolbar property. Instead, inside the grid we
need another component called and as you can see from the intelligence, the namespace
for that is Syncfusion.Blazor.Navigations, so let's include that namespace at the top here.
Inside the we need plural and within this singular,
and then the type of toolbar item we want, in our case we want an input item, that is a text box
and then specify the alignment. We want to align it on the right hand side so
ItemAlign.Right. Inside this we include component and inside
this component we can include any html elements we want. In our case we want
a text box so we can type our search term, let's actually include Syncfusion text box
and the tag for that is and this component is present in the name space
Syncfusion.Blazor.Inputs, so let's include that namespace at the top here.
On this text box we need to set couple of properties. First, let's set "Placeholder"
to search and we want to handle "Input" event. This event is raised as we are typing
in the search text box and let's name the event handler OnInput, we don't have this
event handler method. So, let's create it in the code block at the bottom right here,
private void, the name of the method is OnInput and it's going to receive a parameter of type
InputEventArgs, let's call the parameter args. Now, as we are typing in the search text box,
what do we want to do? Well, we want to perform search on the data grid. This means,
we need a reference to the data grid itself, so let's create a property here, the property
type is SfGrid and we know this data grid works with Employee objects, so let's specify the type
and let's call the property itself "employeeGrid". Next, we need to link this property to the data
grid. So, for that, on the data grid itself let's use @ref and a value for that is our property.
All that is left to do, in the event handler, on the employeeGrid, we want to perform search. So,
for that we have SearchAsync method. It's an async method,
so let's await its execution and also not forget to turn this method into async,
and to this search async method, obviously we have to pass our search string, and for that
we can use this incoming parameter InputEventArgs, and on this object we have "Value" property.
Notice, now as we are typing in the grid, the search is performed
immediately. Now, let's say next to the search text box we want to include a search button
and we want to perform search only after we click that button.
Again, this is very easy to achieve. At the moment, within our data grid toolbar,
we only have one toolbar item and that is our search text box. We need another toolbar item,
a search button. So, let's make a copy of this . Toolbar item type is a button,
not an input and instead of the text box here, let's include Syncfusion button,
and as you can see from the intellisense, the button component is present in this
namespace Syncfusion.Blazor.Buttons, so let's include the namespace here.
Set the "Content", that is text on the button to "Search", and when we click the button
we want to handle the event. Let's call the event handler "SearchClick". We don't
have this even handler method, so let's create it in the code block at the bottom.
It's going to be very similar to this OnInput event handler, so in the interest of time let's
make a copy of this and then change the bits that are required. First of all, our event handler name
is SearchClick, and it's not going to receive any input parameters. Now, here's the important point
to keep in mind, whatever search term that we type in this search text box, we want to be able
to pass it to this even handler method, for that just like how we have created a property for the
data grid itself, let's create a property for the search text box. The property type is SfTextBox,
and let's name the property SearchTextBox and then in the grid html, on the search text box itself,
let's include @ref and the value for this is the property we have just created, and then
in the event handler we will pass the value from the search text box.
Notice, even now the search is being performed as we are typing in the search text box,
why is that? Well, that's because we forgot to remove the input event handler
on the search text box. So let's get rid of that. Save the changes
and take another look at the browser. Now, as we are typing in the text box,
notice search is not performed. To initiate the search, we have to click this search button.
To clear the search, delete everything that you have in the text box and then
click the search button. That's it in this video. Thank you for listening.