PDA

View Full Version : [OPEN] [#1843] GridPanel remote paging problems



Fla
Nov 11, 2020, 5:41 PM
Hi,
Sorry, I write here, even if my company has a premium account (had purchased Ext.Net 7.1), because i don't know how to subscribe to the forum as premium user. :(

Some years ago I worked with an older version of this library, but now I've some problems with the new one due to lack of examples and documentation for Ext.Net 7.1 version.
In the specific I'm facing with some problems to perform remote paging with gridpanels:
I've followed an old example on your site (here: https://mvc.ext.net/#/GridPanel_Paging_and_Sorting/Remote/ ).
I'm able to perform remote sorting and filtering, but i noticed that there isn't any class Paging<T> to use for paging.
So, I don't know how to convert the following code:

List<Plant> rangePlants = (start < 0 || limit < 0) ? plants : plants.GetRange(start, limit);
return new Paging<Plant>(rangePlants, plants.Count);

Starting from the old one, is it possible to have an updated working example for Ext.Net 7 with Asp.Net MVC Core 3.1?

Thank you very much,
Best Regards

fabricio.murta
Nov 12, 2020, 12:26 AM
Hello @Fla, and welcome to Ext.NET forums!

If you are a premium subscriber, contact us at hello@ext.net and we'll confirm your subscription to promote your account to a premium user.

For the issue you pointed, we'll try to wrap up a remote paging example and share here, or let you know if there's something that needs to be fixed. We'll post a follow up here soon.

Fla
Nov 12, 2020, 9:26 AM
Thanks Fabricio,
I've sent an email for my subscription confirmation.
Regarding my issue:
Consider that my gridpanel has an ajax proxy, now my RemotePager class retrieves a List<Object> to the controller and the related action returns the following to the proxy:
return Json(the List<Object>); but it's obviously wrong.

In fact I only need to know what to use for retrieving a pagination result from action to proxy. I'm also using the paging toolbar plugin.

Regards,
Fla

fabricio.murta
Nov 12, 2020, 7:48 PM
Hello @Fla!

I see you are already in the premium group, seems the email went well. I have moved the thread to the 7.x Classic Premium Help (https://forums.ext.net/forumdisplay.php?48) category.

About the explanation you gave, it is not really clear to me what you mean. If you already have drafted a grid panel with paging and receiving this List<Object>, can you share the simplified version just so we can advice you over what you have on hands?

Otherwise, we will try to port the MVC (or its WebForms equivalent) to Ext.NET 7, and there's a chance the final implementation may not fit your scenario.

Looking forward to your follow-up!

Fla
Nov 12, 2020, 10:04 PM
Hi Fabricio,
I'm able to perform sorting and filtering of a list of objects, using the old example of the plants of Ext.Net 5.3, but not the remote paging, because I don't know what my action has to return to the ajax proxy.
Example:
in your old example the remote model has this code:



public static Paging<Plant> PlantsPaging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<Plant> plants = Plant.GetPlants();
.
.
.
.

List<Plant> rangePlants = (start < 0 || limit < 0) ? plants : plants.GetRange(start, limit);

return new Paging<Plant>(rangePlants, plants.Count);
}


and the action controller is:



public ActionResult Read(StoreRequestParameters parameters)
{
return this.Store(Plant.PlantsPaging(parameters));
}


In Ext.Net 7 there isn't a Pagin<T> class, so i don't know what to return as action result. In my class now I'm returning a List<Item> as the following:


public static List<Item> GetItems(int page, int start, int limit, string sort, string filter)
{
List<Item> items = Item.GetItemsFromDB();
.....
List<Item> rangeItems = (start < 0 || limit < 0) ? items: items.GetRange(start, limit);

return rangeItems ; // there is no Paging<T> class :(
}


and my action is:



public ActionResult Read(int page, int start, int limit, string sort, string filter)
{
List<Item> items = getItems(int page, int start, int limit, string sort, string filter);
return Json(items).
}


But it's wrong because I only return the 'getranged' list, without any info about the total count, so the pagingtoolbar plugin always has only one page.
Ex: My gridpanel page size is 10, the call to Item.GetItemsFromDB() returns 50 elements and the model method GetItems returns a list of the top 10 elements.
What i have to return from the action?
In the definition of the PagingToolbarTagHelper class there is the following comment:


"// The packet sent back from the server
// would have this form: { "success": true, "results": 2000, "items": [ // ***Note:**
// this must be an Array { "id": 1, "name": "Bill", "occupation": "Gardener" },
// { "id": 2, "name": "Ben", "occupation": "Horticulturalist" }, ... { "id": 25,
// "name": "Sue", "occupation": "Botanist" } ] }"

So it seems that i must return an object with a success, an int with the total count of items and the ranged list.

I hope this helps.

Regards,
Flaviano

fabricio.murta
Nov 13, 2020, 5:54 PM
Hello again, Flaviano!

You seem to be going the right way here. You'd need to craft the response the way Ext JS will understand. I have checked WebForms' Grid Panel > Paging and Sorting > Page (https://examples5.ext.net/#/GridPanel/Paging_and_Sorting/Page/) example and the response when I switch a page comes like:



serviceResponse: {
success: true,
data: {
"data": [{
"EmployeeID":2,"LastName":"Fuller","FirstName":" 4878787","Title":"Vice President, Sales","TitleOfCourtesy":"","BirthDate":"1952-02-19T00:00:00","HireDate":"1992-08-15T00:00:00","Address":"908 W. Capital Way","City":"Tacoma 2020","Region":"WA","PostalCode":"","Country":"USA","HomePhone":"(206) 555-9482","Extension":"3457","Notes":""
}, {
"EmployeeID":5,"LastName":"jjmmm","FirstName":"Stevenn","Title":"Sales Manager","TitleOfCourtesy":"","BirthDate":"1955-03-04T00:00:00","HireDate":"1993-10-17T00:00:00","Address":"","City":"","Region":"","PostalCode":"","Country":"UK","HomePhone":"(71) 555-4848","Extension":"888","Notes":""
}, {
"EmployeeID":7,"LastName":"King","FirstName":"Robertss","Title":"Sales Representative","TitleOfCourtesy":"","BirthDate":"1960-05-29T00:00:00","HireDate":"1994-01-02T00:00:00","Address":"Edgeham Hollow Winchester Way","City":"London","Region":"","PostalCode":"","Country":"UK","HomePhone":"(71) 555-5598","Extension":"465","Notes":""
}],
"total": 9
}
}


And we still don't have an object within Ext.NET 7 to do that for you. Basically something like this:



public class PagingResponse
{
public bool Success { get; set; }
public PagingResult Data { get; set; }
}

public class PagingResult
{
public List<object> Data { get; set; }
public int Total { get; set; }
}

// This may also be needed if the outer part needs to be wrapped
public class ProxyResponse
{
public string Script { get; set; }
public PagingResponse ServiceResponse { get; set; }
}


As you may have noticed, the format here is different than what you read in the comments (which are extracted straight off Sencha documentation) just because it is a slightly different example. Looking at the example you pointed MVC's Grid Panel > Paging and Sorting > Remote (https://mvc.ext.net/#/GridPanel_Paging_and_Sorting/Remote/):

Response upon page load:


{
"data": [{
"Common":"Bloodroot","Botanical":"Sanguinaria canadensis","Zone":"4","ColorCode":"E7E7E7","Light":"Mostly Shady","Price":2.44,"Availability":"2006-03-15T00:00:00","Indoor":true
}, {
"Common":"Blue Gentian","Botanical":"Gentiana","Zone":"4","ColorCode":"EEEEEE","Light":"Sun or Shade","Price":8.56,"Availability":"2006-05-02T00:00:00","Indoor":false
}, {
"Common":"Buttercup","Botanical":"Ranunculus","Zone":"4","ColorCode":"E1E1E1","Light":"Shade","Price":2.57,"Availability":"2006-06-10T00:00:00","Indoor":true
}, {
"Common":"Butterfly Weed","Botanical":"Asclepias tuberosa","Zone":"Annual","ColorCode":"FFFFFF","Light":"Sunny","Price":2.78,"Availability":"2006-06-30T00:00:00","Indoor":false
}, {
"Common":"California Poppy","Botanical":"Eschscholzia californica","Zone":"Annual","ColorCode":"FFFFFF","Light":"Sunny","Price":7.89,"Availability":"2006-03-27T00:00:00","Indoor":false
}],
"total": 36
}


Which results just to the suggested PaginResult class/object above. The List<object> could be, instead, a List<Plant> for further typing strength.

Although the format is still different from the documentation, this should be something that will, effectively, work in case you try to reproduce the documented structure and it doesn't.

Hope this helps!

Fla
Nov 17, 2020, 10:37 AM
Hi,
I fixed the problem creating an interface between ajax proxy and data.


public class RemotePagingResponse<T> where T : class
{
private List<T> _items = new List<T>();

[JsonProperty("success")]
public bool Success { get; set; }

[JsonProperty("results")]
public int Total { get; set; }

[JsonProperty("items")]
public List<T> Items
{
get { return _items; }
set { _items = value ?? new List<T>(); }
}
}B


The action method simply returns a Json(result).

However please notice that probably there is a bug in your ajax proxy, because the rootproperty of its reader doesn't work as expected and described in your class comments.
As described we should have a reader like the following:


<ext-jsonReader type="Json" rootProperty="items" totalProperty="results" successProperty="success" />

but I receiveded console error "ReferenceError: items is not defined".
After some attempts the solution found is:


<ext-jsonReader type="Json" rootProperty="function(data){return data.items;}" totalProperty="results" successProperty="success" />


Regards,
Fla

fabricio.murta
Nov 18, 2020, 2:10 AM
Hello Flaviano!

Glad you could find a solution, and thanks for reporting the issue!

But it is a little hard to follow if we don't have a test case. We may log an issue and fix this for the next versions of Ext.NET 7 if you could provide a test case where we can reproduce the issue you described. Otherwise, there would be just too many variations and we may just not reproduce what you do.

The rootProperty setting at a shallow inspection looks right, and it would be great if we could have a test case to reproduce the scenario and either advise on how to handle that case or log an issue to eventually have it sorted out in Ext.NET itself.

Looking forward to your follow-up!

fabricio.murta
Nov 23, 2020, 7:51 PM
Hello again, Flaviano!

We have discussed the paging feature today and decided on logging an issue to implement a more straightforward experience with the feature. We have then logged issue #1843 (https://github.com/extnet/Ext.NET/issues/1843) and will post an update here as soon as we get some mechanisms to improve grid data paging interactions between client and server.