Kendo Grid Not working as expected

Question

Here is my Kendo Grid Code. My first issue is if Click on edit, name field which I make editable: false not working. It is giving textbox.

My second issue is, I want to give dropdown for age. How can I do this ?

 $("#grid").kendoGrid({
    columns: [
       { field: "id", hidden: true },
      { field: "name", title: "Name" },
      { field: "age", title: "Age" },
        { command: ["edit"] }
    ],
    editable: "inline",
    dataSource: [
       { id: "1", name: "Andrew", age: "30" },
       { id: "2", name: "Robert", age: "29" },
       { id: "3", name: "Frank", age: "35" }
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                id: { editable: false },
                name: { editable: false },
                age: { editable: true }
            }
        }
    },
});

@MikeDebela Editable inline gives you the option to edit in the grid row and that is what I need. but for age I want to give dropdown — Chatra
here is link for reference: demos.telerik.com/kendo-ui/grid/editing-custom — Brett Caswell

Brett Caswell Brett Caswell · Accepted Answer · 2015-03-03T17:08:26

Here is the full code sample.

var dataSource = new kendo.data.DataSource({
                       pageSize: 20,
                       data: [
                         { id: "1", name: "Andrew", age: "30" },
                         { id: "2", name: "Robert", age: "29" },
                         { id: "3", name: "Frank", age: "35" }
                       ],
                       autoSync: true,
                       schema: {
                           model: {
                             id: "id",
                             fields: {
                                id: { editable: false, nullable: true, type: "number" },
                                name: { editable: false },
                                age: { 
                                    validation: { min: 0, required: true },
                                    editable: true, 
                                    nullable: true,
                                    type: "number"
                                }
                             }
                           }
                       }
                    });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        editable: "inline",
                        columns: [
                            { field: "name",title: "Name" },
                            { field: "age", title: "Age", width: "180px"},
                            { command: ["edit"] }
                        ]
                    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="Stylesheet" />



<div id="grid"></div>

Kendo Grid Not working as expected

1 Answers