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
  1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Load initial data then use remote data

Load initial data then use remote data

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. 

10 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team January 4, 2019 06:19 AM UTC

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. 

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

Regards, 
Thavasianand S. 


JE Jeremy January 4, 2019 07:04 AM UTC

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


JE Jeremy January 5, 2019 06:52 AM UTC

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;

PS Pavithra Subramaniyam Syncfusion Team January 8, 2019 03:33 AM UTC

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. 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S.  


JE Jeremy January 8, 2019 08:03 PM UTC

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?

TS Thavasianand Sankaranarayanan Syncfusion Team January 10, 2019 06:54 AM UTC

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, 


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


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: 


Regards, 
Thavasianand S. 


JE Jeremy January 14, 2019 05:30 PM UTC

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

TS Thavasianand Sankaranarayanan Syncfusion Team January 16, 2019 12:45 PM UTC

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');  
 
 
 
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:  
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


JE Jeremy January 17, 2019 08:33 PM UTC

Thank you so much for your help!

TS Thavasianand Sankaranarayanan Syncfusion Team January 18, 2019 04:26 AM UTC

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.

Loader.
Up arrow icon