We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

I want to use my own data client.

I want to set the grid up to use a data manager / url adapter, however I want to use my own library (JsonServiceClient (TypeScript)) to make the actual calls out to receive the data.

What is the best way to override / cut into the process so that instead of using the internal ajax XHR, I can make a call with my JsonServiceClient?

10 Replies

HJ Hariharan J V Syncfusion Team May 14, 2019 12:42 PM UTC

Hi Charles, 
Thanks for contacting Syncfusion support. 
We have validated the provided information. By default, we have custom adaptor option in data manager.  With the help of custom adaptor you can override the default adaptor(behavior) and customize the query based on your requirement. 
Please refer the below help documentation link for more information about custom adaptor. 
class CustomAdaptor extends UrlAdaptor { 
    beforeSend(dm: DataManager, request: XMLHttpRequest): void { 
        request.setRequestHeader("Authorization", "bearer"); 
    processQuery(dm: DataManager, query: Query, hierarchyFilters?: Object[]): Object{ 
        return { 
            // send query based on your service 
    this.data = new DataManager({ 
        url: 'api/Orders/DataSource', 
        insertUrl: "api/Orders/Insert", 
        updateUrl: "api/Orders/Update", 
        removeUrl: "api/Orders/Delete", 
        adaptor: new CustomAdaptor 

CH Charles May 14, 2019 10:58 PM UTC

That example still uses XMLHttpRequest to perform the request.  I do not want to use the XMLHttpRequest to make the request, I want to use my own library.

How can I send the request and use my own library, not the XMLHttpRequest you provide?  It's as if I need to override the 'send' not the 'beforeSend'

HJ Hariharan J V Syncfusion Team May 17, 2019 09:22 AM UTC

Hi Charles, 
From your query we found that you want to use your own service to perform the Grid actions. So we suggest to use Grid custom binding concept to achieve this requirement instead of using the dataManager. While using this custom binding concept, the grid expects an object from your service. The emitted value should be an object with properties result and count. 
At the initial Grid rendering please call your service within the load event of the Grid and please return the result like as “{result: […], count: …}” format to Grid. If you want to perform any Grid actions (like CURD, sorting, filtering, paging, grouping) then we suggest to use Grid dataStateChange and dataSourceChanged events. For grid actions such as paginggroupingsorting, etc., the dataStateChange event is invoked. You have to query and resolve data using your service in this event based on this event arguments. 
The dataSourceChanged event is triggered to update the grid data. So please use this event to call your service while performing the CRUD actions in Grid. You can perform the CRUD operation by using this event and you can get the changed records details in this event arguments. Finally, you need to call the Grid endEdit method to indicate the completion of save operation. Please refer the below sample code for further assistance. 
var isEssential = true; 
    grid = new ej.grids.Grid({ 
        dataSource: { result: [], count: 0 }, 
        dataStateChange: function (args) {     // dataStateChage event of Grid can triggered in every data change of Grid 
            getData(args.skip, args.take); // you can execute your service with page queries. 
        dataSourceChanged: function (args) { 
             getData(args); // in here you can execute your service while perform the CRUD actions. 
        allowPaging: true, 
        load: load, 
        columns: [ 
            { field: 'EmployeeID', headerText: 'EmployeeID', width: 160 }, 
            { field: 'CustomerID', headerText: 'CustomerID', width: 160 }, 
            { field: 'ShipCity', headerText: 'ShipCity', width: 160 } 
        height: "100%", 
   function load() { 
       if (isEssential) { 
          var obj = document.getElementById("Grid").ej2_instances[0]; 
          var pageSize = obj.pageSettings.pageSize; 
          var currentPage = 0; 
          page = getData(pageSize, currentPage); // inital load need to generate skip and take query based on Grid pageSettings 
    function getData(skip, take) { 
      // skip and take queries handle the on-demand loading concept 
      // you can execute your service with skip and take queries 
      //once if you get a data from your service you can bind the json data into Grid as below way. 
      // please handle the CURD actions here 
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
        grid.dataSource = { result :data, count: count }; // you need bind the data into grid in this way. Count specifies the total number of record. So you need to return your whole data count from server.   
Note: We must need to provide data source to Grid like as “{result: […], count: …}” format to achieve this custom binding concept. 
If we misunderstood your query please share more details about your requirement. This will help us to provide a better solution for the requirement as early as possible. 

MI Mike June 11, 2019 03:55 PM UTC

I'm glad I came across as I have the same exact needs.  Honestly though, this solution seems clunky/hacky, a better solution would be what Charles originally asked for and what I was hoping for as well.  It seems that you guys missed the mark greatly on what a custom data adapter is.

HJ Hariharan J V Syncfusion Team June 17, 2019 12:39 PM UTC

Hi Mark, 

Thanks for contacting Syncfusion support. 

Based on the Charles requirement, as he wanted to use his own service, we suggested the custom adaptor. With the custom adaptor you can customize these five different data adaptors and generate a customized adaptor, by overriding there default inbuilt methods like “processQuery” or “beforeSend” etc.(as for UrlAdaptor). But based on the Adaptor’s general syntax, you must need to return the processed resultant value as a “result” and “count” pair. If and only if the return value follows this syntax, the data can be processed by Grid. 
Documentations :  
Please get back to us if you need further assistance. 


CH Charles June 17, 2019 05:13 PM UTC


You're still missing the point.  You are missing the override that actually sends out the XHR request.  I don't want to use your internal XHR request to fetch the data, and while you give me override points before and after the XHR request, you do not expose one that allows me to substitute or replace your XHR request going out.

In addition to the “processQuery” and “beforeSend”, you also need a "processSend" that would allow us to intercept the query and perform the actual HTTP request ourselves, returning the results that the "processQuery" function would receive.

We started using the KendoUI Grid as it does currently support this functionality via the transport.read() (https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read)

HJ Hariharan J V Syncfusion Team June 19, 2019 08:48 AM UTC

Hi Charles, 

We have logged Need to provide ajaxAdaptor support in DataManager as a feature (to customize the ajax request at client side) and added to our feature request list. The feature will be available in any of our upcoming releases. Until then we appreciate your patience. You can keep track of the feature from the feedback portal below, 


DA Dat April 23, 2022 04:45 AM UTC

I'm evaluating Syncfusion EJ2 React and come accross this post and I was really surprised how Syncfusion support team work. They just answer something doesn't even related to the question. It have been nearly 2 years and we still have to use XMLHttpRequest in CustomDataAdaptor. What kind of custom is that ?

Let say I have an open api service with generated clients which use axios and now I have to implement 

dataSourceChanged in all the grid involved ? What about other control that use this data like select box, list,...

Maybe Charles was right, Telerik and DevExpress are better suites.

JC Joseph Christ Nithin Issack Syncfusion Team April 25, 2022 03:44 PM UTC

Hi Dat,

  Sorry for the inconvenience caused.

  Currently we are validating your query, we will provide further details on or before 27th April, 2022. We appreciate your patience until then.


Joseph I.

JC Joseph Christ Nithin Issack Syncfusion Team April 28, 2022 08:01 PM UTC

Hi Dat,

  Thanks for the patience.

We are glad to announce that our Essential Studio 2021 Volume 1 release (v19.1.54) is rolled out successfully and in that release, we have included the following feature - “Need to provide ajaxAdaptor support in DataManager”. So please update your package to this version to include this feature.

Release Noteshttps://ej2.syncfusion.com/documentation/release-notes/19.1.54/?type=all#datamanager

We thank you for your support and appreciate your patience in waiting for this release.

Based on your query you want to update the CRUD actions at the server side also using the axios. So, we have prepared sample and in that we have used the actionBegin event. Using the actionBegin event you can send the data to the server side using axios when you perform CRUD actions in the Grid component.

In the prepared sample we have displayed CRUD action data in the console. So, you can use the axios to send the displayed data to sever side to update the CRUD actions at the server side, please refer the below sample for your reference.

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#binding-with-ajax

Note: Using similar approach as the above documentation you can also make you axios call to retrieve the data and bind it the Grid’s dataSource property.

Sample: https://stackblitz.com/edit/react-vbxatn-wyfgaw?file=index.js

In your update you have also mentioned that you want to know details on some other controls which use data. Please share the components which you want the details on binding the data using axios.

Please get in touch with us if you would require any further assistance.


Joseph I

Live Chat Icon For mobile
Up arrow icon