When editing a grid, how do I disable specific fields by row?

[Nathan]

I have a grid with data in it and multiple columns (say col 1, 2, and 3). Columns 1, 2, 3 need to be able to be edited (or preventing editing) based off the values of each other. This is row specific.

For instance, if column 1 (date) is < column 2 (date) then column 3 is not allowed to be edited. 

I know it's simple enough to disable or enable an entire column but my requirements are row specific. So row 1 could have column 3 enabled and row 2 could have column 3 disabled.

Any thoughts?

[Iliana Dyankova]

Hello Nathan,

In order to achieve this you can hook up to the Grid's edit event and close the currently edited cell (depending on the conditions) using the closeCell() method. For example: 

$("#grid").kendoGrid({
  //....
  edit: onEdit
});

function onEdit(e) {
  //your custom logic
  $('#grid').data("kendoGrid").closeCell();
}

Kind regards,

Iliana Nikolova
the Telerik team

[Robert]

Hi Iliana,
The above will work for 'InCell'. Is there a method to do the same thing for 'InLine' editing?

thanks,
Robert

[Iliana Dyankova]

Hello Robert,

In order to achieve this when "Inline" edit mode is used you can use the Grid's cancelRow() method. For example:

$("#grid").kendoGrid({
   //....
   edit: onEdit
});

function onEdit(e) {
   //your custom logic
   $('#grid').data("kendoGrid").cancelRow();
}

Kind regards,
Iliana Nikolova
the Telerik team

[jayesh]

In Inline editing i want to bind different controls.
Like if fist row cell1 have value is dropdown then while editing second cell it appear with dropdown.
if Second row cell1 have value is Radio button then while editing second cell it appear with radio button.
And selected value need to save in database.

[n/a]

I wrote this configuration like yours, but this edit function cannot be fired.

$("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { field: "age" }
        ],
        edit: function (e) {
            if (e.model.IsNotEditable) {
                console.log(e);
                //revert edited cell back to `read` mode
                this.closeCell();
            }
        },
        dataSource: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
        ],
        editable: true
    });
    function onEdit(e) {
        //your custom logic
        console.log(e);
        $('#grid').data("kendoGrid").closeCell();
    }

[Konstantin Dikov]

Hi Guo,

The "edit" event fires correctly with the configuration that you have, but the condition that you have will not pass, because you do not have IsNotEditable value in the bound rows. Following is an example for such scenario:

dataSource: [
  { name: "Jane Doe", age: 30, IsNotEditable: true },
  { name: "John Doe", age: 33 }
],

If your condition differs, please change the if statement, so it could fit to your exact scenario.


Regards,
Konstantin Dikov
Telerik