[CLOSED] Array Grid with Paging and Remote Reloading does not working properly

[jesperhp]

https://examples2.ext.net/#/GridPane...rayWithPaging/

Hi I am using Array Grid with Paging and Remote Reloading

it works properly when I use it with default set value in store but its create problem when I select any value from list and then use nextPage from paging,

the issue is that, its not update params like Page# , StartValue and LimitValue

<ext:Viewport ID="fitLayoutMain" runat="server" Layout="FitLayout" Visible="true"
        Region="Center" Hidden="false">
        <Items>
            <ext:Panel ID="PanelContent" runat="server" Layout="Fit" Region="Center">
                <Items>
                    <ext:GridPanel ID="GridPanel_Companies" runat="server" IDMode="Explicit" Frame="true">
                        <Store>
                            <ext:Store runat="server">
                                <Fields>
                                </Fields>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" DataIndex="CompanyID" Text="ID">
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" DataIndex="Name" Text="Name" Width="150px">
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GridView ID="view" runat="server" StripeRows="true" />
                        </View>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                    <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="10" />
                                    <ext:Label ID="Label1" runat="server" Text="Pagesize" />
                                    <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                    <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                        <Items>
                                            <ext:ListItem Text="25" />
                                            <ext:ListItem Text="50" />
                                            <ext:ListItem Text="100" />
                                            <ext:ListItem Text="250" />
                                            <ext:ListItem Text="500" />
                                            <ext:ListItem Text="1000" />
                                            <ext:ListItem Text="2500" />
                                            <ext:ListItem Text="10000" />
                                        </Items>
                                        <SelectedItems>
                                            <ext:ListItem Value="50" />
                                        </SelectedItems>
                                        <Listeners>
                                            <Select Handler="#{GridPanel_Companies}.store.pageSize = parseInt(this.getValue()); #{GridPanel_Companies}.store.proxy.setExtraParam('limit', #{GridPanel_Companies}.store.pageSize); #{GridPanel_Companies}.store.reload(); " />
                                        </Listeners>
                                    </ext:ComboBox>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>

On select value from list how to update value of page#, startvalue and limitvalue??????, by the way I manually Update LimitValue, but how to update Page# and LimitValue,
By the ways its should automatically update params values like when we move NextPage

Thanks

[Daniil]

Hi @jesperhp,

Could you, please, provide a runnable test? And exact steps to reproduce.

1. Do something.
2. Do another thing.
etc.

[jesperhp]

Hi @jesperhp,

Could you, please, provide a runnable test? And exact steps to reproduce.

1. Do something.
2. Do another thing.
etc.

<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
   
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Ext.NET v2 Example</title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }


        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindData();
        }


        private void BindData()
        {
            Store store = this.GridPanel_Companies.GetStore();


            store.DataSource = this.Data;
            store.DataBind();
        }


        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;


                return new 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[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, 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[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, 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 }
            };
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false" />
    <ext:Viewport ID="fitLayoutMain" runat="server" Layout="FitLayout" Visible="true"
        Region="Center" Hidden="false">
        <Items>
            <ext:Panel ID="PanelContent" runat="server" Layout="Fit" Region="Center">
                <Items>
                    <ext:GridPanel ID="GridPanel_Companies" runat="server" Frame="true" IDMode="Explicit">
                        <Store>
                            <ext:Store runat="server" PageSize="15" OnReadData="MyData_Refresh">
                                <Fields>
                                    <ext:ModelField Name="CompanyID" />
                                    <ext:ModelField Name="Name" />
                                </Fields>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" DataIndex="CompanyID" Text="ID">
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" DataIndex="Name" Text="Name" Width="150px">
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GridView ID="view" runat="server" StripeRows="true" />
                        </View>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                    <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="10" />
                                    <ext:Label ID="Label1" runat="server" Text="Pagesize" />
                                    <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                    <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                        <Items>
                                            <ext:ListItem Text="5" />
                                            <ext:ListItem Text="10" />
                                            <ext:ListItem Text="15" />
                                            <ext:ListItem Text="20" />
                                            <ext:ListItem Text="50" />
                                            <ext:ListItem Text="1000" />
                                        </Items>
                                        <SelectedItems>
                                            <ext:ListItem Value="15" />
                                        </SelectedItems>
                                        <Listeners>
                                            <Select Handler="#{GridPanel_Companies}.store.pageSize = parseInt(this.getValue()); #{GridPanel_Companies}.store.reload(); " />
                                        </Listeners>
                                    </ext:ComboBox>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>

Here I have issue with List paging, the test Provide here working fine but when I call my server side controller then it's working stop, means how to implement server side controller??

Server side controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using InfoHelpDeskWebApp.Models;
using InfoHelpDeskWebApp.HelperClasses;
using Ext.Net;
namespace InfoHelpDeskWebApp.Controllers
{
    public class CompaniesController : Controller
    {
        //
        // GET: /Companies/

        private HelpDeskDBSet db = new HelpDeskDBSet();
            public ActionResult Index()
        {
            return View("CompanyPanel");
        }
        
        public ActionResult getCompaniespagedWise(int limit, string sort, string dir, string gridfilters, int page, int start = 0)
        {
            IEnumerable<object> IEnumrable_AllCompanies = from company in db.Companies
                                                          select new
                                                          {
                                                              CompanyID = company.CompanyID,
                                                              Name = company.Name,
                                                          };
            List<object> List_ALL_Companies = IEnumrable_AllCompanies.ToList();

            List_ALL_Companies = new HelperClasses.FilterSortingHelper().FilterData(gridfilters, List_ALL_Companies);
            List_ALL_Companies = new HelperClasses.FilterSortingHelper().SortData(sort, dir, List_ALL_Companies);


            int totalrecords = List_ALL_Companies.Count;

            if ((start + limit) > List_ALL_Companies.Count)
            {
                limit = List_ALL_Companies.Count - start;
            }
            PagedRecords paged = new PagedRecords() { TotalRecords = totalrecords, Records = List_ALL_Companies.GetRange(start, limit) };

            var jsonData = new
            {
                rows = paged.Records,
                total = paged.TotalRecords
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }
             
    }
}

Here I want update params like limit, start and page when I select any value from list of dropdown just like when here select any value from this link

https://examples2.ext.net/#/GridPane...rayWithPaging/

Thanks

[Daniil]

Hard to say what is going wrong.

Please provide a full sample which doesn't work.

[jesperhp]

Hard to say what is going wrong.

Please provide a full sample which doesn't work.

HI
I Have upload full sample with server side controller
the link where you can download sample project
https://dl.dropboxusercontent.com/u/...raryPaging.rar

Please add the ext.net dll of webforms 2.2, if I add dll then size increase that's why add dll himself

The issue is that when select any value from list then paging does not work properly because of the value of " start and limit" does not update according to selected value from list

by the way I want functionality same like that tutorial for nextpage as well as array paging https://examples2.ext.net/#/GridPanel/...rayWithPaging/


Thanks

[Daniil]

Why do you set up the "start" parameter as pageSize?

Also I would try to use a Store's loadPage method instead of the reload one, because, I think, you have to load the first page if you change the page size, to avoid messing the rows up.

This appears to be working.

<Select Handler="#{GridPanel_Companies}.store.pageSize = parseInt(this.getValue()); #{GridPanel_Companies}.store.proxy.setExtraParam('limit', #{GridPanel_Companies}.store.pageSize); #{GridPanel_Companies}.store.loadPage(1); " />

[jesperhp]

Why do you set up the "start" parameter as pageSize?

Also I would try to use a Store's loadPage method instead of the reload one, because, I think, you have to load the first page if you change the page size, to avoid messing the rows up.

This appears to be working.

<Select Handler="#{GridPanel_Companies}.store.pageSize = parseInt(this.getValue()); #{GridPanel_Companies}.store.proxy.setExtraParam('limit', #{GridPanel_Companies}.store.pageSize); #{GridPanel_Companies}.store.loadPage(1); " />

Thanks a lot

It's working