Kendo UI Grid Save on Cell Blur

Question

Sto cercando di ottenere la mia griglia per salvare le modifiche quando si preme invio o spostamento di una cella (sfocatura) e non è necessario utilizzare un pulsante di salvataggio in una barra degli strumenti della griglia.

Ho problemi a farlo funzionare correttamente, il mio PHP/SQL funziona bene, quindi sono sicuro che sia qualcosa di sbagliato nella griglia.

Qui è il mio codice:

$("#grid").kendoGrid({ 
dataSource: { 
    transport: { 
     read: WEBROOT+"admin/fetch-toppers", 
     update: { 
      url: WEBROOT+"admin/update-topper", 
      type: "POST" 
     } 
    }, 
    error: function(e) 
    { 
     alert(e.responseText); 
    }, 
    schema: { 
     data: "data", 
     model: { 
      id: 'id', 
      fields: { 
       "id": {nullable: true}, 
       "Date": {editable: false}, 
       "name": {editable: false}, 
       "price": {editable: true} 
      } 
     } 
    } 
}, 
columns: [{field: "Date", width: 105}, {field: "name", title: "Topper"}, {field: "price", title: "Price", width: 125}], 
height: 550, 
filterable: true, 
sortable: true, 
pageable: true, 
editable: true, 
navigatable: true, 
edit: function() 
{ 
    //this.saveChanges() 
} 
}); 

Ho provato molte cose e diversi eventi, ma non ha alcun effetto.

Come posso ottenerlo per salvare i valori delle celle sulla sfocatura?

Answer 1

Nel vostro DataSource aggiunge:

change: function (e) { 
         if (e.action == "itemchange") { 
          this.sync(); 
         } 
        }, 

dovrebbe apparire come:

dataSource: { 
transport: { 
    read: WEBROOT+"admin/fetch-toppers", 
    update: { 
     url: WEBROOT+"admin/update-topper", 
     type: "POST" 
    } 
}, 
error: function(e) 
{ 
    alert(e.responseText); 
}, 
change: function (e) { 
         if (e.action == "itemchange") { 
          this.sync(); 
         } 
}, 
schema: { 
    data: "data", 
    model: { 
     id: 'id', 
     fields: { 
      "id": {nullable: true}, 
      "Date": {editable: false}, 
      "name": {editable: false}, 
      "price": {editable: true} 
     } 
    } 
} 

},

Answer 2

Si potrebbe cercare di utilizzare l'evento change del DataSource per eseguire il metodo sync del dataSource.

$("#grid").kendoGrid({ 
dataSource: { 
    transport: { 
     read: WEBROOT+"admin/fetch-toppers", 
     update: { 
      url: WEBROOT+"admin/update-topper", 
      type: "POST" 
     } 
    }, 
    change:function(){this.sync()}, 
    error: function(e) 
    { 
     alert(e.responseText); 
    }, 
    schema: { 
     data: "data", 
     model: { 
      id: 'id', 
      fields: { 
       "id": {nullable: true}, 
       "Date": {editable: false}, 
       "name": {editable: false}, 
       "price": {editable: true} 
      } 
     } 
    } 
}, 
columns: [{field: "Date", width: 105}, {field: "name", title: "Topper"}, {field: "price", title: "Price", width: 125}], 
height: 550, 
filterable: true, 
sortable: true, 
pageable: true, 
editable: true, 
navigatable: true, 
edit: function() 
{ 
    //this.saveChanges() 
} 
}); 

Answer 3

È possibile anche chiamare lo sync origine dati proprio dalla rete come segue (assicurati di utilizzare setTimeout, come per Telerik in questo post) ...

save: function() { 
    setTimeout(function() { 
      yourDatasource.sync(); 
    } 
}