2

Super easy concept !...

At some point, my editable grid, (and detail grids), must be set to read only... so i would like to do something like:

var grid = $("#grid").data("kendoGrid");
grid.options.editable = false;

Of course this doesn't work as it would be too simple...

Thanks for any help !

4

2 回答 2

4

我建议你有两个网格：一个是只读的，一个是读写的，但只有一个是可见的。两者共享 DataSource 定义，因此它们始终保持同步。当您想从一个更改为另一个时，您隐藏可见并显示另一个。

示例：我创建了两个网格，定义完全相同，不同之处在于一个是隐藏的，一个是可见的，一个是可编辑的，一个是不可编辑的。由于两者共享相同的数据源，它实际上非常完美，因为在一个页面中更改页面会更改另一个页面，编辑一个页面，更新另一个页面。

就像是：

1- 用于切换可见性的 CSS 定义：

.ob-hide {
    display : none;
}

2- 数据源定义：

var ds = new kendo.data.DataSource({
    transport : {
        read : {
            url: ...
        },
        update : {
            url: ...
        },
        create : {
            url: ...
        },
        destroy : {
            url: ...
        }
    },
    pageSize: 10,
    schema  : {
        model: {
            id : ...,
            fields: {
                id       : { type: '...' },
                ...
            }
        }
    }
});

接下来是两个网格：

$("#grid-editable").kendoGrid({
    editable: "inline",
    dataSource : ds,
    ...
}

$("#grid-not-editable").kendoGrid({
    editable: false,
    dataSource: ds,
    ...
});

$("#grid-editable").addClass("ob-hide");

最后是切换模式的功能：

function gridEditable() {
    $("#grid-editable").removeClass("ob-hide");
    $("#grid-not-editable").addClass("ob-hide");
});

function gridNotEditable() {
    $("#grid-editable").addClass("ob-hide");
    $("#grid-not-editable").removeClass("ob-hide");
});

看到它在这里运行：http: //jsfiddle.net/OnaBai/bCEJR/2/

于 2013-08-01T07:17:41.157 回答
0

disabled="disabled"通过添加所需的元素，我设计了一种更好的风格。将Angular JS与kendo一起使用，就像一个魅力，因为将网格设置为禁用不允许用户对其进行编辑。试试看，也可以在没有角度的情况下工作！

于 2014-05-26T09:54:38.010 回答