Kendo Grid non aggiorna la griglia con l'ID appena creato dopo la creazione

Question

Sto provando a costruire una griglia Kendo CRUD molto semplice con una tabella che ha solo due colonne: ID e Nome. Ho configurato la griglia con paginazione server e filtraggio server.

Tutto sembra funzionare come previsto ma dopo la creazione del nuovo record, la griglia mostra il nuovo record ma senza campo ID. Alla creazione, la richiesta ha un ID null ma sto inviando il valore di id e l'oggetto completo dopo la creazione. Nelle griglie di esempio, la griglia viene aggiornata con nuovi valori. Cosa devo modificare/aggiungere per garantire che l'ID del record appena creato venga visualizzato anche in Grid?

In seguito è la JSP:

 <script> 


     $(function() { 
      var dataSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url:"http://localhost:8181/baseweb/countrylist", 
         dataType: "jsonp" 
        }, 
        update: { 
         url: "http://localhost:8181/baseweb/countryupdate", 
         dataType: "jsonp" 
        },  
        destroy: { 
         url: "http://localhost:8181/baseweb/countrydelete", 
         dataType: "jsonp" 
        }, 
        create: { 
         url: "http://localhost:8181/baseweb/countrycreate", 
         dataType: "jsonp" 
        },       
        parameterMap: function(data, operation) { 
         if (operation !== "read" && data.models) { 
          return {grid_options: kendo.stringify(data.models)}; 
         } 
         return {grid_options: kendo.stringify(data)}; 
        }      
       }, 
       serverPaging: true, 
       serverFiltering: true, 
       pageSize: 10, 
       schema: { 
        data: "data",   
        total: "total",      
        model: { 
         id: "id", 
         fields: { 
          id: { editable: false, nullable: true }, 
          name: { validation: { required: true } }         
         } 

        } 
       }     
     }); 

      $("#grid").kendoGrid({ 
       dataSource: dataSource, 
       pageable: true, 
       filterable: true, 
       height: 400, 
       toolbar: ["create"],      
       columns: [ 
          { field: "id", title:"Identification"}, 
          { field: "name", title:"Country Name" }, 
          { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" } 
          ], 
       editable: "popup"   
      }); 
     }); 

    </script> 

parametri inviati al server su Crea: _ 1380846899054 callback jQuery19108827040256333442_1380846899052 grid_options { "id": null, "name": "testing"}

Parametro rimandato dal server come risposta: jQuery19108827040256333442_1380846899052 ([{ "id": "4028828f4180d64a014180e3bda20002", "name": "test"}])

Mi aspetto che l'ID restituito dal server debba essere visualizzato nella griglia. Ho cercato questo forum, la documentazione di Kendo e Google per una risposta, ma non sono in grado di trovare una soluzione.

Cosa mi manca?

---

Aggiornamento con la soluzione:

Jack's answer fornito l'indizio per trovare la soluzione. Stavo facendo due errori:

a. Il callback in Kendo Grid sembra aspettarsi i dati in un attributo "data:". Non stavo nominando il risultato come "dati:" nella mia risposta. b. Il callback prevede inoltre un JSONArray di oggetti nell'attributo data:. Stavo inviando un oggetto JSONO poiché stavo creando un solo oggetto.

Dopo aver modificato la risposta per includere dati: attributo e JSONArray, funziona perfettamente. Il parametro di richiesta da parte del cliente si presenta così:

_ 1386350196768 
callback jQuery19101285024500179227_1386350196765 
grid_options {"id":null,"name":"Ghana"} 

La risposta a cura assomiglia a questo:

jQuery19101285024500179227_1386350196765({"data":[{"id":"2c9323ca42c8df630142c944450b0002","name":"Ghana"}]}) 

Speranza che aiuta qualcun altro in quanto questo non è chiaramente documentato nella documentazione ufficiale.

Answer 1

Ho avuto lo stesso problema e penso di aver trovato la risposta. Se nello schema si definisce l'oggetto che contiene i risultati, è necessario restituire il risultato del collegamento creato nello stesso oggetto. Esempio:

metodo

schema: { 
     data: "data",   
     total: "total", .... 
} 

Esempio MVC:

public JsonResult CreateNewRow(RowModel rowModel) 
{ 
    // rowModel.id will be defaulted to 0 

    // save row to server and get new id back 
    var newId = SaveRowToServer(rowModel); 

    // set new id to model 
    rowModel.id = newId; 

    return Json(new {data= new[] {rowModel}}); 
} 

Answer 2

C'è un bel modo pulito di fare questo ...

Se la griglia viene creato in blocco di script:

dataSource: { 
    transport: { 
     read: { 
      url: "..." 
     }, 
     create: { 
      url: "...", 
      type: "POST", 
      complete: function(e) { 
       $("#grid").data("kendoGrid").dataSource.read(); 
     } 
    }, 
}... 

O in HTML

@(Html.Kendo().Grid<ViewModel>() 
    .Name("grid") 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(10) 
     .Model(model => 
     { 
      model.Id(i => i.Cde); 
      model.Field(i => i.Description).Editable(true); 
     }) 
     .Read(read => read.Action("EditingInline_Read", "UserGroups")) 
     .Update(update => update.Action("EditingInline_Update", "UserGroups")).Read("EditingInline_Read", "UserGroups") 
     .Destroy(delete => delete.Action("EditingInline_Delete", "UserGroups")) 
     .Create(create => create.Action("EditingInline_Create", "UserGroups")).Read("EditingInline_Read", "UserGroups") 
    ) 
    .Columns(columns => 
    { 
     columns.Bound(s => s.Decription); 
     columns.Bound(s => s.enabled); 
     columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); 
    }) 
    .Pageable() 
    .Sortable() 
    .Selectable(selectable => selectable 
     .Mode(GridSelectionMode.Single)) 
    .ToolBar(toolbar => toolbar.Create())) 

Scopri i chiamate CRUD, più specifici, Update e Crea.