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.
|
{
Items: [{..}, {..}, {..}, ...],
Count: 830
} |
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!
|
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() };
} |
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.
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))
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?
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):