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. jQuery
  4. Set Skip and Take for infinity scroll

Set Skip and Take for infinity scroll

I have this JS which creates a grid:

var dm = ej.DataManager({
    url: "/users/get/", crossDomain: true ,
    adaptor: new ej.UrlAdaptor() 
});


    $("#Grid").ejGrid({
        dataSource: dm,
        allowScrolling: true,
        allowVirtualScrolling: true,
        filterSettings: {
            filterType: "menu"
        },
        allowFiltering: true,
        scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous },
        pageSettings: { pageSize: 10 },
        pageSettings: { enableQueryString: true },
        columns: [
            { field: "id", headerText: "ID", isPrimarykey: true},
            { field: "email", headerText: "Email" },
        ]

});
And this server-side action:
    public IActionResult All(DataManager dm)
        {
            var data = Users.All();
            DataOperations operation = new DataOperations();

            int count = data.AsQueryable().Count();
            if (dm.Skip != 0) 
            {
                 data = operation.PerformSkip(data, dm.Skip);
            }
            if (dm.Take != 0) 
            {
                data =  operation.PerformTake(data, dm.Take);
            }


            return Json(new { result = data, count = count });
        }
The Items are 30 and infinity scroll loads elements when it is at the bottom, but it loads every time same 30 items, because Take and Skip are 0 every time.
I want to set Skip and Take to get (for the example) 10 items and with infinity scroll loading new 10 items and new 10 to the end of the elements.
Is there SynqFusion way to that or I need to create it manual ?

10 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 30, 2017 05:17 AM UTC

Hi Customer,  
 
Thanks for contacting Syncfusion Support.  
 
We are unable to reproduce any problem at our end. We have prepared a sample that can be downloaded from the following location.  
 
 
We could see the Grid sends the skip/take and brings next page records as shown in the following screenshot.  
 
 
 
Please share the following details to analyze the problem at our end.  
 
  1. Screenshot with the replication procedure or video demo of the issue
  2. Version of the Essential Studio
  3. If possible, modify the attached sample and reproduce the issue
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


NO noName August 30, 2017 03:02 PM UTC

In my app it set Skip and Take in JS and send them to the server, too: 

  • {requiresCounts: true, skip: 0, take: 10}
    1. requiresCounts:true
    2. skip:0
    3. take:10

    , but on the server dm.Take and dm.Skip are 0 in all cases and returns no results if in the server dm.Take is not set like this dm.Take = 10, for the example. JS code is same like in your sample:

    Server side code is:

    IEnumerable data = Users.Get(dm.Skip, dm.Take);  //dm.Skip and dm.Take are 0

                DataOperations operation = new DataOperations();

                int count = data.AsQueryable().Count();

                return Json(new { result = data, count = count });

    In your sample it works and in the action dm.Take and Skip aren't 0 in my application there are 0.










    SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 31, 2017 10:48 AM UTC

    Hi Customer,  
     
    We could see you are taking the count after applying the Skip/Take arguments to the Data which will bring wrong count to the client end. So, we request to take the count before applying the Skip/Take to the DataSource.  
     
           public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
     
            { 
     
               int count = Users.Count();//collect the record count first 
     
                IEnumerable data = Users.Get(dm.Skip, dm.Take);  //apply skip/take later 
     
                DataOperations operation = new DataOperations(); 
     
                return Json(new { result = data, count = count }); 
            } 
     
    If you are still facing any problem, please share a video demo of the issue along with details requested in our previous update.  
     
    Regards,  
    Seeni Sakthi Kumar S. 


    NO noName August 31, 2017 03:07 PM UTC

    I don't see option to upload images or any other media, that's why I attach screens it to the comment.

    With count before other code is same. You can check screens.


    Attachment: MVC_7c63d6ec.rar

    VA Venkatesh Ayothi Raman Syncfusion Team September 1, 2017 10:08 AM UTC

    Hi Customer, 

    Thanks for the update. 

    We went through your screenshot that you have shared for us and found that you are showing two different controllers page one controller page has skip and take values and another has null values. We suspect that you are doesn’t enabling the page settings or doesn’t enabling the Virtual scrolling.  In this scenario, only both skip and take values are null. So, could you please check whether you are defining the pageSettings/Virtual scrolling.  
    Please refer to the following code example, 

    Please share the following details to analyze the problem at our end.   
      
    1. Scenario for replication procedure.
    2. Version of the Essential Studio
    3. A sample If possible or modify the attached sample and reproduce the issue

    Regards, 
    Venkatesh Ayothiraman. 


    NO noName September 1, 2017 01:35 PM UTC

    My JS code is copy/paste from your sample:

    dataSource: dm,

                allowScrolling: true,

                scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous },

                pageSettings: { pageSize: 10, enableQueryString: true },

    .......


    1 of the images where dm.Take is not null is from your sample when I debug.

    The image where Take and Skip are 0 is from my app when I debug.

    I am using Visual Studio Community 2017.

    The app is .NET Core.

    I can provide files from the app, but not here, where is public.  

    I really need to fix this.


    NO noName September 1, 2017 03:40 PM UTC

    This sample describe the problem. It is .NET Core Syncfusion application created with Visual Studio projects->Syncfusion ASP.NET Core Web Application.

    The problem is same. If you run the app you can see that there is request with take: 10, but on the server is 0.

    Even more, if I send custom query like this:

    .....executeQuery(new ej.Query().addParams("id", "value").requiresCount().skip(1).take(3)); 

    I see in the console this:

    1. {requiresCounts: true, skip: 1, take: 3, id: "value"}
      1. id:"value"
      2. requiresCounts:true
      3. skip:1
      4. take:3

    , but on the server everything is null/0.








    Attachment: SyncfusionASPNETCoreWebApp_1155f04f.rar

    SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 4, 2017 08:38 AM UTC

    Hi Customer,  
     
    Thanks for contacting Syncfusion Support.  
     
    We suspect that you are missing FromBody attribute in the Url Action Handler. If the attribute is not present, default values will be set the parameter instead of the receiving values from the client-end. So, we suggest to mention this in the Handler function as shown in the following code example.  
     
            public ActionResult DataSource([FromBody]DataManager dm) 
            { 
                IEnumerable DataSource = order; 
                DataOperations ds = new DataOperations(); 
                int count = DataSource.Cast<Orders>().ToList().Count();//count 
                if (dm.Skip >= 0) 
                    DataSource = ds.PerformSkip(DataSource, dm.Skip); 
                if (dm.Take > 0) 
                    DataSource = ds.PerformTake(DataSource, dm.Take); 
                return Json(new { result = DataSource, count=count }); 
            } 
     
    If you are still facing any problem, please share the following details to analyze the problem at our end.  
     
    1. Complete code example of the Grid and the code behind
    2. Screenshot of the issue or video demo of the issue
     
    Regards,  
    Seeni Sakthi Kumar S. 


    NO noName September 4, 2017 01:59 PM UTC

    Thanks, It works.

     I need to use adaptor: new ej.UrlAdaptor(), otherwise with another adaptor I am getting 415 (Unsupported Media Type), but now it works with UrlAdaptor()


    SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 5, 2017 05:34 AM UTC

    Hi Customer,  
     
    We are happy to hear that your requirement has been achieved. Since Controller actions were handled by the UrlAdaptor alone by DataManager, we must give the adaptor as UrlAdaptor. If the UrlAdaptor is not mentioned for the controller actions, DataManager will consider them as a OData operations which results in the Unsupported Type error. So, we request to mention in the adaptor.  
     
    Regards,  
    Seeni Sakthi Kumar S. 


    Loader.
    Up arrow icon