March 2, 2015 at 21:25

How JavaScript Grid Works with OData

    In a previous 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, such libraries 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’s enough for the control to specify the URL to the OData server and he will do the rest: paging, sorting, adding, modifying, deleting records, filtering data, grouping, etc.

    We have prepared examples of how grids work with OData.

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

    Let us consider in more detail the basic queries using an example


    Grid setup


    Grid and data communication is carried out through the Kendo DataSource component. In the example, on the databoom.space/samples_kendo_ui_grid1.html page, the OData protocol type and URL to the data set for reading the list of people are specified in the grid settings.

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

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

    Data Request


    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 executes the following query:
    https://samples.databoom.space/api1/sampledb/collections/person?$callback=jQuery19102346130800433457_1424080067186&$inlinecount=allpages&$format=json&$top=20

    Main request parameters:
    • $ callback = jQuery19102346130800433457_1424080067186 - tells the server that the data should be in JSONP format. The parameter value sets the name of the function in which the query result should be wrapped
    • $ inlinecount = allpages - tells 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 - requires 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 - you want to return the result, skipping the first 20 entries.

    Grid setup for data modification


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

    1. Modify the datasource:
      Add a description of the operations to 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 an id definition to the description of the data scheme - this is necessary so that the grid correctly performs 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 another way, up to indicating the functions that are performed during data modification operations. See docs.telerik.com/kendo-ui/api/javascript/data/datasource for more details.

    Add 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 a record in JSON format, for example:
    {id: "", firstname: "John", lastname: "Walker"}

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

    Record modification


    When a record is modified, 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 a record is deleted, 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 various manufacturers can automatically generate requests that meet the standard. In the settings of Kendo UI Grid, it is enough to specify the desired URL, and the grid will automatically generate all the necessary requests. NitrosBase.js

    OData server accelerates application prototyping. You can put various 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 query syntax. NitrosBase.js is easy to configure to use other APIs. Here is an example of the interaction of the famous jqGrid control with NitrosBase.js: databoom.space/samples_jqgrid.html

    Tags:

    Also popular now: