Kendo只编辑一列网格

时间:2015-02-26 09:52:59

标签: jquery kendo-ui kendo-grid

我在Javascript UI中有一个kendoGrid(),其配置参数为“editable:true”。可以设置只能编辑我网格的特定列吗?

我尝试两种方式,首先:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { field: "age" }
        ],
        filterable: {
            mode: "row"
        },
        editable: true,
        dataSource: [{ id: 1, name: "Jane", age: 30 }, { id: 2, name: "John", age: 33 }],
        schema: {
            model: {
                id: "id",
                fields: {
                    name: { editable: true },
                    age: { editable: false }
                }
            }
        }
    });
</script>

第二种方式:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [
          { field: "name", editable: false },
          { field: "age" editable: true }
        ],
        filterable: {
            mode: "row"
        },
        editable: true,
        dataSource: [{ id: 1, name: "Jane", age: 30 }, { id: 2, name: "John", age: 33 }],
    });
</script>

但是不起作用。


我可以使用MVC View Helper:

@(Html.Kendo().Grid((List<TestGrid>)Model.innerElements)
            .Name("gridTest")
            .Columns(column =>
            {
                column.Bound(dataGrid => dataGrid.id).Width("50%");
                column.Bound(dataGrid => dataGrid.name).Width("50%");
            })
                .Filterable(filterable => filterable
                .Mode(GridFilterMode.Row)
                )
            .Sortable()
            .Pageable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .DataSource(data => data
                .Ajax()
                    .Model(model =>
                    {
                        model.Id(m => m.id);
                        model.Field(field => field.id).Editable(false);
                        model.Field(field => field.name).Editable(true);
                    })
                .Update(update => update.Action("gridTest_Update","Home"))
                .PageSize(10)
                )
    )

但我无法在JQuery中重现。

1 个答案:

答案 0 :(得分:3)

schema.model是DataSource定义的一部分,您将在外部定义它。

你的方法1说:

    dataSource: [
        { id: 1, name: "Jane", age: 30 }, 
        { id: 2, name: "John", age: 33 }
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                name: { editable: true },
                age: { editable: false }
            }
        }
    }

应该是:

    dataSource: {
        data: [
            { id: 1, name: "Jane", age: 30 }, 
            { id: 2, name: "John", age: 33 }
        ],
        schema: {
            model: {
                id: "id",
                fields: {
                    name: { editable: true },
                    age: { editable: false }
            }
        }
    }

在此处查看:http://dojo.telerik.com/@OnaBai/iMEdE

关于实现2,我在Grid的文档中看不到列有editable属性的列。