Kendo Grid : disable row edit

Question

I have an editable grid and want to make some rows non editable depending on conditions.

Can anyone please advice how can I do this.

Thanks

Solution

Out of the box, there is no feature that allows controlling the edition per row based. What you can do is exit edition when the row is tried to edit.

There is one event edit that is fired once a cell enters in edition mode. What you can do is close that cell as soon as you detect that your conditions are true.

Example: We have a grid with the following schema definition:

schema  : {
    model: {
        fields: {
            Id       : { type: 'number' },
            FirstName: { type: 'string' },
            LastName : { type: 'string' },
            City     : { type: 'string' }
        }
    }
}

And we don't want to allow edition of rows which City is Seattle. The edit handler should be defined as:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : true,
    edit      : function (e) {
       // e.model contains the model corresponding to the row that is being edited.
        var data = e.model;
        if (data.City === "Seattle") {
            // Close the cell (exit edition mode)
           this.closeCell();
        }
        e.preventDefault();
    },
    pageable  : true,
    columns   :
            [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" },
                { field: "City", width: 100 }
            ]
}).data("kendoGrid");

The problem is that edit handler is invoked after the cell is actually in edit mode so closing might produce some flickering but in most cases it should work.

The second option is define the grid as non-editable and invoke editCell manually if the condition is true:

In this case you define the grid as:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
            [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" },
                { field: "City", width: 100 }
            ]
}).data("kendoGrid");

and then define a click handler for the cells:

grid.tbody.on("click", "td", function (e) {
    // Close any possible cell already in edit mode
    grid.closeCell();
    // Find data corresponding to clicked cell
    var data = grid.dataItem($(e.target).closest("tr"));
    // Check condition
    if (data.City !== "Seattle") {
        // Enter edition mode
        grid.editCell(e.target);
    }
});

Where I retrieve the data for the row corresponding to the clicked table cell and the check for the condition. If the condition matches then I open the cell.

Despite this does not have flickering, it is not my preferred because you need to carefully trigger save for saving the cells and despite you say that you grid is not editable, you are editing it.

Running example for the first implementation here : http://jsfiddle.net/OnaBai/NWw7T/ and for the second here: http://jsfiddle.net/OnaBai/NWw7T/1/

For editions modes other than "incell" the easiest of implementing the same functionality is creating a custom defined edition button that controls if a row should or should not go into edition mode.

Comments

[Filippo]

Look at this solution stackoverflow.com/questions/15893199/…

[Sahil M.]

Thanks, OnaBai your first solution saves my day. Just adding on top of the flickering issue, we can also use the 'BeforeEdit' event. It works perfectly for me.