Skip to content Skip to sidebar Skip to footer

When Editing A Grid, How Do I Disable Specific Fields By Row?

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 ot

Solution 1:

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: newDate(2012, 11, 31), col2: newDate(2013, 0, 1), col3: "Yes" },
    { id:2, col1: newDate(2013, 0, 1), col2: newDate(2013, 0, 1), col3: "No" },
    { id:3, col1: newDate(2013, 0, 2), col2: newDate(2013, 0, 1), col3: "No" }
];

Then I define the grid as:

vargrid=$("#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 ifcol1 is less than col2.

I define checkAndEdit function as follow:

functioncheckAndEdit(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

Solution 2:

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

Post a Comment for "When Editing A Grid, How Do I Disable Specific Fields By Row?"