Kendo UI & Angularjs: make grid inline editable

Question

i've integrated kendo ui in angularjs following this guide: Angular Kendo UI

Now i'd like to make my grid inline editable. In the angularjs controller i have:

gestionale.controller('mainController', function ($scope, $http) {

   $scope.products = new kendo.data.DataSource({
       transport: {
           read: {
               url: "api/Personale",
               dataType: "json"
           }
       },
   });
});

In the HTML page:

<div kendo-grid k-data-source="products" k-selectable="'row'" k-sortable="true" k-toolbar ='["create"]'
     k-columns='[
{ "field": "Nome", "title": "Nome"},
{ "field": "Cognome", "title": "Cognome"},
{ "field": "Cellulare", "title": "Cellulare" },
{ command: ["edit", "destroy"], title: "", width: "172px" }
 ]' k-editable="inline" style="height: 365px">
</div>

With this code the grid is correctly populated and i can see the edit and delete button but, when i click on the edit button, the row doesn't go in inline editing mode (when i click on the edit button there is a refresh of the page).

How can i get the inline editing mode? Thanks

Iman Mahmoudinasab Iman Mahmoudinasab · Accepted Answer · 2014-04-29T15:23:36

This is how you should define k-editable :

<div kendo-grid k-data-source="products" k-selectable="'row'" k-sortable="true" k-toolbar ='["create"]'
     k-columns='[
{ "field": "Nome", "title": "Nome"},
{ "field": "Cognome", "title": "Cognome"},
{ "field": "Cellulare", "title": "Cellulare" },
{ command: ["edit", "destroy"], title: "", width: "172px" }
 ]' k-editable='{"mode": "inline", "create": true, "update": false, "destroy": true}' style="height: 365px">
</div>

Kendo UI & Angularjs: make grid inline editable

1 Answers