1. Home
  2. Forum
  3. jQuery
  4. Custom Adaptor with Async Promise Method

Custom Adaptor with Async Promise Method

Hi,

We have an async promise JS method which we call as follows:

dataProvider.withSuccessHandler(function(results){
     // process result/dataset here 
}).getData(parameters);

How could we use this with the custom adaptor so that the data can be displayed on a grid?

5 Replies
VN Vignesh Natarajan Syncfusion Team March 5, 2019 12:44 PM UTC

Hi Malcolm, 
 
Thanks for using Syncfusion support.  
 
Query: ” How could we use this with the custom adaptor so that the data can be displayed on a grid?” 
 
From your query, we understand that you need to bind dataSource to ejGrid using custom adaptor. We have already discussed this topic in our knowledge base document section. Kindly refer the below link for the knowledge base document 
 
 
Similarly refer our UG documentation on custom adaptor  
 
 
Please get back to us if you have further queries.    
 
Regards, 
Vignesh Natarajan. 
 


MV Malcolm van Staden March 11, 2019 07:01 AM UTC

Hi,

Thank you for the links - this is something we already looked at. However, it doesn't seem to answer our question. The UG is also not entirely comprehensive.

The two main methods (processQuery, processResponse) that can be overridden seem to be too late in the process. It isn't allowing us to control loading the data.

The KB mentions manipulating the data once it's already loaded from the remote server. We want to load the data asynchronously ourselves or at least set a method that will be called in order to load the data. Say we have a timeout method - the data is only loaded once the timeout method executes (asynchronously). Is something like this at all possible? 

By timeout I'm talking about the window.setTimeout method.

Thank you 

VN Vignesh Natarajan Syncfusion Team March 12, 2019 01:20 PM UTC

Hi Malcolm, 
 
Query : We want to load the data asynchronously ourselves or at least set a method that will be called in order to load the data 
 
To achieve your requirement we suggest you to use the dataSource() method of Grid. Please refer the below code example. In the below code example we have refreshed the datasource of the grid using the dataSource method of Grid in a set interval. 
 
 
<button onclick="start()">Start</button> 
 
    <button onclick="stop()">Stop</button> 
 
    @(Html.EJ().Grid<OrdersView>("FlatGrid") 
             .Datasource((IEnumerable<object>)ViewBag.datasource) 
             .AllowSorting() 
             .AllowPaging() 
             .IsResponsive() 
             .Columns(col => 
             { 
                 col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                 col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
                 col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Priority(4).Width(75).Add(); 
                 col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Priority(3).Format("{0:C}").Add(); 
                  
             })) 
</div> 
 
<script> 
    var flag = true; 
 
    function start() { 
        timerID = setInterval(refreshGrid, 2000); 
    } 
 
    function stop() { 
        clearInterval(timerID); 
        flag = false; 
    } 
 
    function refreshGrid() { 
        if(flag) 
            var data = @Html.Raw(Json.Encode(ViewBag.datasource)); 
        else 
            var data = @Html.Raw(Json.Encode(ViewBag.data)); 
        var grid = $("#FlatGrid").ejGrid("instance"); 
        grid.dataSource(data); 
    } 
 
</script> 
 
Refer our API documentation for your reference 
 
 
If you need any further assistance please get back to us. We will be happy to assist you. 
 
Regards, 
Vignesh Natarajan. 
 


MV Malcolm van Staden March 20, 2019 02:13 PM UTC

Hi,

I should have been clearer from the start as to what my requirements are. Sorry about that.

We are making use of google spreadsheets scripting to load data into the SF grid.

There are too many rows to load all the data upfront and it's best practise to load the data asynchronously - as follows:

    google.script.run.withSuccessHandler(function(items) {
          // items here
    }).getData();

We'd like to filter the data (and paginate) within the google scripts function (getData). Is this at all possible?

Here's a link to the example spreadsheet - click on the menu item Start Here:
https://docs.google.com/spreadsheets/d/1RnHRBNDGMtUOP9MhXqaz3nGS8GYn4lb420kgprK_GCw/edit?usp=sharing

This is what the script looks like:
<script type = "text/javascript" >
jQuery(function($) {
 
    $('#data_grid').ejGrid({
        dataSource: [],
        columns: [{
                field: "id",
                visible: true,
                headerText: "Id",
                isPrimaryKey: true
            },
            {
                field: "value",
                visible: true,
                headerText: "Value"
            }
        ],
        allowFiltering : true,
        filterSettings : {
          filterType : "menu"
        },        
        allowPaging : true,
        pageSettings: { pageSize: 5 },
        toolbarSettings: {
            showToolbar: false
        },
        editSettings: {
            allowEditing: false,
            allowAdding: false,
            allowDeleting: false
        }
    });

    $('#data_grid').ejWaitingPopup('hide');
    google.script.run.withSuccessHandler(function(items) {
        items = JSON.parse(items);
        $("#data_grid").ejGrid("dataSource", items);
        $('#data_grid').ejWaitingPopup('hide');
    }).getData();

   
});
</script>

And the google script:

function onOpen() {
    var menuName = 'Start Here';
    var ui = SpreadsheetApp.getUi();
    ui
        .createMenu(menuName)
        .addItem('Load Syncfusion Data Into Grid', 'loadTemplate')
        .addToUi();
}

function loadTemplate(){
    SpreadsheetApp.getUi()
        .showModalDialog(HtmlService
            .createTemplateFromFile('CreateData').evaluate().setWidth(800).setHeight(600), 'Load Data');
}

function getData(){
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName("Sheet1");
    var dataValues = sheet.getRange("A2:B").getValues();
    var values = [];
    dataValues.forEach(function(obj){
      values.push(Object.create(null, {
        id: {
          value: obj[0],
          enumerable: true
        },
        value: {
          value: obj[1],
          enumerable: true
        }}));
    });
  
    return JSON.stringify(values);
}

function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
}

And the HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" rel='nofollow' href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/16.1.0.37/js/web/flat-azure/ej.web.all.min.css" />
    <link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />   
  </head>
  <body>
    <form id='create-form' onsubmit="return false;">
      <div id='main_div' class="container-fluid">
        <div class="row mt-3">
          <div class="col-12">Data</div>
        </div>  
        <div class="row">
          <div class="col-12">
            <div id='data_grid'></div>
          </div>
        </div> 
       </div>
     </form>      
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="https://cdn.syncfusion.com/16.1.0.37/js/web/ej.web.all.min.js"> </script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <?!= include('CreateData_Scripts'); ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>


VN Vignesh Natarajan Syncfusion Team March 21, 2019 11:53 AM UTC

Hi Malcolm, 
 
Thanks for the update. 
 
To achieve your requirement, we suggest you to use the customAdaptor. In the below example, we have passed the remote service in the processQuery method and in the processResponse method we have return the data in form of result and count. Please refer the below code example, 
 
<script type="text/javascript"> 
 
        $(function () { 
 
            var dataManager = ej.DataManager({ url: "http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/", crossDomain: true, adaptor: new customAdaptor() }); 
 
            $('#data_grid').ejGrid({ 
                dataSource: dataManager, 
                columns: [{ 
                    field: "OrderID", 
                    visible: true, 
                    headerText: "Id", 
                    isPrimaryKey: true 
                }, 
                { 
                    field: "CustomerID", 
                    visible: true, 
                    headerText: "Value" 
                } 
                ], 
                allowPaging: true, 
                pageSettings: { pageSize: 5 }, 
                toolbarSettings: { 
                    showToolbar: false 
                }, 
                editSettings: { 
                    allowEditing: false, 
                    allowAdding: false, 
                    allowDeleting: false 
                }, 
            }); 
        }) 
 
 
        var customAdaptor = new ej.ODataAdaptor().extend({ 
            processQuery: function (dm, query, hierarchyFilters) { 
……………………… 
                return { 
                    type: "GET", 
                    url: tmp.length ? url.replace(/\/*$/, tmp) : url, 
                    ejPvtData: p 
                }; 
            }, 
            processResponse: function (data, ds, query, xhr, request, changes) { 
……………………………. 
                return { result: data, count: count }; 
            }, 
 
 
        }) 
……………. 
 
    </script> 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan.    


Loader.
Up arrow icon