How vpGrid handles CRUD operations with Server

 The CRUD urls to be called are configured within the options object passed to the vpGrid.init method:

crudOptions: {
read: "MockRequests/GetDataN.html",
insert: "MockRequests/insert1.html",
update: "MockRequests/update1.html",
'delete': "MockRequests/delete1.html",
update2: "MockRequests/update2.html"
}

More than one url can be defined for the insert/update and delete operations : vpGrid enables to handle business cases where a row is the agregation of different data coming from different tables or databases, so when the user updates a specific cell in a row, the crud operation can target a different table/database than other cells in the same row.

Whatever the CRUD operations you are doing, vpGrid expect the HTTP Server response to be in JSON format.

The response object sent back by the server must be a Json-serialised-literal object with the following signature:

response = {
done,
errorMessage,
customMessage, data }

response.done may be true or false. If response.done is false, this means an error occured on server side. In this case, the server should setup the errorMessage property.

When reposnse.data is null or empty, the customMessage will be displayed within the grid to explain why no data has been sent : for example if two many items are requested, the server can decide to send a response like :

 

response = {done : true, customMessage : "Tow many items requested ( 1500000 items). Please refine your filters.", data : []}

 

Json response for a Read operation :

{    
"done" : true,   
"errorMessage" : "",   
"data": 
[
{"col1Name":"xxx","col2Name":"yyy", ...,"isDeletable":true, "isUpdatable":true},
            {"col1Name":"zzz","col2Name":"ttt", ...,"isDeletable":true, "isUpdatable":true}
          ]
}

vpGrid offers a mechanism to protect any row from being deleted or updated. To make a row undeletable, the server just sets the isDeletable property to false. To make a row read-only, the server just sets the isUpdatable property to false. 

If response.done is true, the response.data object must be an array of 0 to N literal objects. Each element in this array represents a row in the grid. Property names of these objects must match column names as defined by the data attribute data-vpgrid-column-name of the column definition. Every property that does not match a column name is ignored when rendering the object in the grid. 

Json response for an Insert operation :

{    
"done" : true,   
"errorMessage" : "",   
"data": 
{"col1Name":"xxx","col2Name":"yyy", ...,"isDeletable":true, "isUpdatable":true}
}

For an Insert operation the server must sent back the inserted entity with its new key (for example the primary key value when entity is store in a database) and any server-side updated properties. The new key will replace the temporary key generated by vpGrid to insert the item in the grid. Any vpGrid must define a hidden column to store the business entity key value. In the vpGrid Starter Project, this column is called remoteId and is defined like this in the Web page :

<th class="center"
data-vpgrid-column-name="remoteId"
data-vpgrid-column-type="key"
data-vpgrid-column-width="1"
data-vpgrid-column-hidden="true"
data-vpgrid-column-editable="false">Remote ID</th>

 To fit the above configuration the server response must be like :

{    
"done" : true,   
"errorMessage" : "",   
"data": 
{"remoteId":"717","col2Name":"yyy", ...,"isDeletable":true, "isUpdatable":true}
}

vpGrid will also automatically update any cell with the data sent back by the server. For example the server can decide to make the new entity undeletable due to some business rules and will sent back "isDeletable":false and  in its response. The server can also decide to make the entity read-only and will sent back "isUpdatabale":false in its response.

Json response for an Update operation :

{    
"done" : true,   
"errorMessage" : "",   
"data": 
{"col1Name":"xxx","col2Name":"yyy", ...,"isDeletable":true, "isUpdatable":true}
}

For an Update operation the server must sent back the updated entity with its key (for example the primary key value when entity is store in a database) and any server-side updated properties. Any vpGrid must define a hidden column to store the business entity key value. In the vpGrid Starter Project, this column is called remoteId and is defined like this in the Web page :

<th class="center"
data-vpgrid-column-name="remoteId"
data-vpgrid-column-type="key"
data-vpgrid-column-width="1"
data-vpgrid-column-hidden="true"
data-vpgrid-column-editable="false">Remote ID</th>

 To fit the above configuration the server response must be like :

{    
"done" : true,   
"errorMessage" : "",   
"data": 
{"remoteId":"717","col2Name":"yyy", ...,"isDeletable":true, "isUpdatable":true}
}

vpGrid will also automatically update any cell with the data sent back by the server. For example the server can decide to make the new entity undeletable due to some business rules and will sent back "isDeletable":false and  in its response. The server can also decide to make the entity read-only and will sent back "isUpdatabale":false in its response.

 

 

 

Last edited Nov 18, 2014 at 8:15 AM by HenridOrgeval, version 20