This is a migrated thread and some comments may be shown as answers.

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

6 Answers 2583 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 08 Jan 2013, 02:28 PM
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?

6 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 08 Jan 2013, 09:03 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 09 Apr 2013, 07:07 PM
Hi Iliana,
The above will work for 'InCell'. Is there a method to do the same thing for 'InLine' editing?

thanks,
Robert
0
Iliana Dyankova
Telerik team
answered on 10 Apr 2013, 10:55 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jayesh
Top achievements
Rank 1
answered on 30 Dec 2013, 03:03 PM
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.
0
n/a
Top achievements
Rank 1
answered on 14 Mar 2016, 07:46 AM

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();
    }

0
Konstantin Dikov
Telerik team
answered on 16 Mar 2016, 07:27 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Nathan
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Robert
Top achievements
Rank 1
jayesh
Top achievements
Rank 1
n/a
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or