GridPanel with local paging and ajax proxy

  1. #1

    GridPanel with local paging and ajax proxy

    Hi

    How to do?

    I saw this example with memory-proxy https://forums.ext.net/showthread.ph...-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).
    Click image for larger version. 

Name:	gridpaging.png 
Views:	124 
Size:	66.8 KB 
ID:	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
  2. #2
    Hello Ronaldo!

    Isn't this what you're looking for?

    - GridPanel > Paging and Sorting > Page example in examples explorer - project and code

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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:

    Click image for larger version. 

Name:	gridpaging3.png 
Views:	118 
Size:	58.3 KB 
ID:	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; }
            }
    
        }
    }
    Last edited by ronaldo; Jun 24, 2021 at 3:03 PM.
  4. #4
    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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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!
  6. #6
    Glad it helped, and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    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. 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.
    Last edited by Nikolas; Nov 24, 2022 at 8:51 AM.

Similar Threads

  1. [CLOSED] local paging in the GridPanel
    By tad in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 28, 2014, 5:55 AM
  2. [CLOSED] gridpanel with local paging. Maintain checkbox selection while paging
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 20, 2013, 10:20 AM
  3. [CLOSED] Local sorting with local filtering and paging
    By g-tech in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 10, 2013, 3:36 AM
  4. local paging using http proxy and partialview
    By craig2005 in forum 1.x Help
    Replies: 9
    Last Post: Jan 05, 2011, 7:04 PM
  5. Replies: 0
    Last Post: Aug 16, 2010, 10:28 PM

Tags for this Thread

Posting Permissions