Please see my other Telerik articles.

Providing a dropdown column filter

In my Telerik Grid Dropdown article (link), I demonstrated how to use a dropdown within a grid column, allowing users to choose between predefined choices.

However, the column’s filter method wasn’t very precise in that since the column only provided a predefined set of choices within the dropdown, the filter should’ve also worked on those choices. Instead, the filter worked based on what the user types – very lazy filtering.

In this article I will demonstrate how to change the field from using a editor template to the foreign key format, which includes built-in filtering matches choices provided to the user.

Instead of using a property, itself a type of another view model, I’ll explicitly state the ID and name properties in the grid’s model.

In the grid’s configuration, I’ll update the field to use the ID field and change how its populated.

Notice how I don’t need to specify an editor template because “ForeignKey” refers the razor engine to the default template in /Views/Shared/EditorTemplates.

I’ll also update the grid’s code setting the default value.

Finally, I’ll update the methods used to populate the dropdown and the grid when the page loads.

Now we have a grid field displaying a dropdown with choices also used by the column filter.