Kendo UI Grid: how to make cell read only on condition

Question

in Kendo UI Grid (with Angularjs) i have the following grid:

<div kendo-grid k-data-source="Table" k-options="thingsOptions" style="height: 365px">

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    toolbar: [{ name: "create", text: "Aggiungi Prodotto" }],
    columns: [
                { field: "Name", title: "Name", width: "50px" },
                { field: "Description", title: "Description", width: "50px" },
                { field: "Price", title: "Price", width: "50px" },
                { field: "Active", title: "Active", template: '<input type="checkbox" disabled="disabled" #= Active ? checked="checked":"" # class="chkbx"  />', width: "20px" },
                { command: [{ name: "edit", text: "Modifica" }], title: "", width: "172px" }
    ],
    editable: "inline"
};

How can i make the "Price" field readonly on some condition? I must test a variable and if it is true i want the Price field readonly otherwise writable.

I have tried to add in the "thingsOptions" function:

edit: function (e) {
  if(myvar == true)
        e.container.find("input[name=Price]").enable(false);
 }

But id doesn't work (undefined reference).

possible duplicate of [Make cell readonly in Kendo Grid if condition is met](http://stackoverflow.com/questions/20881484/make-cell-readonly-in-kendo-grid-if-condition-is-met) — Lars Höppner, Mar 10 '15 at 09:22

score 0 · Answer 1 · answered Jun 10 '14 at 13:15

0

Try to use:

edit: function (e) {
    if(myvar == true)
        $("input[name=Price]").attr("readonly", true);
    } else {
        $("input[name=Price]").attr("readonly", false);
    }
}

answered Jun 10 '14 at 13:15

Gurminder Singh

1,755
16
19

Nitin Rawat · Answer 2 · 2014-06-10T13:38:55.320

Inside the edit function of the grid just manipulate the condition the way you want to use. For closing the cell you can use this.closeCell();

      edit: function (e) {

         //Size will be editable only when the Area is not empty 
         if(e.container.find(“input”).attr(“name”) == ‘Price’) { 
           //Below statement will close the cell and stops the editing.
           if(myvar == true){
            this.closeCell();
           }
         }
        }

For more info have a look here

score 0 · Answer 3 · answered Dec 17 '14 at 04:25

columns: [{
                editable: false,
                field: "Id",
                title: "Id",
                width: 50,
                editor: idEditor,
            }, {
                title: "Name",
                field: "Name",
                width: 100
            }, {
                command: ["edit", "destroy"],
                title: "&nbsp;",
                width: "250px"
            }]  

function idEditor(container, options) {
        container.append(options.model.Id);
    }

Kendo UI Grid: how to make cell read only on condition

3 Answers3