Kendo Grid:禁用行编辑

时间:2013-08-07 17:16:46

标签: jquery asp.net-mvc grid kendo-ui

我有一个可编辑的网格,并希望根据条件使某些行不可编辑。

有人可以建议我怎么做。

由于

2 个答案:

答案 0 :(得分:7)

开箱即用,没有允许控制每行版本的功能。当你尝试编辑这行时,你可以做的就是退出版本。

一旦单元格进入编辑模式,就会触发一个事件edit。一旦发现您的情况属实,您可以做的就是关闭该单元格。

示例:我们的网格具有以下schema定义:

schema  : {
    model: {
        fields: {
            Id       : { type: 'number' },
            FirstName: { type: 'string' },
            LastName : { type: 'string' },
            City     : { type: 'string' }
        }
    }
}

我们不希望允许CitySeattle的行的版本。 edit处理程序应定义为:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : true,
    edit      : function (e) {
       // e.model contains the model corresponding to the row that is being edited.
        var data = e.model;
        if (data.City === "Seattle") {
            // Close the cell (exit edition mode)
           this.closeCell();
        }
        e.preventDefault();
    },
    pageable  : true,
    columns   :
            [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" },
                { field: "City", width: 100 }
            ]
}).data("kendoGrid");

问题是在单元格实际处于编辑模式后调用edit处理程序,因此关闭可能会产生一些闪烁,但在大多数情况下它应该可以工作。

第二个选项是将网格定义为不可编辑的,如果条件为真,则手动调用editCell

在这种情况下,您将grid定义为:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
            [
                { field: "FirstName", width: 90, title: "First Name" },
                { field: "LastName", width: 90, title: "Last Name" },
                { field: "City", width: 100 }
            ]
}).data("kendoGrid");

然后为单元格定义click处理程序:

grid.tbody.on("click", "td", function (e) {
    // Close any possible cell already in edit mode
    grid.closeCell();
    // Find data corresponding to clicked cell
    var data = grid.dataItem($(e.target).closest("tr"));
    // Check condition
    if (data.City !== "Seattle") {
        // Enter edition mode
        grid.editCell(e.target);
    }
});

我检索与所单击的表格单元格对应的data的{​​{1}}并检查条件。如果条件匹配,那么我打开单元格。

尽管没有闪烁,但这不是我的首选,因为您需要小心触发row来保存单元格,尽管您说网格不可编辑,但您正在编辑它。

在此处运行第一个实施的示例:http://jsfiddle.net/OnaBai/NWw7T/ 而对于第二个:http://jsfiddle.net/OnaBai/NWw7T/1/

对于“incell”以外的版本模式,最简单的实现相同功能的是创建自定义版本按钮,该按钮控制行是否应该进入编辑模式。

答案 1 :(得分:0)

对我来说,我想阻止用户在尝试添加新行时双击其他行。例如,考虑以下代码:

var IDS = {
    myGrid: "#my-grid",

    addRowBtn: "#add-btn",
    deleteRowBtn: "#delete-btn",
    saveRowBtn: "#save-btn",
    cancelRowBtn: "#cancel-btn",
};

var Grids = {
    MyGrid: null,
    //...
};

然后在初始化函数中,我创建一个事件处理程序来响应双击事件:

function initMyGrid() {
    $(IDS.myGrid).kendoGrid({
        selectable: true,
        scrolable: true,
        sortable: false,
        columns: [
            { field: "FirstName", title: "First Name", width: "20%", attributes: { tabindex: "1" } },
            { field: "LastName", title: "Last Name", width: "60%", attributes: { tabindex: "2" } }
        ]
    });
    //...
    Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
        Grids.MyGrid.editCell($(this));
    });
}

然后我在PageState中创建了一个值来测试:

var PageState = {
    // ...
    AddingRow: false
};

因此,当用户点击按钮添加新行时,我阻止他们点击以编辑任何其他行:

function addNewRow() {
    PageState.AddingRow = true;

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
        if (PageState.Selected.RowId != null && PageState.Selected.RowId != "") {
            Grids.RulesGrid.closeCell();
        }
    });
    // ...
}

此外,每当用户保存行或取消添加新行时,我都会重新启用双击事件:

function saveRow() {
    PageState.AddingRow = false;

    // Allow user to edit other records now
    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
        Grids.MyGrid.editCell($(this));
    });
    // ...
}

HTH。