.NET Core project call to .NET API isn't paging

Hello,

I've set up Syncfusion for a Razor Pages (Core) project that calls a RESTful API endpoint that is only .NET framework. The data is returning, and I've set up the front end markup to allow paging, but the data is displayed all at once instead of paging. Here is the markup on the front end:


<ejs-grid id="Grid" allowPaging="true">

    <e-grid-pageSettings pageCount="3" pageSizes="true" pageSize="10"></e-grid-pageSettings>

    <e-data-manager url="https://api.url.com" crossdomain="true"

         adaptor="WebApiAdaptor"></e-data-manager>

    <e-grid-columns>

        <e-grid-column field="TabName" headerText="Order ID" textAlign="Right" width="160"></e-grid-column>

        <e-grid-column field="LastModifiedOnDate" headerText="Customer ID" width="170"></e-grid-column>

        <e-grid-column field="CreatedOnDate" headerText="Employee ID" textAlign="Right" width="170"></e-grid-column>

        </e-grid-columns>

</ejs-grid>

The documentation I saw didn't show much of what needs to be happening on the backend. For the .NET API, this is what I'm returning:

results res = new results() { result = recentPages, count = recentPages.Count() };


I saw another question where the objects had some methods or properties like "page" and "take." Is that what I'm missing? Do I need to take the query parameters and check for what is has and then send them in the results object? Any help is greatly appreciated.



11 Replies

VS Vignesh Sivagnanam Syncfusion Team July 28, 2021 03:50 PM UTC

Hi Chris 

Greetings from Syncfusion support 

Based on your query, we understand that the paging is not worked properly in the grid with remote dataSource using WebApiAdaptor. From your query, we have prepared a sample and validate the issue at our end but the paging operation is working fine at our end.  

Please refer the below sample and Screenshot for your reference 


The response object should contain properties Items and Count whose values are a collection of entities and the total count of the entities respectively. 

Items: [{..}, {..}, {..}, ...], 
Count: 830 


If you still faced the reported issue at our end, Please share the below details to validate further on the issue, 

1. Share the full grid rendering code and controller . 

2. If possible, share the issue reproduced sample or replicate the issue in the above sample. 

3. Syncfusion package version. 

Please get back to us for further assistance, 

Regards 
Vignesh Sivagnanam 



CR Chris Reddick July 29, 2021 01:53 PM UTC

I was able to fix the problem using one of the answers provided by another of your forums:  https://www.syncfusion.com/forums/138472/server-side-pagination

Is there a performance difference between server-side paging/client-side paging? 
My next question is how to apply filtering, but I'm going to try the link above as the representative was able to help with that.


Thank you for your prompt and thorough response, it is very helpful!



VS Vignesh Sivagnanam Syncfusion Team July 30, 2021 04:45 PM UTC

Hi Chris 

Thanks for the update 

Query 1 : Is there a performance difference between server-side paging/client-side paging?  

No, there is no performance variation between client and server side paging in the grid. If you perform the paging operation using local dataSource, the dataSource are always appeared in the grid. The data binding speed is same for both the client side paging and server side paging. In case, if you're using the remote datasoure, only the data fetching from the database or service is take some time. 
 
Query 2 : how to apply filtering 

Based on your query, you want to apply the filtering to the remoter data webApiAdaptor in the grid. To achieve your requirement, we suggest you to use the below code example and refer the below sample for your reference, 

In the below sample, we have handled the server side filter by using the query string option. 

public object Get() 
        { 
            var queryString = Request.Query; 
            var data = OrdersDetails.GetAllRecords().ToList();  
            string filter = queryString["$filter"]; 
            if (filter != null) 
            { 
                var newfiltersplits = filter; 
                var filtersplits = newfiltersplits.Split('(', ')', ' '); 
                var filterfield = filtersplits[1]; 
                var filtervalue = filtersplits[3]; 
                if (filtersplits.Length != 5) 
                { 
                    filterfield = filter.Split('(', ')', '\'')[3]; 
                    filtervalue = filter.Split('(', ')', '\'')[5]; 
                } 
                switch (filterfield) 
                { 
                    case "OrderID": 
                        data = (from cust in data 
                                where cust.OrderID.ToString() == filtervalue.ToString() 
                                select cust).ToList(); 
                        break; 
                    case "CustomerID": 
                        data = (from cust in data 
                                where cust.CustomerID.ToLower().StartsWith(filtervalue.ToString()) 
                                select cust).ToList(); 
                        break; 
                    case "ShipCity": 
                        data = (from cust in data 
                                where cust.ShipCity.ToLower().StartsWith(filtervalue.ToString()) 
                                select cust).ToList(); 
                        break; 
                } 
            } 

            int skip = Convert.ToInt32(queryString["$skip"]); 
            int take = Convert.ToInt32(queryString["$top"]); 
            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 
        } 

Please get back to us for further assistance, 

Regards 
Vignesh Sivagnanam 



CR Chris Reddick July 31, 2021 05:20 PM UTC

Hello,

I tried the above solution and the one referenced in my first link provided that detailed a similar problem. When I type something into the "TabName" filter of my application, the query parameter for $filter is 

$filter=(startswith(tolower(TabName),%27dfdfd%27))%20and%20((LastModifiedOnDate%20gt%20datetime%27null%27)%20and%20(LastModifiedOnDate%20lt%20datetime%27null%27))


Does the above code provided to split the query string cover this particular string? When I run the code you provided and input my own filter names, I get a 200 response back with the appropriate query string and filter argument, but the data isn't updated. Am I missing something on the front end? I already added allowFiltering="true" for the grid markup, so I'm just a bit stuck. 



VS Vignesh Sivagnanam Syncfusion Team August 2, 2021 03:15 PM UTC

Hi Chris 

Thanks for the update 

Based on your query, we understand that you want to perform filtering in the column. From your provided query string, we have validated the issue at our end to perform filtering the columns in the grid. But we are not able to reproduced the reported issue at our end.  

To validate further on your issue, please provide the below details to us. 

1. Explain your exact issue replication procedure. 

2. Are you performing Filtering or Searching? 

3. If possible, Share the issue reproduced sample. 

4. Explain in which case, you have faced the issue in the grid. 

5. Explain the exact issue using Screenshot or vide demonstration. 

Please get back to us for further assistance, 

Regards 
Vignesh Sivagnanam   



CR Chris Reddick August 2, 2021 04:08 PM UTC

I'm working on filtering based on your previous provided answer. When I type enter after entering a value in the field, the spinner spins indefinitely and I get the following error:


Here is the code you provided as I put it in the server side:

if (filter != "" && filter != null)

{

var newfiltersplits = filter;

var filtersplits = newfiltersplits.Split('(', ')', ' ');

var filterfield = filtersplits[1];

var filtervalue = filtersplits[3];

if (filtersplits.Length != 5)

{

filterfield = filter.Split('(', ')', '\'')[3];

filtervalue = filter.Split('(', ')', '\'')[5];

}

System.Diagnostics.Debug.WriteLine(filtervalue);

switch (filterfield)

{

case "TabName":


I'm getting a bit different query string with different array values. The image "screenshot of grid filter columns.jpg" shows what happens when I type "dfdfd" in the TabName column filtering. I've also included the error I get when I hit enter after entering a value in a filter field. I've broken the query string based on your code above to show you the positions of the array and their respective indices, and I've also included the entire filter par:

$filter=(startswith(tolower(TabName),%27dfdfd%27))%20and%20((LastModifiedOnDate%20gt%20datetime%27null%27)%20and%20(LastModifiedOnDate%20lt%20datetime%27null%27))





PG Praveenkumar Gajendiran Syncfusion Team August 3, 2021 01:42 PM UTC

Hi Chris,

Thanks for your update.

We checked your provided information, based on that we would like to information you that the reported “Unexpected token L in Json at position 0 at JSON.parse” is an general issue, this issue may be occurs if the data is not parsed properly at your end or if you don’t handle the null values.

So we suggest you to ensure that the data is parsed properly at your end and you have handled the null values in your end.

Please get back to us if you need further assistance. 
Regards,
Praveenkumar G
 



CR Chris Reddick replied to Praveenkumar Gajendiran August 5, 2021 12:24 PM UTC

Null values for what? My data is showing up on the front end when no filter input is created, so I'm assuming it's working with Syncfusion's code, but what null values are you referring to? If a filter doesn't return data, doesn't Syncfusion take care of that by showing "no records" or something of the sort?


Also, the code from the link I mentioned above: https://www.syncfusion.com/forums/138472/server-side-pagination has a switch statement going through possible filters. That seems very inefficient if you have multiple filters and want to filter by more than one column. I want my teammates to be able to filter any of our 20+ columns. Can you show me an example of how Syncfusion can accomplish that?



VS Vignesh Sivagnanam Syncfusion Team August 5, 2021 03:37 PM UTC

Hi Chris 

Thanks for the update 

In the previous update, we have mentioned that the issue “Unexpected token L in Json at position 0 at JSON.parse” is reproduced because of the invalid JSON not the null values.  

By default, the EJ2 Grid have support to display the null values in the grid. But when we parse the values, it is possible that the JSON format is converted in to invalid format and it cause the issue in the grid component. 

In the EJ2 Grid filtering, if the filtered values are not in the grid’s dataSource we have returned the empty array for the Items and Count as 0 to display the “No records to display”. Please refer the below sample and Screenshot for your reference, 


 

If you still facing the mentioned problem at your end, please share the below details to us that will help to validate further. 
  1. Please share the issue replicating sample
  2. Share complete grid rendering code or replicate the issue in the above sample.

Please get back to us for further assistance, 

Regards 
Vignesh Sivagnanam 



CR Chris Reddick August 8, 2021 03:27 AM UTC

It's still giving error after looking through your example.The only difference from the other example I linked to above is the way you manipulate the data with the filter. I've provided theController, Controller Action method (isolated from the controller) and front-end SF EJ2 markup code. 


PageViewController:

 public object Get()

        {

            int skip = Convert.ToInt32(HttpContext.Current.Request.QueryString["$skip"].ToString());

            int take = Convert.ToInt32(HttpContext.Current.Request.QueryString["$top"].ToString());

            //var skip = queryString["$skip"]; // paging

            //int take = Convert.ToInt32(queryString["$top"].ToString());

            string filter = HttpContext.Current.Request.QueryString["$filter"];


            var tab = new DashboardActions();

            var retTabs = tab.PageViews(skip, take, filter);


            return retTabs;


        }


Here is the PageViews method shown at the end of the controller code above (I've left out my using context statement for security):

 if (filter != null)

                    {

                        var newfiltersplits = filter;

                        var filtersplits = newfiltersplits.Split('(', ')', ' ');

                        var filterfield = filtersplits[1];

                        var filtervalue = filtersplits[3];

                        if (filtersplits.Length != 5)

                        {

                            filterfield = filter.Split('(', ')', '\'')[3];

                            filtervalue = filter.Split('(', ')', '\'')[5];

                        }

                        System.Diagnostics.Debug.WriteLine(filtervalue);

                        switch (filterfield)

                        {

                            case "TabName":

                                var recentPages = (from t in context.Tabs

                                                   where t.TabName.ToLower().StartsWith(filtervalue.ToString())

                                                   select t)

                                         .Take(20)

                                         .ToList();


                                return take != 0 ? new

                                {

                                    Items = recentPages.Skip(skip).Take(take).ToList(),

                                    Count = recentPages.Count()

                                } : new { result = recentPages, count = recentPages.Count() };

                        }

                    }


                    else

                    {

                        var recentPages = (from t in context.Tabs

                                           select t)

                         .Take(20)

                         .ToList();


                        return take != 0 ? new results

                        {

                            result = recentPages.Skip(skip).Take(take).ToList(),

                            count = recentPages.Count()

                        } : new results { result = recentPages, count = recentPages.Count() };

                    }


                }


And here is the front-end markup:

<ejs-grid id="Grid" allowPaging="true" allowFiltering="true">

    <e-grid-pageSettings pageCount="3" pageSizes="true" pageSize="10"></e-grid-pageSettings>

    <e-data-manager url="api.url.private" crossdomain="true"

                    adaptor="WebApiAdaptor"></e-data-manager>

    <e-grid-columns>

        <e-grid-column field="TabName" headerText="TabName" textAlign="Right" width="160"></e-grid-column>

        <e-grid-column field="LastModifiedOnDate" headerText="LastModifiedOnDate" width="170"></e-grid-column>

        <e-grid-column field="CreatedOnDate" headerText="CreatedOnDate" textAlign="Right" width="170"></e-grid-column>

    </e-grid-columns>

</ejs-grid>


You'll notice I took the data access code out of the controller to follow best practices. I also was serializing the return object to JSON, but you're example didn't do that so I tried to see if that would work, but to no avail. Here is the response I get when I hit enter after entering a filter value (spinning circle in middle):



PG Praveenkumar Gajendiran Syncfusion Team August 9, 2021 01:20 PM UTC

Hi Chris,

Thanks for your update. 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. Please log in using the below link.

https://www.syncfusion.com/account/login

Regards,  
Praveenkumar G 


Loader.
Up arrow icon