Jquery kendo grid prevent clicking only non edit rows when in edit mode

Question

I'm currently using a kendo grid. What I've been trying to do is that when I click on the add new row button the empty row(k-grid-edit-row) displays. I want to throw an alert message and saying complete the editing operation first when I click on other rows during the editing operation. But the key is, I don't want the alert message to be displayed when I click on the current inline editing row.

What I have done right now is that I also get an alert message when I click on current inline edit row.

    $('.k-grid-content').on("mousedown", function (e) {
        var grid = $('#Grid').closest(".k-grid");
        var editRow = grid.find(".k-grid-edit-row");
        if (editRow.length > 0) {
            alert("Please complete the editing operation before editing another row");
            e.preventDefault();
        }
        else return;
    });

What you can do instead is define what rows are editable and not nullable and then add validation to the rows. This will mean that the user will not be able to add the rows untill everything that is needed is populated with data. The validation will alert the user too. All of that can be done INSIDE the Kendo grid. There is no need for any Jquery with it. — JamesS

Mahogany Mahogany · Accepted Answer · 2020-02-25T15:00:42

You could try checking the Index of the row that has been clicked. When you are adding a row, the row goes to the top and has and index of 0.

In your if statement, also check if the index is not equal to 0.

It would look something like if grid.data("kendoGrid").select().index() != 0.

I haven't tested this, but I believe it should work.

Jquery kendo grid prevent clicking only non edit rows when in edit mode

1 Answers