In the last article we mentioned that:

Currently there are a large number of libraries that support the OData protocol, and new ones appear every day. In particular, JavaScript libraries such as Kendo UI , DevExtreme Web , Syncfusion HTML5 controls , Infragistics HTML5 controls , OpenUI5 , Wijmo , JayData , Breeze.js , datajs , ODataJS , angular-odata , etc. work with OData.

Many of these libraries greatly simplify the development of complex applications thanks to the OData standard. For example, it is sufficient for the grid control to specify the URL to the OData server and it will do everything else: paging, sorting, adding-modification-deleting records, filtering data, grouping, etc.

We have prepared examples of how grids work with OData.

• http://databoom.space/samples_kendo_ui_grid1.html - Kendo UI Grid.
• http://databoom.space/samples_kendo_ui_grid2.html - Kendo UI Grid with virtual scrolling instead of paging.
• http://databoom.space/samples_devexpress_grid.html - DevExtreme Data Grid.
• http://databoom.space/samples_syncfusion_grid.html - Syncfusion Grid.

Grid basic requests to the server:

• Get the total number of records that satisfy a certain condition.
• Get a selection of the total set of records to display on one page.
• Get the whole set of records.
• Sort entries by one or more fields.
• Filter entries by some set of conditions.
• Add a new entry.
• Modify entry.
• Delete entry.
• Batch update - add, change and delete a group of records.

Consider in more detail the basic requests for example

• Kendo UI Grid as a grid control (the rest grids work about the same)
• NitrosBase.js as an OData server

Grid setting

Grid communication is done via the Kendo DataSource component. In the example on the databoom.space/samples_kendo_ui_grid1.html page, the settings of the grid indicate the type of the OData protocol and the URL to the data set for reading the list of people.

dataSource: { type: "odata", transport: { read: "http://nitrosdata.com/service/testdb/person" }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true }, 

For more information about configuring the DataSource component, see the documentation: docs.telerik.com/kendo-ui/api/javascript/data/datasource
')

Request for data

To display a list of people, the grid adds various query conditions to the URL specified in the settings. To get the first page, the grid performs the following query:
https://samples.databoom.space/api1/sampledb/collections/person?$callback=jQuery19102346130800433457_1424080067186&$inlinecount=allpages&$format=json&$top=20

The main parameters of the request:

• $ callback = jQuery19102346130800433457_1424080067186 - indicates to the server that the data should be in JSONP format. The parameter value specifies the name of the function to which the result of the query should be wrapped.
• $ inlinecount = allpages - indicates to the server that the result should include the total number of records (to determine the number of pages)
• $ format = json - the result is required in JSON format (see also the $ callback parameter)
• $ top = 20 - you need to return no more than 20 entries for the first page.

To get the second page, the $ skip parameter is added:
https://samples.databoom.space/api1/sampledb/collections/person?$callback=jQuery19105304541746154428_1425304359212&$inlinecount=allpages&$format=json&$top=20&$skip=20

• $ skip = 20 - required to return the result, skipping the first 20 records.

Setting the grid for data modification

It is necessary to make a few additions to the grid allowed to modify the data.

1. Modify the datasource:
   Add a description of the operations in the transport variable
   

    transport: { read: "http://nitrosdata.com/service/testdb/person", create: {url: "http://nitrosdata.com/service/testdb/person"}, update: {url: "http://nitrosdata.com/service/testdb/person"}, destroy: {url: function (data) { return "http://nitrosdata.com/service/testdb/person(" + data.id + ")"; } } }, 

   
   Add id definition to the data schema description - this is necessary for the grid to correctly perform the operations of adding, modifying and deleting records
   

    schema: {model: {id: "id"}} 

   
   
2. Add properties to the grid options:
   

    editable: true, toolbar: ["create", "save", "cancel"], 

   
   

It is possible to configure the grid in a different way, even specifying the functions that are performed during data modification operations. For more information, see docs.telerik.com/kendo-ui/api/javascript/data/datasource

Adding record

When adding a new record, the grid sends a “PUT” request to the server using the URL specified for the “create” operation.
The request body will contain an entry in JSON format, for example:

 {id: "", firstname: "John", lastname: "Walker"} 

In response, the grid expects the contents of the same record with possible corrections made by the server.

Record modification

When modifying a record, the grid sends a “PUT” request to the server using the URL specified for the “update” operation.
Everything else works the same as when adding a new record.

Delete record

When deleting a record, the grid sends a “DELETE” request to the server using the URL specified for the “destroy” operation. The URL in this case indicates the desired entry that we want to delete.

Summary

Due to the fact that the OData protocol is a standard, various controls from different manufacturers can automatically form queries that meet the standard. In the Kendo UI Grid settings, it is enough to specify the necessary URL, and the grid will generate all the necessary requests automatically.

OData server NitrosBase.js allows you to accelerate the creation of prototypes of applications. You can put different controls on the form, specify the URL, and get a working application.

PS Not all controls support Odata, but their interaction with the server is very similar, differing only in the syntax of queries. NitrosBase.js is easily configured to use other APIs. Here is an example of the interaction of a known jqGrid control with NitrosBase.js: databoom.space/samples_jqgrid.html