Please see my other Telerik articles.

Using dropdowns within grids

In this article I’ll demonstrate how to use a dropdown within a Telerik grid.

First, I’ll begin with the View Model used with CRUD operations on the grid.

Regarding the first View Model, you’ll notice the UIHint decoration.
This attribute instructs the website to use the following partial view when displaying this field.

For the dropdown, I define a property which itself is another View Model.

Notice in the partial view the same view model is references for the dropdown property.

With my view models defined and partial view for the dropdown’s UI ready, I’ll instruct the controller to populate the dropdown when the view first loads.

Notice once again the View Model used in the population.

Now I’m ready to define this field in the View within the grid’s definition.

Notice for the LINQ expression “c => c.Jurisdiction,” I define a template which points to the view model property of “Jurisdiction,” then that view model’s property “Name.”

Finally, I’ll set the dropdown’s default value when the user click’s “Add new record,” or “Edit.”

Ensure the name passed to ViewData[] matches that of the assignment within the previous action used to populate the dropdown.

Now we can see the dropdown working with the grid.