Custom Adaptor with Async Promise Method

[Malcolm van Staden]

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?

[Vignesh Natarajan]

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 

 

KB: https://www.syncfusion.com/kb/3375/how-to-process-xml-data-from-server-using-datamanager-and-bound-to-grid  

 

Similarly refer our UG documentation on custom adaptor  

 

UG: https://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor  

 

Please get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan. 

 

[Malcolm van Staden]

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 

[Vignesh Natarajan]

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 

 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource  

 

If you need any further assistance please get back to us. We will be happy to assist you. 

 

Regards, 

Vignesh Natarajan. 

 

[Malcolm van Staden]

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>

[Vignesh Natarajan]

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 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/customAdaptor_sample1579311078.zip  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan.