How can I implement a multiple select for filtering in Kendo Grid ASP MVC?

Question

I'm developing an application with Kendo Controls of 2014 (I don't have access to the newest one 2017 or 2018). In this project, I have several columns of the Foreign Key type like this one:

columns.ForeignKey(p => p.StatusID, (System.Collections.IEnumerable)ViewData["status"], "ID", "Name").HeaderTemplate("Status")

In order to create the grid I followed the basic example:

http://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

For the basic implementation, it looks and works as expected the users can select from a variety of Status or Users in the filtering and editing options.

However, I would like to be able to select more than one at once. I tried to migrate this example, which is for Kendo for jQuery:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/multiselect-used-for-column-filtering.html

Where they implemented a Multi Select.

That should be enough to satisfy my needs. I tried to migrate to the ASP MVC and now, it looks like this:

@model object

@(
 Html.Kendo().MultiSelectFor(m => m)
    .BindTo((MultiSelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

Basically, I replaced the Drop Down list into a Multi Select, but nothing changed my filtering is still displaying the normal Drop Down, there is no Multi Select:

Maybe I should do more changes, but I don't know what else I should change; I would like to know if someone has ever experienced this before and how they handled it, I have tried multiple examples and codes, but my template newer changes, it's always the Drop Down List. Another interesting example, but it's in jQuery too, I haven't been able to find an implementation in ASP MVC:

http://jsfiddle.net/victordscott/5kbfY/

Besides, I'm aware that what I would like to achieve is available since 2015 Q1:

http://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

Unfortunately, I don't have access to any newer version as I explained before. Thanks in advance for any idea.

So you are unable to update the controls & you're not using JavaScript/jQuery?.. Pros and cons using MVC wrappers vs HTML/JS widgets. For me (after working with both over the last 2 years), MVC wrappers feel very restrictive and you should really consider Client-side implementation, especially when you're attempting to apply customization to the standard controls. — Sandman
Hi @Sandman I understand your point and I prefer jQuery, but my client and team is fully working in ASP, that's why I'm a bit restricted of ASP MVC and not jQuery. Also, I should rewrite a lot of code and it won't be standard of one part in ASP and only one section in jQuery. — Federico Navarrete

womd womd · Accepted Answer · 2017-12-21T12:45:55

don't know if it's available in this older version, but you could give it a try with use of "EditorTemplate"

code for EditorTemplate: (place in folder "EditorTemplates", name it f.e: "myeditortemplate.cshtml")

@model object    

@(Html.Kendo().MultiSelect()
          .Name("optional")
          .AutoClose(false)
          .Placeholder("Select attendees...")
          .BindTo(new List<string>() {
              "value1",
              "value2",        
          })
    )

or for remote-datasource:

@model object    

@(Html.Kendo().MultiSelect()
          .Name("optional")
          .AutoClose(false)
          .Placeholder("Select attendees...")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("ReadAction", "MyController");
              });
          })
    )

then in the grid-definition:

...
..
   column.Bound(c => c.optional).EditorTemplateName("myeditortemplate");
..
..

cheers

How can I implement a multiple select for filtering in Kendo Grid ASP MVC?

1 Answers