Disable KendoGrid editing

最新推荐文章于 2024-09-01 10:38:35 发布

chelen_jak

最新推荐文章于 2024-09-01 10:38:35 发布

阅读量1.4k

点赞数

分类专栏： Kendo

本文链接：https://blog.youkuaiyun.com/chelen_jak/article/details/78854652

版权

Kendo 专栏收录该内容

71 篇文章

订阅专栏

本文介绍如何在KendoGrid中禁用整个表格或特定列的编辑功能，包括通过JavaScript设置不可编辑属性，并提供示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、禁止整个KendoGrid编辑

将grid 转成kendo widgetInstance, 然后将属性editabled 设为 false

var $girdEles = $("#grid");
//设置grid的不可修改  
for (var i = 0; i < $girdEles.length; i++) {
    var $ele = $($girdEles[i]),
        widget = kendo.widgetInstance($ele);    //将元素转换成kendo实例  


    if (widget) {
        widget.setOptions({
            editable: false
        });
    }
}

// 隱藏Toolbar
//$("#grid .k-grid-toolbar").hide();

//屏蔽Button組件  
$("#grid .k-grid-toolbar .k-button").each(function () {
    $(this).addClass("k-state-disabled").attr("disabled", "disabled").removeAttr("onclick");
});

二、禁止某列(Column)编辑
可以参考这里的做法 Disable editing in kendo grid 演示例子
html

<a href="#" id="button1" class="k-button">Disable Firstname</a>
<a href="#" id="button2" class="k-button">Enable Firstname</a>
<div id="grid"></div>

var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(50),
        pageSize: 10,
        schema  : {
            model: {
                fields: {
                    id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' },
                    City     : { type: 'string' },
                    Title    : { type: 'string' },
                    BirthDate: { type: 'date' },
                    Age      : { type: 'number' }
                }
            }
        }
    },
    editable  : "incell",
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        {
            field: "FirstName",
            width: 90,
            title: "First Name"
        } ,
        {
            field: "LastName",
            width: 90,
            title: "Last Name"
        } ,
        {
            width: 100,
            field: "City"
        } ,
        {
            field: "Title"
        } ,
        {
            field   : "BirthDate",
            title   : "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        } ,
        {
            width: 50,
            field: "Age"
        }
    ]
}).data("kendoGrid");
$("#button1").on("click", function (e) {
    var data = grid.dataSource.at(0);
    console.log("data", data);
    data.fields["FirstName"].editable = false;
});
$("#button2").on("click", function (e) {
    var data = grid.dataSource.at(0);
    data.fields["FirstName"].editable = true;
});

效果图：