防止在kendo网格中编辑一行?

时间:2013-04-09 04:15:37

标签: javascript jquery html kendo-ui kendo-grid

我正在使用kendo网格,在编辑一行时,我正在检查该行是否可编辑。如果不可编辑,如何使所选行不可编辑。我正在edit函数中进行检查网格。

代码

$("#grid").kendoGrid({
    dataSource : ds,
    selectable : "multiple",
    sortable   : true,
    filterable : false,
    reorderable: true,
    scrollable : false,
    toolbar    : ["create"],
    columns: [
                { field: "event", width: "120px", title: "Event Type"},
                { field: "event_id", width: "120px", title: "Event ID"},
                { field: "addr_no_or_type", width: "120px", title:"Address"},
                { field: "event_rate", width: "100px", title: "Rate"},
                { field: "sched_date", width: "100px", title: "Scheduled"},
                { field: "complete_date", width: "100px", title:"Completed"},
                { field: "serial_no", width: "100px", title: "Serial #"},
                { command: ["edit", "destroy"], title: "Options", width: "170px"}
            ],
    editable: "inline",
    edit    : function(e){
        selectedRowIndex        =   $("#grid").data("kendoGrid").select().index();
        if (selectedRowIndex >= 0) {
            var grid            =   $("#grid").data("kendoGrid");
            var selectedItem    =   grid.dataItem(grid.select());
            var slno            =   selectedItem.serial_no;
            if(slno!=0){
                grid.cancelRow();
            }
        }
    }
});

但是当我使用它时,我在控制台中收到以下错误。

Uncaught TypeError: Cannot call method 'delegate' of null 

有人可以建议一种方法来解决它。谢谢。

3 个答案:

答案 0 :(得分:6)

在目前的情况下,我建议使用dataBound事件迭代dataSource view数据并检查当前记录是否满足给定条件以禁用它的编辑按钮:

function onDataBound(e) {
    //this solution makes all rows editable / not editable initially
    var grid = e.sender;
    var data = grid.dataSource.view();

    for (var i = 0; i < data.length; i++) {
        //check your custom condition
        if (data[i].OrderID % 2 == 0) {
            var editButton = grid.tbody.find("tr[data-uid='" + data[i].uid + "'] .k-grid-edit");
            editButton.addClass("k-state-disabled").removeClass("k-grid-edit");
            //or
            //grid.tbody.find("tr[data-uid='" + data[i].uid + "'] .k-grid-edit").remove();
        }
    }
}

答案 1 :(得分:0)

同意,即使我通过Change事件实现了行禁用功能。这是代码:

 function onRowSelect(val) {
    var curCell = $("#abc").find(".k-state-selected");
    if (curCell[0].innerText.indexOf('ABCD')>-1) {
        curCell[0].disabled = true;
    }

...


@(Html.Kendo().Grid<xyz>()
.Name("abc")  
.Selectable()   
.Events(e=>e.Change("onRowSelect"))

答案 2 :(得分:0)

function onGridCellEdit(e) {

    this.closeCell();
}

在编辑该行时将调用此函数,一旦该函数被点击,将不允许更改。