Rilevamento di errori lato server durante la modifica o la creazione di voci Kendo Grid

Question

Ho una griglia Kendo modificabile per gestire (creare/modificare) account utente. L'editing è fatto in un popup (rispetto a linea o batch). Dispongo della convalida sul lato client per garantire che vengano forniti dati validi al server, tuttavia non riesco a capire come gestire la risposta dal server nel caso in cui la creazione/l'aggiornamento non riesca dal lato server. Non sto parlando di "fallito", come nella richiesta fallita con un HTTP 404 o 500, per esempio; Sto parlando fallito visto che nello script sul server non è piaciuto qualcosa sui dati e si rifiuta di obbligare.

Qualcuno può, per favore, mostrarmi come posso farlo? Quello che vorrei essere in grado di fare è dopo che l'aggiornamento è stato inviato al server, attendere la risposta. Se la risposta dice che tutto va bene, allora è grandioso. Se la risposta dice che qualcosa non andava così bene, mi piacerebbe essere in grado di (A) mantenere la finestra di modifica dei popup aperta e popolata e (B) fornire un feedback all'utente riguardo al motivo del rifiuto. I dati non dovrebbero essere impegnati nella rete a meno che la risposta non dica che tutto è OK. Allo stesso modo, il popup di modifica dovrebbe rimanere aperto finché il server non dice OK.

Sono flessibile con il modo in cui la risposta del server deve essere formattata, a patto che riesca a ottenere ciò che voglio.

Prima di indirizzarmi alla documentazione dell'API ufficiale di Kendo, ne sono già a conoscenza e ci rimando quotidianamente. Tuttavia, per usare un eufemismo, è incompleto e non riesco a trovare nulla relativo a questo argomento. Se hai trovato qualcosa nella documentazione che pensi possa aiutarmi, indica con la documentazione =)

Come richiesto, di seguito è riportato il codice che ho per creare la griglia.

$("#kendo_user_grid").kendoGrid({ 
    columns: [{ 
     title: "Last name", 
     field: "lName" 
    },{ 
     title: "First name", 
     field: "fName" 
    },{ 
     title: "Business unit", 
     field: "businessUnit" 
    },{ 
     title: "Username", 
     field: "loginId" 
    },{ 
     title: "Email address", 
     field: "email" 
    },{ 
     title: "Phone", 
     field: "phone" 
    },{ 
     title: "Address", 
     field: "address" 
    },{ 
     title: "City", 
     field: "city" 
    },{ 
     title: "State", 
     field: "state" 
    },{ 
     title: "Zip code", 
     field: "zipcode" 
    },{ 
     title: "Country", 
     field: "country" 
    },{ 
     title: "Time zone", 
     field: "timezone" 
    },{ 
     title: "Privileges", 
     field: "privs" 
    },{ 
     command: ["edit","destroy"], 
     title: " " 
    }], 
    scrollable: false, 
    dataSource: { 
     transport: { 
      read: { 
       url: "manageUsers.phtml", 
       data: { mode: "fetch" }, 
       dataType: "json", 
       type: "POST" 
      }, 
      update: { 
       url: "manageUsers.phtml", 
       data: { mode: "update" }, 
       type: "POST" 
      }, 
      destroy: { 
       url: "manageUsers.phtml", 
       data: { mode: "destroy" }, 
       type: "POST" 
      }, 
      create: { 
       url: "manageUsers.phtml", 
       data: { mode: "create" }, 
       type: "POST" 
      }, 
      batch: false 
     }, 
     schema: { 
      data: "records", 
      total: "total", 
      model: { 
       id: "userId", 
       fields: { 
        userId: { editable: false, nullable: true }, 
        lName: { type: "string", editable: true, validation: { required: true } }, 
        fName: { type: "string", editable: true, validation: { required: true } }, 
        businessUnit: { type: "string", editable: true, validation: { required: true } }, 
        loginId: { type: "string", validation: { required: true } }, 
        email: { type: "string", validation: { required: true } }, 
        phone: { type: "string" }, 
        address: { type: "string" }, 
        city: { type: "string" }, 
        state: { type: "string" }, 
        zipcode: { type: "string" }, 
        country: { type: "string" }, 
        timezone: { type: "string" }, 
        privs: { type: "string" } 
       } 
      } 
     }, 
     pageSize: 20, 
     serverPaging: false, 
     serverFiltering: false, 
     serverSorting: false 
    }, 
    filterable: true, 
    sortable: true, 
    pageable: true, 
    editable: { 
     mode: "popup", 
     template: kendo.template($("#kendo_edit_user_template").html()) 
    }, 
    toolbar: ["create","save","cancel"] 
}); 

Answer 1

ci sono due punti da tenere a mente:

1. Schema.errors il campo dalla risposta del server che contiene gli errori sul lato server.
2. error è un evento che sarà licenziato se c'è stato un errore.

Fondamentalmente è necessario:

1. aggiungere al vostro schema di una definizione di errors che fornisce l'accesso allo stato rispedito dal server.
2. Implementare error gestore di eventi che, per esempio, ripristinare il valore precedente.

Se il server restituisce il messaggio di errore in un campo chiamato myError allora si avrebbe qualcosa come:

schema: { 
    errors: "myError", 
    data: "records", 
    total: "total", 
    model: { 
     id: "userId", 
     fields: { 
      userId: { editable: false, nullable: true }, 
      lName: { type: "string", editable: true, validation: { required: true } }, 
      fName: { type: "string", editable: true, validation: { required: true } }, 
    ... 

o:

schema: { 
    errors: function(response) { 
     if (response.myError && response.myError !== "OK") { 
      return response.myError; 
     } 
     return false; 
    }, 
    data: "records", 
    total: "total", 
    model: { 
     id: "userId", 
     fields: { 
      userId: { editable: false, nullable: true }, 
      lName: { type: "string", editable: true, validation: { required: true } }, 
      fName: { type: "string", editable: true, validation: { required: true } }, 
    ... 

e l'evento potrebbe essere:

dataSource: { 
    error : function (e) { 
     if (e.errors !== false) { 
      alert("Error: " + e.errors); 
      // This will cancel any change done 
      this.cancelChanges(); 
     } 
    }, 
    transport: { 
     read: { 
      url: "manageUsers.phtml", 
      data: { mode: "fetch" }, 
      dataType: "json", 
      type: "POST" 
     }, 

EDIT: Se quello che vuoi è quello di mantenere il popup aperto si dovrebbe fare:

dataSource: { 
    error : function (e) { 
     if (e.errors !== false) { 
      alert("Error: " + e.errors); 
      // This will keep the popup open 
      grid.one("dataBinding", function (e) { 
       e.preventDefault(); // cancel grid rebind 
      }); 
     } 
    }, 
    transport: { 
     read: { 
      url: "manageUsers.phtml", 
      data: { mode: "fetch" }, 
      dataType: "json", 
      type: "POST" 
     }, 

Dove mi legano a caso l'associazione dati una sola volta utilizzando jQuery.one