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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I want to use my own data client.

Thread ID:





144548 May 11,2019 07:21 AM UTC Jun 19,2019 08:48 AM UTC JavaScript - EJ 2 7
Tags: Grid
Asked On May 11, 2019 07:21 AM UTC

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?

Hariharan J V [Syncfusion]
Replied On 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 

Replied On 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'

Hariharan J V [Syncfusion]
Replied On 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. 

Replied On 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.

Hariharan J V [Syncfusion]
Replied On 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. 


Replied On 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)

Hariharan J V [Syncfusion]
Replied On 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, 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon