Kendo UI Grid with Filter Menu DropDownList

Display a grid that is filterable where the column filter menu contains a dropdownlist instead of a textbox.

by Akram kamal

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div class="title">Instructions</div>
<div id="instructions">The first textbox in the Role filter menu has been converted to a Kendo DropDownList.  Click on the filter icon in the Role column heading to see.</div>
<div class="title">Person Grid</div>
<div id="grid"></div>

CSS

.title {
    font-weight: bold;
    font-size: "14px";
    margin: 10px 0px 10px 0px;
}

#instructions {
    margin: 0px 10px 0px 10px;
}

JavaScript

// Define the datasource for the grid.
var _peopleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
        { id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
        { id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" }
    ]
});

// Create the grid.
var _grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    filterable: { extra: false },
    columns: [
        {
            field: "name",
            title: "Name"
        },{
            field: "roleTitle",
            title: "Role"
        }
    ],
    editable: true
}).data("kendoGrid");

// Find the Role filter menu.
var filterMenu = _grid.thead.find("th:not(.k-hierarchy-cell,.k-group-cell):last").data("kendoFilterMenu");

filterMenu.form.find("div.k-filter-help-text").text("Select an item from the list:");
filterMenu.form.find("span.k-dropdown:first").css("display", "none");

// Change the text field to a dropdownlist in the Role filter menu.
filterMenu.form.find(".k-textbox:first")
    .removeClass("k-textbox")
    .kendoDropDownList({
        dataSource: new kendo.data.DataSource({
            data: [
                { title: "Software Engineer" },
                { title: "Quality Assurance Engineer" },
                { title: "Team Lead" }
            ]
        }),
        dataTextField: "title",
        dataValueField: "title"
    });