Kendo UI DropDownList as Multi Select with CheckBox

Question

I'm Using Kendo UI MVC wrapper. I need a DropDownList with checkbox for each item to allow me select multiple of items.

I found this jsfiddle doing what I want to achieve, but it is not with MVC wrapper.Would you please show how I can implement the same thing with MVC wrapper?

@(Html.Kendo().DropDownList()
              .Name("StructureCompany")
              .HtmlAttributes(new { style = "width:180px" })
              .OptionLabel("-- Select --")
              .DataTextField("Title")
              .DataValueField("Id")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeCompany", "Company");
                  });
              }))

Answer 1

Here's a way you can do it:

View

@(Html.Kendo().DropDownList()
    .Name("StructureCompany")
    .HtmlAttributes(new { style = "width:180px" })
    .DataTextField("Title")
    .DataValueField("Id")
    .Template("<input type='checkbox' name='cb' value='#:data.Title#' /> #:data.Title#")
    .Events(e => e.Select("onSelect"))
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCascadeCompany", "Company");
        });
    }))

I removed your OptionLabelbecause it doesn't flow well with this style. But I found an alternative as you will see below

Script

//This extendes the base Widget class
(function ($) {
    var MultiSelectBox = window.kendo.ui.DropDownList.extend({
        _select: function (li) { },//Prevents highlighting
        _blur: function () { },//Prevents auto close
    });

    window.kendo.ui.plugin(MultiSelectBox);
})(jQuery);

//Sets up your optional label
$(document).ready(function () {
    $("#StructureCompany").data("kendoDropDownList").text("-- Select --");
})

//Does all the functionality
function onSelect(e) {
    var dataItem = this.dataItem(e.item);
    var ddl = $("#StructureCompany").data("kendoDropDownList");
    var cbs = document.getElementsByName("cb");
    var display;

    var list = [];
    for (var i = 0; i < cbs.length; i++) {
        if (cbs[i].checked) {
            list.push(cbs[i].value);
        }
    }

    if (list.length == 0) {
        display = "-- Select --";
    }
    else {
        display = list.join(", ");
    }

    ddl.text(display);
}

Here is the tricky part, I'm not a real connoisseur when it comes to javascript so forgive my terminology if it is wrong. The first blob where you have the new scope function allows you to inherit from the kendo.ui namespace so that you are able to change the base level stuff. Such as the auto close and highlighting functionality

That next blob is just my alternative to having your 'OptionLabel'(you can do it however you want)

The last part is the selection which as you can see just creates a comma value then shoves it in as the display in the drop down list via 'ddl.text()' method. You can do this however you want. Hope this helps!