Reputation: 3139
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 }
}
}
},
});
Upvotes: 0
Views: 612
Reputation: 730
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>
Upvotes: 1