CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Dev 404
Dev 404

Reputation: 1597

Make kendo grid cell editable or read-only depending on other cell's state

I have a kendo grid with inline editing. I want to be able to make one of the cells in the row editable if another cell in the row is checked. If it's not checked then I want the cell to be read-only.

My columns look like this:

columns: [
    { field: "Title" }, // string
    { field: "Body" }, // string
    { field: "IsCalculated", template: "#= IsCalculated ? 'Yes' : 'No' #" }, // boolean
    { field: "Expression" } // string
]

If Calculated is checked then I want Expression to be editable, otherwise, I want it to be read-only.

I have looked at the configuration docs for the kendo grid and I have experimented with the columns.editable function but as explained in the docs: "The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created."

I can use this function to determine whether the cell should be editable or read-only before it's opened but I want to be able to change it while the cell is open for editing and the Calculated checkbox is checked or unchecked.

Upvotes: 0

Views: 2779

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Try preventing the edit event with cancelRow():

edit: function(e) {
    if (!e.model.IsCalculated &&
        $(e.container).find('input').attr("name") == "Expression") 
    {
        this.cancelRow();
    }
}

Demo

UPDATE - Better condition:

if (!e.model.IsCalculated &&
    $(e.container).find('input[name="Expression"]').length) // <---

Demo

Upvotes: 1

Related Questions