Multiselect dropdown filter

[Groover]

So I'm working with the Kendo Grid in MVC and my customer needs a grid in which he can filter columns on certain sets of choices. And he needs to see which filters are currently active.
I'm using a grid with the row filtermode set and I'm setting the template on the filter (through the FilterableSettings.CellSettings.Template.HandlerName property of the GridBoundColumn). I'm showing a dropdown with the choices the customer can check. Basically what I want to accomplish is this but it doesn't work with the row filtermode set. I found this example and I'm using it with the template to show a dropdown in every column, except it has side-effects I don't want. The effects are:

1. It shows the dropdown with empty rows in between the actual options, see the dropdown screenshot. Why does this happen?
2. It filters the wrong way (on objects, see the filter screenshot) on closing of the dropdown. I want to override the way of filtering, but where can I hook in to override this? I don't know which event is thrown when closing the dropdown nor do I know on which element the element is hooked.

Below shows the code I'm having so far for the filtertemplate:

function filterMenu(container) {
        debugger;

        // Determine which field this is and get the appropriate choices
        var currentColumnIndex = $(".k-filter-row").children().length - 1;
        var headers = $($(".k-grid-header").children()[0]).children();
        var currentHeader = headers[currentColumnIndex];
        var customField = currentHeader.getAttribute("data-customfield"); // Use for support in < IE 11, otherwise could have use .dataset.customfield
        var choices = specialFilterFields[customField];

        var dropDown = container.element.kendoDropDownList({
            dataTextField: "Choice",
            dataValueField: "Choice",
            template: '<li unselectable="off" class="k-item nowrap check-item">' +
                    '<input type="checkbox" name="#= Choice #" value="#= Choice #" class="check-input" />' +
                    '<span>#= Choice #</span>' +
                    '</li>',
            placeholder: "Filter...",
            select: function(e) {
                e.preventDefault();
            },
            dataSource: choices,
            valuePrimitive: false
        }).data("kendoDropDownList");

        dropDown.list.find(".check-input,.check-item").bind("click", function (e) {
            var $item = $(this);
            var $input;
            if ($item.hasClass("check-item")) {
                $input = $item.find("input");
                $input.prop("checked", !$input.is(":checked"));
            } else {
                $input = $item;
            }

            // Update the style of the checkboxes
            $.uniform.update($input);

            // Update the text of the dropdown
            updateDropDown(dropDown);

            e.stopImmediatePropagation();
        });

        updateDropDown(dropDown);
    }

    function updateDropDown(dropdown) {
        var items = [];

        dropdown.list.find(".check-input").each(function () {
            var $input = $(this);
            if ($input.val() != "" && $input.is(':checked'))
                items.push($input.val());
        });
        dropdown.text(items.toString());
    }

[Daniel]

Hello,

The empty items will be shown because the template is used to customize the items content and not the entire items. You should replace the <li> tag with another one in the template in order to avoid the problem. 

As for the filtering - an object will be used for the filter because the valuePrimitive option is set to false so the selected item will be used for the binding. In order to prevent the default filtering you should remove the data-bind attribute from the input:

var dropDown = container.element.removeAttr("data-bind").kendoDropDownList({

Filtering the grid dataSource manually based on the checkboxes can be implemented by using approach similar to the one demonstrated in this how to example.

Regards,
Daniel
Telerik