Modifier et enregistrer les modifications apportées à la source de données de la grille kendoUI

Question

J'ai une application ayant plusieurs onglets et j'ai une grille KendoUI placée dans l'un des onglets pour lesquels le code est dans le fichier .js. (c'est-à-dire que la vue a des balises div et que la balise div est rendue à la grille KendoUI dans le fichier .js). Sa source de données récupère les valeurs d'une classe écrite dans le fichier Model de l'application basée sur MVC. Je veux rendre la grille modifiable et enregistrer les modifications de façon asynchrone dans la source de données lorsque je passe à un autre onglet. Les pointeurs dans ce sens serait génial ...

Le fichier de vue de l'application MVC contient:

<div id="example" class="k-content"> 
      <div id="grid"></div> 

La balise div est rendu à la grille KendoUi dans un fichier .js. Le code est comme ci-dessous:

function createGrid() 
{ 
$("#grid").kendoGrid({ 
    dataSource: dataSource, 
    height: 430, 
    columns: [ 
    { field:"ProductName",title:"Product Name" }, 
    { field: "Category", title: "Category"}, 
    { field: "UnitPrice", title:"Unit Price" }, 
    editable: true 
}); 
} 
function createDataSource() 
{ 
    var dataSource = new kendo.data.DataSource({ 
    transport: { 
    read: { 
      url: BaseUrl + "/Products", //this is the action method in Controller which returns a list of Products which is hardcoded in this method itself. 
      dataType: "json" 
    }, 
    autoSync: true, 
    schema: { 
     model: { 
     id: "ProductID", 
     fields: { 
     ProductID: { editable: false, nullable: true }, 
     ProductName: { validation: { required: true } }, 
     Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} }, 
     UnitPrice: { type: "number", validation: { required: true, min: 1} } 
    } 
    } 
    } 
}); 
} 

Sur clic onglet/bouton les fonctions CreateDataSource() et createGrid() sont appelés. Je souhaite que les modifications apportées à cette grille modifiable soient enregistrées dans la source de données lorsque l'utilisateur clique sur un autre onglet.

Answer 1

La méthode sync de la source de données enregistre les modifications qui y ont été apportées en envoyant une demande au service distant. Vous devez l'appeler lorsque vous passez à un autre onglet.

Answer 2

Vous devez spécifier la méthode update sur votre objet de transport, comme ceci;

update: BaseUrl + "/UpdateProducts", 

ou si vous préférez;

update: { 
    url: BaseUrl + "/UpdateProducts" 
},