Search code examples
angulargridsyncfusion

Can we create our request with OData client for syncfusion grid but use normal response (Reqular WebAPI)


I am getting issue in consuming response using DataManager with OData4Adaptor, Is it some kind of limitation in Syncfusion that it only consumes data from OData WebApi, not the plain WebAPI.

Below is working:

Api response:

{
    "@odata.context": "http://localhost:32097/odata/$metadata#Movies",
    "@odata.count": 30,
    "value": [{
        "Id": 1,
        "Title": "StarWars - The Force Awakens",
        "ReleaseDate": "2015-10-25T00:00:00+05:30",
        "Rating": "FiveStar",
        "LastModifiedOn": "2017-12-20T16:43:14.3413207+05:30"
    }]
}

Below is not working:

Api response:

{
    "count": 15,
    "message": "",
    "value": [{
        "code": "asdf",
        "description": "Test ASDF",
        "createdBy": "SA        ",
        "createdDate": "2017-12-13T06:53:30.183"
    }]
}

Solution

  • ODataV4Adaptor expects the response in the standard OData V4 format. To accept other response formats using ODataV4Adaptor, you can write custom adaptor by extending the ODataV4Adaptor.

    import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
    
    class CustomODataAdaptor extends ODataV4Adaptor {
          processResponse(data: Object, dataManager: DataManager, query: Query) {
           /**
            * Return the result in the { result, count } pair when query has requiresCount() enabled.
            * else simply return the entity collection.
            *  Response structure:
            *  {  
            *   "count": 15,
            *   "value": [{}, {}.....]
            *    }
            */
           return query.isCountRequired ? { result: data['value'], count: data['count'] } : data['value'];
       }
    }
    
    //Assign the custom adaptor as follows
    new DataManager({ url: SERVICE_URI, adaptor: new CustomODataAdaptor })
       .executeQuery(new Query().take(8).requiresCount()).then((e) => {
      // e.result will hold the result
    });
    

    Now the DataManager can accept the response from your non OData WebAPI.

    For more available adaptors in DataManager, please take a look at the below help links.

    DataAdaptors: http://ej2.syncfusion.com/15.4.17/documentation/data/adaptors.html Writing custom adaptor: http://ej2.syncfusion.com/15.4.17/documentation/data/adaptors.html?lang=typescript#writing-custom-adaptor