I recently encountered a situation where I needed to render a multi select in a grid. We have a license for Kendo so I figured it was a great opportunity to use their MVC Kendo Grid. What I didn’t know was this type of binding is not included out of the box and must be custom built. I was very surprised by this so I wanted to share my solution and hopefully save other developers the time. Figure 1 shows the multi select inside of a grid that we will be building in this post.
Figure 1: Kendo Multi Select in a MVC Kendo Grid
Setting up the Kendo Grid
First, I want to start off with the models (Figure 2). Each MultiSelectGridModel represents a person, or row in the grid. Each person can have many skills, which is the field that will be represented in the multi select. Skills are represented as a List because the user can select multiple options from the multi select control.
Figure 2: Models
Figure 3: Kendo Instantiation in the CSHTML File (Razor Syntax)
Figure 5: Edited Kendo Grid
Second, we have the Editor Template (Figure 6). This template is just a view that contains the Kendo Multi Select control with the definition of what to bind to. In this case we will be binding to a variable in the ViewData called SkillsList.
Figure 6: Skills Editor Template
Now that we have the view and model set up, we need to write the controller method to handle the get request (Figure 7). First, we will build a List that will contain the options present in the multi select. Next we will add the variable to the ViewData so the editor template will be able to access it during runtime. Lastly, we will construct the model and return it with the view.
Figure 7: MVC Controller Get Action
I’m surprised Kendo UI didn’t come with built-in bindings for these different column types, but they did build out a very flexible platform to create any column type that is desired. The flexibility is proving useful for us as our client has already asked for enhancements on the grid we delivered to them. Post your questions and comments below, or find us on Twitter at @CrederaMSFT.