Kendo Multi Select in a MVC Kendo Grid

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

Now we can move onto the instantiation of the Kendo Grid (Figure 3). The unique part of this instantiation is the binding of the skills column (highlighted in Figure 3). There are two parts to this binding. First, the ClientTempate tells Kendo what text to display on the grid using the JavaScript function shown in Figure 4 (note the # is how Kendo knows to execute JavaScript inside the template). We are passing in the data.Skills which is the List associated with the current row. Upon clicking out of the multi select control the JavaScript function takes this list and loops through the members to create a string to return to the screen for viewing (Figure 5).

Figure 3: Kendo Instantiation in the CSHTML File (Razor Syntax)

Figure 4: JavaScript Function

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

Closing

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.

• Font
• Typeface