Build Custom Adaptor Data Manager

[Abdul Mounem]

Hi,

I'm in a position where i must build Custom Adaptor for the data manager, but ODATA or standard HTTP requests do not drive it, I am designing an app inside a platform that gives a JSbridge with a certain way to retrieve the data (It has its own class & methods, and it do support pagination and search)

Any ideas on how to do such things

[Rajapandi Ravi]

Hi Abdul,

Greetings from Syncfusion support

Based on your query we could see that you are using a custom adaptor to achieve your requirement and, in your query, we could see that you are designing a app with a certain way to retrieve the data. Before we start providing solution to your query, we need some information for our clarification. So, please share the below details that will be helpful for us to provide better solution.

1)         Please share your exact requirement scenario with detailed description.

2)         Share your issue scenario in video demonstration format.

3)         Share your complete Grid rendering code, we would like to check how you are implementing the custom adaptor in your application.

4)         Share your syncfusion package version.

5)         Share your exact requirement scenario with detailed description or pictorial representation.

Regards,

Rajapandi R

[Abdul Mounem]

Hi,

the case I do have is, 

I want to bind the data manager to a custom data source, the way it works, I have functions like MobileCRM.FetchAsync(tableName, query, pageNumber), so how can I use this inside a DropDown or a ListView, I tried to use the custom Adaptor, but the problem is, it will fail because I don't have an HTTP Request, with headers, and response body.

 I'm working on version 20.3.50^

this is the example of using the custom adaptor from the docs

what I need is something like this

Let me know if you get the requirement, also let me know if you need any other details

[Abdul Mounem]

Hi,

Any update on this issue?

[Rajapandi Ravi]

Abdul,

You can achieve your requirement by using the below way, so please find the sample code for how to use a custom data adaptor with the DropDownList component in Syncfusion's EJ2 JavaScript.

[ Code Example ]

import { DropDownList, DataManager } from '@syncfusion/ej2-dropdowns';

 

// First, we need to define the custom data adaptor class

class CustomAdaptor {

  // the process method is called by the DataManager when it needs to process the data

  public process(data: any) {

    // modify the data as needed and return it

    data.map((item: any) => {

      item.name = `${item.name} (${item.id})`;

      return item;

    });

    return data;

  }

}

 

// Next, we need to create a data source for the DropDownList

// In this example, we'll use a remote data source that fetches data from a server using a REST API

const dataManager = new DataManager({

  url: 'https://your-api-endpoint.com/items',

  adaptor: new CustomAdaptor()

});

 

// Now we can create the DropDownList

const dropDownList = new DropDownList({

  // set the data source for the DropDownList

  dataSource: dataManager,

  // set the fields for the value and text of the DropDownList items

  value: 'id',

  text: 'name',

  // set the placeholder text for the DropDownList

  placeholder: 'Select an item',

  // set the width of the DropDownList

  width: '100%'

});

 

// finally, we need to render the DropDownList to a DOM element

dropDownList.appendTo('#dropdownlist-container');

This example creates a DropDownList that fetches a list of items from a server using a REST API and displays the items in the DropDownList with their names and IDs. The custom data adaptor class modifies the data by appending the ID to the name of each item before it is displayed in the DropDownList.

[Abdul Mounem]

Hi,

The data in my case will not come from a URL, and also in the process function, from were it will be called

[Rajapandi Ravi]

Abdul,

We have checked your query and we could see that in your case the data will not come from a URL, and also in the process function. So please confirm where you are getting the data since your provided information was not enough to identify your exact requirement scenario at our end. So, before we start providing solution to your query, please share your requirement with a detailed description.

[Abdul Mounem]

Hi,

Yes, the data doesn't come from a URL, I'm running the code inside a mobile app platform, and the platform will provide a JSBridge that I can use to retrieve the data, so for example to get the data, I have a function called MobileCRM.FetchAsync(tableName, filter), so far, I was able to do some workaround, but it's not perfect, and it's having a lot of issues 

  let contactsDataManager = new DataManager({

            adaptor: new CustomDataAdaptor({

                getData: async (option: AjaxOption) => {

                    console.log(option);

                    if (!option.onSuccess) {

                        return;

                    }

                    let filterOptions = JSON.parse(option.data ?? "") as IFilterOptions;

                    let httpRequest: XMLHttpRequest = new XMLHttpRequest();

                    httpRequest.open("POST", '', true);

                    httpRequest.getResponseHeader = (header) => {

                        return 'application/json'

                    }

                    httpRequest.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

               

                    let recipients = await loadRecipients();

                    let request: any = extend({}, option, { httpRequest: httpRequest });

                    console.log(`Loading data: ${recipients.length}`)

                    option.onSuccess(JSON.stringify(recipients), request);

                }

            }),

        });

[Rajapandi Ravi]

Abdul,

Based on your query we have prepared a EJ2 Dropdown list with customDataAdaptor, once you are fetched the data from your method (loadRecipients) you need to return the result in respective format result and count. If you are directly assign the result to the dropdown datasource it will act as local data binding. Please refer the below code example and sample for more information.

 

const SERVICE_URI =

  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';

var datas = new ej.data.DataManager({

  adaptor: new ej.data.CustomDataAdaptor({

    getData: function (option) {

      var query = JSON.parse(option.data);

      var take = query.take;

      var skip = query.skip;

      var url = SERVICE_URI + '?$count=true';

      if (skip) {

        url = url + '&$skip=' + skip;

      }

      if (take) {

        url = url + '&$top=' + take;

      }

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function () {

        if (this.readyState == 4) {

          request = ej.base.extend({}, option, { httpRequest: xhttp });

          if (

            (xhttp.status >= 200 && xhttp.status <= 299) ||

            xhttp.status === 304

          ) {

            var datatemp = JSON.parse(xhttp.responseText);

            var gridData = {

              result: datatemp.value,

              count: datatemp['@odata.count'],

            };

            console.log(gridData);

            option.onSuccess(gridData, request);

          } else {

            option.onFailure(request);

          }

        }

      };

      xhttp.open('GET', url, true);

      xhttp.send();

    },

  }),

});

 

 

var ddlObject = new ej.dropdowns.DropDownList({

  //bind the data manager instance to dataSource property

  dataSource: datas,

  //map the appropriate columns to fields property

  fields: { value: 'OrderID', text: 'CustomerID' },

  query: new ej.data.Query()

    .select(['CustomerID', 'OrderID'])

    .take(10)

    .requiresCount(),

});

 

//render the component

ddlObject.appendTo('#ddlelement');

 

Sample: https://stackblitz.com/edit/as4fom-vgps3v?file=index.js,index.html

Regards,

Rajapandi R