4

I have a kendo 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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jermny
  • 870
  • 2
  • 12
  • 23
  • Asking for clarification: are `readonly` formulas affecting the edition of the `cell` or the entire `row`? In your example, column 3 is not allowed to be edited (depending on column 1 and 2) but what happens with column 1 and 2, is it possible to edit them? The most general solution might require build a graph of dependencies between cells in a row and even detect cyclic dependencies (that should be considered as error). – OnaBai Jan 08 '13 at 21:18
  • alternative solution without custom editors: http://stackoverflow.com/questions/20881484/make-cell-readonly-in-kendo-grid-if-condition-is-met/20881973#20881973 – Lars Höppner May 06 '14 at 04:51

2 Answers2

14

My suggestion is creating an editor function that validates the condition. This of course has the disadvantage that is an ad-hoc solution but ... it works!

Lets have the following entries (data of the DataSource):

var entries = [
    { id:1, col1: new Date(2012, 11, 31), col2: new Date(2013, 0, 1), col3: "Yes" },
    { id:2, col1: new Date(2013, 0, 1), col2: new Date(2013, 0, 1), col3: "No" },
    { id:3, col1: new Date(2013, 0, 2), col2: new Date(2013, 0, 1), col3: "No" }
];

Then I define the grid as:

var grid = $("#grid").kendoGrid({
    dataSource : {
        data    : entries,
        schema  : {
            model: {
                id    : "id",
                fields: {
                    col1: { type: "date"},
                    col2: { type: "date"},
                    col3: { editable: true }
                }
            }
        },
        pageSize: 3
    },
    columns    : [
        { field: "col1", title: "Col1", format: "{0:yyyy-MM-dd}" },
        { field: "col2", title: "Col2", format: "{0:yyyy-MM-dd}" },
        { field: "col3", title: "Edit?", editor: checkAndEdit }
    ],
    editable   : "incell",
    navigatable: true,
    pageable   : true
}).data("kendoGrid");

Where col1 and col2 are dates and col3 is a string that can be edited if and only if col1 is less than col2.

I define checkAndEdit function as follow:

function checkAndEdit(container, options) {
    if (options.model.col1 < options.model.col2) {
        $('<input data-bind="value:' + options.field + '" ' +
                'data-format="' + options.format + '" ' +
                'class="k-input k-textbox"/>')
                .appendTo(container);
    } else {
        grid.closeCell(container);
    }
}

Where I generate the corresponding input field if col1 < col2 and otherwise invoke closeCell for exiting edit mode.

You can see it running here

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • It seems this only works for "incell". When doing "inline" the editor only gets triggered once and therefore you can't change one cell based on the contents of another. – Derek Greer Sep 15 '15 at 21:51
3

Keep it simple just use (Which you bind in your grid column)

[Editable(false)]
public string ob_name { get; set; }

In your Costume class which using for your Kendo Ui Grid.

For details you can also see this

Mohammad Atiour Islam
  • 5,380
  • 3
  • 43
  • 48