There are only a few things we need to do here: teach the grid model to work with filters, create a form and render it.
First, let’s modify our model so that it can work with filters. We’ll add the
filtersHandler method to the settings
object passed to
Filters themselves will be defined in
MainComponent in the next way:
Next, we’ll define the
onFiltersChange method in our
Inside this method we’ll call
setState to update our grid model and filters.
UIKernel.onFiltersChange accepts a grid model and filters as arguments and returns a new state with updated filters and grid model.
Now let’s create a form with three filters:
gender. Here’s the code for that:
updateFilter updates the value of
this.state.filters and calls the function passed to
FiltersForm via props.
Finally, let’s add our form into the
render method of
Here, we’ve added some Bootstrap markup to display the form and grid beautifully.
We also need to set padding for our form. So let’s open the
main.css file and type the following:
Now go ahead and type into the form fields and see the grid data change.