Load initial data then use remote data

[Jeremy]

Is it possible to load the first page of data on the server-side (localdata) then on the client-side change the grid to use a remote data for filter/search/paging

I'm trying to replace datatable.net grid in our system. One of the really nice features for us is that you can initially load a page of data before returning to the client -- essentially creating an HTML table then initializing the grid around that. Subsequent calls would be made via a remote api call. 

[Thavasianand Sankaranarayanan]

Hi Jeremy, 

Greetings from Syncfusion. 

As per your given detail we suspect that you want to handle some Grid operations in server side itself. 

We have already discuss about the above mention query in the following documentation. 

Link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#handling-on-demand-grid-actions 

  

Please get back to us if you need further assistance on this. 

Regards, 

Thavasianand S. 

[Jeremy]

Yes, that will solve the second part of the issue. The first part is that my app will generate a table of data that represents the first page of the data. From there I'd like the grid to take over for paging/filtering/sorting. 

An example of what I'm currently doing and what I'm after is deferred loading: https://datatables.net/examples/server_side/defer_loading.html

Thanks

[Jeremy]

Is it possible to change the grid's datasource without having it do a request? 

My current approach is to load the grid data with localdata (array); then I change the dataSource to use a WebApiAdaptor. The problem now is that it's trying to load the already loaded first page. Is there a way around the adaptor making the first call? 

Seems like I'd need a custom provider but the documentation seems to be incomplete? (https://ej2.syncfusion.com/javascript/documentation/data/adaptors/?no-cache=1#writing-custom-adaptor)

Any pointers on writing a custom adaptor?

Current (not working) approach:

Problem: Changing the datasource causes the WebApiAdaptor to make a call for the first page (which is already loaded locally)

var ej2Grid = new ej.grids.Grid({

dataSource: data,

columns: columns,

allowPaging: true

})

var newDS = new ej.data.DataManager({ url: 'my/api/call', adaptor: new ej.data.WebApiAdaptor() });

ej2Grid.dataSource=newDS;

[Pavithra Subramaniyam]

Hi Jeremy, 

 

We have validated the provided code and we have achieved your requirement by using ‘setProperties’.  Please find the following code example and sample for your reference. 

 

 

[Index.cshtml] 

. . . 

 

button.element.onclick = function () { 

        var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; 

        var newData = new ej.data.DataManager({ 

            url: hostUrl + 'api/Orders', 

            adaptor: new ej.data.WebApiAdaptor(), 

            crossDomain: true 

        }); 

 

        gridObj.setProperties({ dataSource: newData, pageSettings:{currentPage:1} }); 

 

    } 

 

In this sample we have changed the dataSource through button click event. 

 

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

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S.  

[Jeremy]

Hi Pavithra

Thanks for your sample. After fixing a bug in it, I've able to say it does not solve the issue. When you click the button to set the new datasource it's doing an ajax call to load and set the first page. I don't want to set the first page because it's already set with local data. 

Use case

Page is loaded. I have the first 15 records locally. (No need to call ajax to retrieve the same data!)

When you page/sort/filter THEN it should do an ajax call to call the server and refresh the grid. 

My first attempt was just to passively set the datasource so that it would be used on the next call that required a refresh. This is not working because regardless of how I set the data source it will do an ajax call 

grid.dataSource=newDS; vs grid.setProperties({ dataSource: newData, pageSettings:{currentPage:1} });

My next attempt was to try and set the datasource on 'actionBegin'. This of course didn't work because now the grid is performing TWO ajax calls. One when the datasource is set and one when the actionBeing (requestType='paging') has been called.

Example: https://stackblitz.com/edit/yommqm

So again, I ask. Is it possible to have the first page of data set locallly and subsequent actions use a datasource?

Alternatively.... Can you give me more information on how to write a custom adaptor?

[Thavasianand Sankaranarayanan]

Hi Jeremy, 

Query #1: Is it possible to have the first page of data set locally and subsequent actions use a datasource? 

You can resolve this issue by using dataSource property instead of setProperties method in actionBegin event. Please refer the following code snippet for further assistance, 

var grid = new ej.grids.Grid({ 

        dataSource: { count: window.orderData.slice(0, 45).length, result: window.orderData.sort(function (x, y) { return x.OrderId >= y.OrderId; }).slice(0, 15) }, 

        allowPaging: true, 

        actionBegin: function (o) { 

            console.log(o) 

            if (o.requestType === 'paging' && !dsSet) { 

                var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; 

                var newData = new ej.data.DataManager({ 

                    url: hostUrl + 'api/Orders', 

                    adaptor: new ej.data.WebApiAdaptor(), 

                    crossDomain: true 

                }); 

                grid.dataSource = newData; 

                dsSet = true; 

            } 

        } 

    }); 

We do not need to provide value to currentPage property while using this solution. We have modified your sample with this code. Please refer the below link to refer the modified sample, 

Sample: https://stackblitz.com/edit/yommqm-99tclo 

Refer the below documentation link to know about dataSource property if the Grid: 

https://ej2.syncfusion.com/documentation/api/grid/#datasource 

Query #2: Can you give me more information on how to write a custom adaptor? 

Please refer the below documentation link to know about how to write our own custom adaptor: 

https://ej2.syncfusion.com/documentation/grid/data-binding/#custom-adaptor 

Regards, 

Thavasianand S. 

[Jeremy]

Thavasianand, that looks like great progress! Thank you. 

I'm likely getting nit picky at this point but on paging it's showing "No records to display" when you try to page/sort. Do you have any guidance on how we could hide that for this special case? 

I appreciate all the help thus far!

Also the custom adapter docs are for ES6. Do you happen to have any for ES5?

Thank you

[Thavasianand Sankaranarayanan]

Hi Jeremy, 

 

Query: that looks like great progress! Thank you. I'm likely getting nit picky at this point but on paging it's showing "No records to display" when you try to page/sort. Do you have any guidance on how we could hide that for this special case?  

 

We validated your query and you can achieve your requirement by changing defaultLocale. Please find the below code example and sample for your reference. 

 

[code example] 

 

    var dsSet = false; 

    var button = new ej.buttons.Button({ width: '100px' }); 

    button.appendTo('#primarybtn'); 

    var grid = new ej.grids.Grid({ 

        dataSource: { count: window.orderData.slice(0, 45).length, result: window.orderData.sort(function (x, y) { return x.OrderId >= y.OrderId; }).slice(0, 15) }, 

        allowPaging: true, 

        actionBegin: function (o) { 

            debugger 

            console.log(o) 

            if (o.requestType === 'paging' && !dsSet) { 

                this.defaultLocale.EmptyRecord = ""; 

                var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; 

                var newData = new ej.data.DataManager({ 

                    url: hostUrl + 'api/Orders', 

                    adaptor: new ej.data.WebApiAdaptor(), 

                    crossDomain: true 

                }); 

                grid.dataSource = newData; 

                dsSet = true; 

            } 

        }, 

        ... 

   }); 

    grid.appendTo('#Grid');  

 

 

Sample link: https://stackblitz.com/edit/yommqm-aq1u7v?file=index.js  

 

Query: Also the custom adapter docs are for ES6. Do you happen to have any for ES5? 

 

Please refer the below documentation link(ES5) to know about how to write our own custom adaptor:  

 

Help Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/?no-cache=1#custom-adaptor 

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Jeremy]

Thank you so much for your help!

[Thavasianand Sankaranarayanan]

Hi Jeremy, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.