jsGrid – dropdown filter populated from server

Introduction

In my last post I was talking about populating filter input with default value.
Today I would like to show you how to populate dropdown filter with values from server.
There are two options how to approach this. I try to lay out both of them.

Example usecase:

Open page with data grid
Grid’s dropdown filter is populated with data from server
On dropdown select the data are filtered
Dropdown filter options stays the same as on load

First we need to setup initialLoad variable, which will determine if we load data for the first time. Because we don’t want to change the dropdown options every time, just on first load (to get all of them).

Second thing is to setup field template (Name column) to be correct. Type of field has to be select and we need to specify textField and valueField as well. And for now we just place one empty item into items.

Third important bit is loadProducts function. This function gets all the product names from response and sets those values into items, we specified in template before. We also add empty item so we could clear filter.

Note:textField and valueField can be different, I use the same value for simplicity.

Summary

First approach:
– we have only one call to the server to get all the data
– we have to introduce intialLoad variable to check the state we are in

Second approach:
– two or more (if we have more then one dropdown) calls to the server to get data
– if there is a problem with loading the dropdown data, grid won’t be created (this could be fixed by introducing error handler)
– when getting the dropdown data, page would be empty (could be a problem if it would take a long time to load all the data)

I believe that this problem could be solved by other ways as well and that both of those I showed here could be improved to your needs as well. I leave those up to you.
Thanks for reading.