Kendo edit only a single column of grid

Question

I have a kendoGrid(), in Javascript UI with configuration parameter "editable: true". it's possible set editable only a specific column of my Grid?

i try two way, first:

<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>

Second way:

<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>

But doesn't work.

---

i can do with 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)
                )
    )

but i can't reproduce in JQuery.

Solution

schema.model is part of the DataSource definition and you are defining it outside.

Your method 1 says:

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

and it should be:

    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 }
            }
        }
    }

Check it here: http://dojo.telerik.com/@OnaBai/iMEdE

About implementation 2, I cannot see in Grid's documentation about column where do you have editable property.