Kendo UI ASP.NET MVC Drop Down List inside a Grid Row

I tend to use the Kendo UI Grid in my applications far more than any of the other controls.  That is not to say the other controls are not as spectacularly engineered, because they are.  One of the many reasons the Kendo UI Grid is so powerful is how much it can be adapted to a myriad of situations.  For example, the guys and gals at Telerik made it extremely easy to embed drop down lists in grid rows.  This is super helpful when using the Grid’s inline edit functionality.

 

To get started, let’s build our model.  In this example I am going to be using multiple drop down lists per grid row to allow the user to select a “mode of transportation”.  In this post, we are only going to show how to get the drop downs working.  In the next post, I’ll take it one step further and turn our drop downs into cascading drop downs.

1
2
3
4
5
6
7
    public class TransportationModel
    {
        public int id { get; set; }
        public string Type { get; set; } // I.e. Air, Auto
        public string Make { get; set; } // I.e. Boeing, Chevrolet
        public string Model { get; set; } // I.e. 747, Corvette
    }

Now that we have our Model we can construct the Grid.  I have created a View in my MVC Web App and add a simple Action in my controller to direct to my new View.  In the View our grid should look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@(
    Html.Kendo().Grid<KendoUIGridEventsBlog.Models.TransportationModel>()
    .Name("DemoCascade")
    .Columns(columns =>
    {
        columns.Bound(p => p.id).Hidden(true);
        columns.Bound(p => p.Type).Title("Type");
        columns.Bound(p => p.Make).Title("Make");
        columns.Bound(p => p.Model).Title("Type");

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(210);
    })
    .ToolBar(tools =>
    {
        tools.Create();
    })
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Filterable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(datasource => datasource
         .Ajax()
         .Model(model =>
         {
              model.Id(p => p.id);
          })
          .Read(read => read.Action("Transportation_Read", "Home"))
          .Create(create => create.Action("Transportation_Create", "Home"))
          .Update(update => update.Action("Transportation_Update", "Home"))
          .Destroy(update => update.Action("Transportation_Delete", "Home"))
    )
)

I added some quick dummy code to my controller in the Transportation_Read action.  Nothing magical, just some hardcoded data to show the grid is working. 

Kendo Grid displaying our model data

Now that the grid is working, we are ready to see magic happen.  What I want is for each of the columns in the grid to contain a drop down list for the user to select from when the grid is in Edit mode.  To do this we are going to look at the model. Can you see what's different?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
public class TransportationModel
    {
        public int id { get; set; }
        [UIHint("TypeEditor")]
        public string Type { get; set; }
        [UIHint("MakeEditor")]
        public string Make { get; set; } 
        [UIHint("ModelEditor")]
        public string Model { get; set; } 
    }

If your eyes were sharp you saw that I added [UIHint(“SomeEditor”)] annotations on the three properties of my model that I wanted to display drop downs.  That annotation tells the Grid to look at a specific Partial View in your application and render the contents of that view as the editor template for that property.  Magic.

To wrap this up we need to make the partial views.  In your ASP.NET MVC application navigate to the Views\Shared\EditorTemplates folder and create a new Partial View named that same as your annotation.

 

Create your partial view here

Inside our partial view we need to define our Drop Down List.  You do this just as if you were doing it outside of the grid.  Mine looks something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@(
Html.Kendo().DropDownList()
    .Name("Type")
    .DataTextField("Text")
    .DataValueField("Value")
    .OptionLabel("Select Type...")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("TypesDD_read", "Home");
        });
    })
)

Now if I look at my grid in Edit mode, I should see my drop down list!

In the next post, I will expand on this example and convert the three individual drop downs into the cascading variety!

Source code highlighting by http://hilite.me