I've added the custom click handler for Kendo grid's "Add new record" button, but JavaScript's preventDefault() function does not seem to work on it.

$('.k-header').on('click', '.k-grid-add', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do something else
});

I would like that "Add new record" button does something else than adds the new row in grid.

Full code example: JSFIDDLE

I've added the custom click handler for Kendo grid's "Add new record" button, but JavaScript's preventDefault() function does not seem to work on it.

$('.k-header').on('click', '.k-grid-add', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do something else
});

I would like that "Add new record" button does something else than adds the new row in grid.

Full code example: JSFIDDLE

• javascript
• jquery
• kendo-ui
• kendo-grid

3 Answers 3

This works

$('.k-grid-add').click(function(e) {
    // do something else
    return false;
});

See updated fiddle

http://jsfiddle/qoxvaayn/5/

KendoUi also attached click event listener like jquery, so to remove an existing click event handler we should use off like below and then attach new click event.

e.preventDefault();e.stopPropagation(); will stop default event handler behavior but not attached listeners.

$('.k-header').off('click').on('click', '.k-grid-add', function(e) {
    //handler business logic here
});

(Alternative)

Add a template and create a custom toolbar button "Add New Records" and attached a event on that buuton

some thing like this

 <script type="text/x-kendo-template" id="template">
       <input type="button" value="Add new record" onClick="YOURFUNCTION()" class="k-button"/>
 </script>

<script>
$("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: [{text: "", template: kendo.template($("#template").html())}],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { mand: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });
});

</script>