PDA

View Full Version : GridPanel with local paging and ajax proxy


ronaldo
Jun 24, 2021, 12:16 AM
Hi

How to do?

I saw this example with memory-proxy https://forums.ext.net/showthread.php?63044-CLOSED-Cannot-Paginate-GridPanel-on-Asp-net-Core-Grid, but I need to load store with ajax-proxy and I didn't find enablePaging="true"config.


My example (paging not working).
25542

GridPanel3.cshtml


@page "{handler?}"
@model ExtSample.Pages.GridPanel3Model
@{
Layout = null;
ViewData["Title"] = "GridPanel";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewData["Title"] - ExtSample</title>

<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var load = function () {
App.grid.getStore().load();
};
</script>
</head>
<body>
<ext-button text="Load" margin="10">
<listeners>
<click handler="load();" />
</listeners>
</ext-button>
<ext-gridPanel id="grid" title="GridPanel" width="800" height="500" frame="true" margin="10">
<store>
<ext-store autoLoad="false" pageSize="5">
<fields>
<ext-dataField name="company" />
<ext-numberDataField name="price" />
<ext-numberDataField name="change" />
<ext-numberDataField name="pctChange" />
<ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
</fields>
<proxy>
<ext-ajaxProxy url="GridPanel3/Data">
<reader>
<ext-jsonReader x-rootProperty="result" />
</reader>
</ext-ajaxProxy>
</proxy>
</ext-store>
</store>
<columns>
<ext-column text="Company" dataIndex="company" flex="1" />
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
<ext-column text="Change" dataIndex="change" renderer="change" />
<ext-column text="Change %" dataIndex="pctChange" renderer="pctChange" />
<ext-dateColumn text="Last Updated" dataIndex="lastChange" width="150" format="yyyy-MM-dd" />
</columns>
<bbar>
<ext-pagingToolbar />
</bbar>
</ext-gridPanel>
</body>
</html>


GridPanel3.cshtml.cs


using System;
using System.Collections.Generic;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ExtSample.Pages
{
public class GridPanel3Model : PageModel
{
public void OnGet()
{
}

public IActionResult OnGetData()
{
var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");

var data = new List<object>
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};

return this.Direct(data);
}
}
}


Any help is appreciated. Thanks!

Ronaldo
fabricio.murta
Jun 24, 2021, 12:21 AM
Hello Ronaldo!

Isn't this what you're looking for?

- GridPanel > Paging and Sorting > Page example in examples explorer (https://examples.ext.net/#/gridpanel/Paging_and_Sorting/Page) - project and code (https://github.com/extnet/examples.ext.net/tree/main/src/Pages/samples/gridpanel/Paging_and_Sorting/Page)

Hope this helps!
ronaldo
Jun 24, 2021, 2:38 PM
Thanks for reply Fabricio

Not exactly, I tried some alternatives based on the link above but I was unsuccessful as each grid page is loaded from the server.

Explaining better (I'm sorry):

I need all records to be loaded once from the server when the user clicks the Load button, but the grid to display the paged data locally (without calling the server on each page, since all the data has already been loaded) . It's a specific use case for a project I'm migrating.

Requirements

user accesses page without loading store autoLoad="false"
user clicks the Load button to fetch the records App.grid.getStore().load();
server returns all records once
grid presents data paged locally, allowing sorting and filtering also locally


This case was possible in v5 <ext:Store runat="server" RemotePaging="false" RemoteSort="false" RemoteFilter="false" ... >. In v7 RemotePaging="false" is missing.

Any other help?

Thank you again!

Ronaldo


* Files updated with paging structure:

25543

GridPanel3.cshtml


@page "{handler?}"
@model ExtSample.Pages.GridPanel3Model
@{
Layout = null;
ViewData["Title"] = "GridPanel";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewData["Title"] - ExtSample</title>

<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var load = function () {
App.grid.getStore().load();
};
</script>
</head>
<body>
<ext-button text="Load" margin="10">
<listeners>
<click handler="load();" />
</listeners>
</ext-button>
<ext-gridPanel id="grid" title="GridPanel" width="800" height="550" margin="10">
<store>
<ext-store autoLoad="false" pageSize="5" remoteFilter="false" remoteSort="false" >
<fields>
<ext-dataField name="company" />
<ext-numberDataField name="price" />
<ext-numberDataField name="change" />
<ext-numberDataField name="pctChange" />
<ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
</fields>
<proxy>
<ext-ajaxProxy url="GridPanel3/Data">
<reader>
<ext-jsonReader x-rootProperty="Data" x-totalProperty="TotalRecords" />
</reader>
</ext-ajaxProxy>
</proxy>
</ext-store>
</store>
<columns>
<ext-column text="Company" dataIndex="company" flex="1" />
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
<ext-column text="Change" dataIndex="change" renderer="change" />
<ext-column text="Change %" dataIndex="pctChange" renderer="pctChange" />
<ext-dateColumn text="Last Updated" dataIndex="lastChange" width="150" format="yyyy-MM-dd" />
</columns>
<bbar>
<ext-pagingToolbar />
</bbar>
</ext-gridPanel>
</body>
</html>


GridPanel3.cshtml.cs


using System;
using System.Collections.Generic;
using System.Text.Json;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ExtSample.Pages
{
public class GridPanel3Model : PageModel
{
public void OnGet()
{
}

public ContentResult OnGetData(int start, int limit, string sort)
{
// returning all records with paging structure
// no paging, sorting or filtering is needed on the server

var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");

var records = new List<object>
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};

var data = new Paging<object>
{
Data = records,
TotalRecords = records.Count
};

return Content(JsonSerializer.Serialize(data));
}

/// <summary>
/// Returned paging data structure.
/// </summary>
/// <typeparam name="T"></typeparam>
public class Paging<T>
{
/// <summary>
/// List of data entries.
/// </summary>
public List<T> Data { get; set; }

/// <summary>
/// Total amount of records so client-side paging mechanism can keep track of
/// how many records it can request from server and to properly set up the
/// paging toolbar.
/// </summary>
public int TotalRecords { get; set; }
}

}
}
fabricio.murta
Jun 24, 2021, 7:05 PM
Hello again, Ronaldo!

Then just drop the Paging class, you can return Content.JsonSerializer.Serialize(records) in your OnGetData() method and adjust your ext-jsonReader back to x-rootProperty="result" just like you had in your first example.

Then the only one missing bit you'd have is to add x-type="paging" to the Grid. The type= store property doesn't accept Paging because it brings only the enumerations straight from Ext JS. This is a facility exclusive to Ext.NET and for some reason it didn't make it to intellisense.

The missing x-type="paging" to the store was automatically assigned by Ext.NET whenever the paging toolbar was bound to the grid. In Ext.NET 7, for now, we need to tell the store it is supposed to be a paging one. This is also the only bit missing (for local paging) in your first example.

Thanks for the full code samples, by the way, this deserves we give back a full code samples with the changes integrated:



@page "{handler?}"
@model ExtSample.Pages.GridPanel3Model
@{
Layout = null;
ViewData["Title"] = "GridPanel with remote data and local paging";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewData["Title"] - ExtSample</title>

<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var load = function () {
App.grid.getStore().load();
};
</script>
</head>
<body>
<ext-button text="Load" margin="10">
<listeners>
<click handler="load();" />
</listeners>
</ext-button>
<ext-gridPanel id="grid" title="GridPanel" width="800" height="550" margin="10">
<store>
<ext-store autoLoad="false" x-type="paging" pageSize="5" remoteFilter="false" remoteSort="false">
<fields>
<ext-dataField name="company" />
<ext-numberDataField name="price" />
<ext-numberDataField name="change" />
<ext-numberDataField name="pctChange" />
<ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
</fields>
<proxy>
<ext-ajaxProxy url="GridPanel3/Data">
<reader>
<ext-jsonReader x-rootProperty="result" />
</reader>
</ext-ajaxProxy>
</proxy>
</ext-store>
</store>
<columns>
<ext-column text="Company" dataIndex="company" flex="1" />
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
<ext-column text="Change" dataIndex="change" renderer="change" />
<ext-column text="Change %" dataIndex="pctChange" renderer="pctChange" />
<ext-dateColumn text="Last Updated" dataIndex="lastChange" width="150" format="yyyy-MM-dd" />
</columns>
<bbar>
<ext-pagingToolbar />
</bbar>
</ext-gridPanel>
</body>
</html>


Model:


using System;
using System.Collections.Generic;
using System.Text.Json;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ExtSample.Pages
{
public class GridPanel3Model : PageModel
{
public void OnGet()
{
}

public ContentResult OnGetData(int start, int limit, string sort)
{
// returning all records with paging structure
// no paging, sorting or filtering is needed on the server

var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");

var records = new List<object>
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};

return Content(JsonSerializer.Serialize(records));
}
}
}


Hope this helps!
ronaldo
Jun 24, 2021, 8:06 PM
Hi Fabricio

It's working fine. I agree, full code samples is better for you, me and the entire Ext.NET community.

Thank you very much for your help and the fast reply!
fabricio.murta
Jun 25, 2021, 3:35 AM
Glad it helped, and thanks for the feedback!
Nikolas
Nov 21, 2022, 1:41 PM
Wow, this example looks good. But it seems to me that the mistake is that you didn't drop the Paging class. And because of this, the program went on to fail. My friend had something similar; he suffered for a long time until he realized the problem. He even found a new proxy server online (https://soax.com/). He also liked this proxy server much more than his old one. I also think you need to add x-type="paging" to Grid. Because, in this case, the type property does not accept "paging". You have to be very careful.