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
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

Custom Adaptor with Async Promise Method

Thread ID:

Created:

Updated:

Platform:

Replies:

143080 Mar 4,2019 12:15 PM UTC Mar 21,2019 11:53 AM UTC jQuery 5
loading
Tags: ejGrid
Malcolm van Staden
Asked On March 4, 2019 12:15 PM UTC

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


Malcolm van Staden
Replied On 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 

Vignesh Natarajan [Syncfusion]
Replied On 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. 
 


Malcolm van Staden
Replied On 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>


Vignesh Natarajan [Syncfusion]
Replied On 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.    


CONFIRMATION

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