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

Answer 1

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.

Answer 2

For me, I wanted to prevent users from double-clicking on other rows when they are trying to add a new row. Consider, for example, this code:

var IDS = {
    myGrid: "#my-grid",

    addRowBtn: "#add-btn",
    deleteRowBtn: "#delete-btn",
    saveRowBtn: "#save-btn",
    cancelRowBtn: "#cancel-btn",
};

var Grids = {
    MyGrid: null,
    //...
};

Then in the initialization function I create an event handler to respond to the double-click event:

function initMyGrid() {
    $(IDS.myGrid).kendoGrid({
        selectable: true,
        scrolable: true,
        sortable: false,
        columns: [
            { field: "FirstName", title: "First Name", width: "20%", attributes: { tabindex: "1" } },
            { field: "LastName", title: "Last Name", width: "60%", attributes: { tabindex: "2" } }
        ]
    });
    //...
    Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
        Grids.MyGrid.editCell($(this));
    });
}

Then I created a value in PageState to test:

var PageState = {
    // ...
    AddingRow: false
};

So when the user clicks a button to add a new row, I prevent them from clicking on to edit any other row:

function addNewRow() {
    PageState.AddingRow = true;

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
        if (PageState.Selected.RowId != null && PageState.Selected.RowId != "") {
            Grids.RulesGrid.closeCell();
        }
    });
    // ...
}

Also, whenever the user saves the row or cancels out of adding a new row, I re-enable the double-click event:

function saveRow() {
    PageState.AddingRow = false;

    // Allow user to edit other records now
    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
        Grids.MyGrid.editCell($(this));
    });
    // ...
}

HTH.