Focus Column Header Input When navigatable Is true

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I allow the user to click on an input in the headerTemplate of a column when the navigatable property of the Kendo UI Grid is true?

Solution

To focus the input, prevent the mousedown event handler from bubbling to the header.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [{
            field: "name",
            headerTemplate: '<input id="myID" type="text" value="text" />'
        }],
        navigatable: true,
        dataBound: function(e) {
            e.sender.thead.on("mousedown", "input", function(e) {
                e.stopPropagation();
            });
        },
        dataSource: [{
            name: "Jane Doe"
        }, {
            name: "John Doe"
        }]
    });
</script>