javascript - preventDefault() does not work in Kendo grid's custom click handler - Stack Overflow

admin管理员组

文章数量:1355721

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

Share Improve this question Follow asked Nov 7, 2014 at 8:40 CuriousSuperheroCuriousSuperhero 6,67144 gold badges3131 silver badges5252 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

本文标签： javascriptpreventDefault() does not work in Kendo grid39s custom click handlerStack Overflow