在编辑网格时，如何按行禁用特定字段？ [英] When editing a grid, how do I disable specific fields by row?

问题描述

我有一个kendo网格，里面有数据和多个列（比如col 1，2和3）。需要能够根据彼此的值来编辑（或防止编辑）第1,2,3列。这是特定行。

例如，如果第1列（日期）是<第2列（日期），第3列不允许编辑。

我知道这很简单，可以禁用或启用整个列，但我的要求是特定于行的。因此，第1行可以启用第3列，第2行可以禁用第3列。

有什么想法？

解决方案

我的建议是创建一个验证条件的编辑器函数。这当然有缺点，这是一个特别的解决方案，但是...它的工作！

让我们有以下条目（数据源的数据）：

  var entries = [
 {id：1，col1：new Date（2012，11，31），col2：new Date （2013,0,1），col3：是}，
 {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} 
]; 
  

然后我将网格定义为：

<$ $ {
dataSource：{
data：entries，
schema：{
）pre $ var grid = $（＃grid模型：{
id：id，
字段：{
col1：{type：date}，
col2：{type：date}，
col3：{editable：true}
}
}
}，
pageSize：3
}，
列：[
{字段：col1，标题：Col1，格式：{0：yyyy-MM-dd}}，
{字段：col2，标题：Col2，格式： yyyy-MM-dd}}，
{field：col3，title：Edit？，editor：checkAndEdit}
]，
editable：incell，
可导航：true，
可分页：true
}）。data（kendoGrid）;


其中 col1 和 col2 是日期和 col3 是一个可以编辑的字符串当且仅当 col1 小于 col2 。

我定义了 checkAndEdit 函数如下：

pre $ function $ checkAndEdit .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）;
}
}

在哪里生成相应的输入字段if col1 < col2 ，否则调用 closeCell 退出编辑模式。 / p>

您可以在此处

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?

解决方案

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

这篇关于在编辑网格时，如何按行禁用特定字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！