Why isnt the Kendo Grid inline editable? - angularjs

Question

I have a Kendo grid in html as follows:
<div
kendo-grid="grid"
k-options="gridOptions"
k-data-source="gridData"
k-selectable="true"
k-columns="gridColumns"
k-editable="editableOptions">
</div>
The Angular back end is:
$scope.gridData = new kendo.data.DataSource({
data: $scope.users, <-- the data binds correctly in the grid
editable: {
createAt: "bottom"
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string", visible: true },
Name: { type: "string", editable: true }
}
}
},
sort: [
{ field: "Name", dir: "asc" }
],
pageSize: 15,
editable: true
});
$scope.gridOptions = {
};
$scope.gridColumns = [
{ field: 'Name', title: 'First Name', width: 60 },
{ field: 'Id', title: ' ', width: 120 },
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
];
$scope.editableOptions = "inline";
So the User Data Load correctly with 5 rows, but there should be an extra row at the bottom for adding a new user via the line
editable: {
createAt: "bottom"
},
but this is not being created when the grid loads.
Also, they should be able to delete via the following command
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
but this is also not being displayed.
What am I missing here?

Answer 1

make the row editable when clicking on the edit button:
Define editable once, like this:
editable: {
mode: "inline" ,
createAt: "bottom"
},
Your command:
{
command: ["edit","destroy"]
}
and also add toolbar for create:
toolbar: ["create"]
Here is a sample : Sample Dojo
make it editable once click in the cell:
editable:
editable: {
createAt: "bottom"
},
command:
{
command: ["destroy"]
}
toolbar:
toolbar: ["create", "save", "cancel"],
and also in your dataSource set batch: true
Here is a sample: Sample Dojo