Edit this page

Focus Column Header Input When navigatable Is true

Environment

Product Progress Kendo UI Grid
Progress Kendo UI 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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy