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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Lazy Loading

Thread ID:

Created:

Updated:

Platform:

Replies:

146308 Jul 30,2019 06:24 PM UTC Aug 10,2019 04:38 AM UTC ReactJS 5
loading
Tags: ejGrid
Pat Buchanan
Asked On July 30, 2019 06:24 PM UTC

Hi, we are using the ejGrid and we're pretty happy with it in most ways.  We would like to load large amounts of data on the grid but control it with server-side paging to reduce load times on the client.  Do you have an example of using your grid with server-side paging?  Basically, we would like the grid to only load the records that are visible on the screen and then load more as you scroll to the bottom of the current set of records (i.e., infinite scrolling).

Can we implement this using your grid?  If so, can you give us an example in ReactJS?

Thank you!

Manivannan Padmanaban [Syncfusion]
Replied On July 31, 2019 07:04 AM UTC

Hi Pat, 

Greetings from Syncfusion Support. 

Query: Server Side paging with infinite scrolling. 

In grid, we can achieve the server side paging using urlAdaptor and for infinite scrolling we suggest you to use enableVirtualization feature of ejGrid. Kindly refer the below code example, 


<div id="Grid"></div> 
 
    <script type="text/babel"> 
        $(function(){ 
        var data = ej.DataManager({url: "/Grid/DataSource", adaptor:"UrlAdaptor"}); 
        var settings = { width: 550, height: 300, enableVirtualization: true }; 
        ReactDOM.render( 
        <div id="Grid2"> 
            <table> 
                <tr> 
                    <td> 
                        <EJ.Grid id="Grid_1" dataSource={data} allowScrolling={true} allowSorting={true} scrollSettings={settings}> 
                            <columns> 
……………………………………………………………………………….. 
                            </columns> 
                        </EJ.Grid> 
                    </td> 
                </tr> 
 
            </table> 
        </div>, 
        document.getElementById('Grid') 
        ); 
        }); 
    </script> 

       public IEnumerable OrderData = new NorthwindDataContext().OrdersViews.ToList(); 
 
        public ActionResult DataSource(DataManager dataManager) 
        { 
            IEnumerable data = OrderData; 
            DataOperations operation = new DataOperations(); 
            if (dataManager.Sorted != null && dataManager.Sorted.Count > 0) //Sorting 
            { 
                data = operation.PerformSorting(data, dataManager.Sorted); 
            } 
            if (dataManager.Where != null && dataManager.Where.Count > 0) //Filtering 
            { 
                data = operation.PerformWhereFilter(data, dataManager.Where, dataManager.Where[0].Operator); 
            } 
            int count = data.Cast<OrdersView>().Count(); 
            if (dataManager.Skip != 0) 
            { 
                data = operation.PerformSkip(data, dataManager.Skip); 
            } 
            if (dataManager.Take != 0) 
            { 
                data = operation.PerformTake(data, dataManager.Take); 
            } 
            return Json(new { result = data, count = count }); 
        } 


Output

 

For your convenience we have created the sample, kindly refer the below link. 

Regards, 
Manivannan Padmanaban. 



Pat Buchanan
Replied On July 31, 2019 07:17 PM UTC

Hi, thank you for the quick response, just to be clear, we're using the ReactJS Grid in a React project.  This example looks like a C# example which uses React.  Can you give us an example that is for a ReactJS/Typescript project?

Manivannan Padmanaban [Syncfusion]
Replied On August 1, 2019 03:02 PM UTC

Hi Pat, 

Thanks for the update. 

From your previous update, you requested to perform the paging at server side. So, we will provide you the reactJS sample with controller page integration. As like same, you can modify the code example based on your sample project. 

If you need further assistance, then kindly get back to us with the sample code example and detail explanation of your requirement. 

Regards, 
Manivannan Padmanaban.  


Pat Buchanan
Replied On August 6, 2019 03:58 PM UTC

Hi, what we need is an example like above but with the Grid using ReactJS on the front-end and Node on the back-end.  Can we get something like that?

Manivannan Padmanaban [Syncfusion]
Replied On August 10, 2019 04:38 AM UTC

Hi Pat, 
 
Sorry for the delayed response. 
 
In the below link we have discussed the node back end integration,  
 
Note: In the above link we have used the angularJS as front end, you can use reactJS as front end and the backend integration would be same. 
 
Kindly get back to us, if you are facing any difficulties while implementing your requirement. 
 
Regards, 
Manivannan Padmanaban. 


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