What's New?

[CLOSED] local paging shows all rows

  1. #1
    Mar 15, 2010, 6:02 PM

    [CLOSED] local paging shows all rows

    hi guys,

    I was playing with local paging example. When I load the data in Page_Load the paging will work fine. But when I create button and load the data when the user click it will shows all rows in the grid. after the user click next page then paging will work fine. So I see the problem at the first run only

    thanks






    



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>


<%@ Import Namespace="System.Collections.Generic"%>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<%@ Import Namespace="System.Xml" %>





<script runat="server">








List<mydata> data = new List<mydata>();


protected void Page_Load(object sender, EventArgs e)


{


if (!X.IsAjaxRequest)





{





}


}


protected void getDate(object source, DirectEventArgs e)


{


DateTime now = DateTime.Now;











data.Add(new mydata { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });


data.Add(new mydata { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = now });


data.Add(new mydata { company = "American Express Company", price = 52.55, change = 0.28, pctChange = 0.34, lastChange = now });


data.Add(new mydata { company = "American International Group, Inc.", price = 52.55, change = 0.28, pctChange = 0.34, lastChange = now });


data.Add(new mydata { company = "AT&amp;T Inc.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "Boeing Co.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "Caterpillar Inc.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "Citigroup, Inc.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "E.I. du Pont de Nemours and Company", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "Exxon Mobil Corp", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "General Electric Company", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });


data.Add(new mydata { company = "Government Motors Corporationp", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "Hewlett-Packard Co.", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });


data.Add(new mydata { company = "EIntel Corporation", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "International Business Machines", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });


data.Add(new mydata { company = "Johnson &amp; Johnson", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });


data.Add(new mydata { company = "JP Morgan &amp; Chase &amp; Co", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });


this.Store1.DataSource = data;


this.Store1.DataBind();


}





protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)


{


this.Store1.DataSource = data;


this.Store1.DataBind(); 


}





public class mydata


{


public string company { get; set; }


public double price { get; set; }


public double change { get; set; }


public double pctChange { get; set; }


public DateTime lastChange { get; set; }





}











</script>


<html xmlns="http://www.w3.org/1999/xhtml">


<head id="Head1" runat="server">


<title>Local Data Paging - Ext.NET Examples</title>


<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" /> 


<script type="text/javascript">


var exportData = function (selectedOnly) {


var store = GridPanel1.store;





store.directEventConfig.isUpload = true;


GridPanel1.submitData({selectedOnly : selectedOnly});


store.directEventConfig.isUpload = false;


};





var selectRecord = function (id) {


var grid = GridPanel1,


record = grid.store.getById(id);





grid.store.openPage(record, function () {


grid.getSelectionModel().selectRow(grid.store.indexOf(record));


});


};


</script>


</head>


<body>


<form id="Form1" runat="server">


<ext:ResourceManager ID="ResourceManager1" runat="server" />





<h1>The following sample demonstrates local paging in the GridPanel.</h1>





<p>1. Local Paging</p>


<p>2. You can submit data from all grid's pages in one request</p>


<p>3. If you edit data on various grid's pages then you can save in one request and changes will not be lost when you navigate beetwen pages</p>


<p>4. Get selected data from all pages</p>


<p>5. Navigate on page by record</p>





<ext:Store 


ID="Store1"


runat="server" 


>


<Reader>


<ext:JsonReader IDProperty="company">


<Fields>


<ext:RecordField Name="company" />


<ext:RecordField Name="price" Type="Float" />


<ext:RecordField Name="change" Type="Float" />


<ext:RecordField Name="pctChange" Type="Float" />


<ext:RecordField Name="lastChange" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />


</Fields>


</ext:JsonReader>


</Reader> 


</ext:Store>





<ext:GridPanel ID="GridPanel1" 


runat="server" 


StoreID="Store1" 


StripeRows="true"


Title="Array Grid" 


Width="600" 


Height="300"


AutoExpandColumn="Company">


<ColumnModel ID="ColumnModel1" runat="server">


<Columns>


<ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company">


<Editor>


<ext:TextField ID="TextField1" runat="server" />


</Editor>


</ext:Column>


<ext:Column Header="Price" Width="75" DataIndex="price">


<Editor>


<ext:TextField ID="TextField2" runat="server" />


</Editor>


</ext:Column>


<ext:Column Header="Change" Width="75" DataIndex="change" />


<ext:Column Header="Change" Width="75" DataIndex="pctChange" />


<ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="HH:mm:ss" />


</Columns>


</ColumnModel>





<SelectionModel>


<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />


</SelectionModel>


<LoadMask ShowMask="true" />


<BottomBar>


<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" />


</BottomBar>





</ext:GridPanel> 


<br /> 


<ext:Button ID="test11" Text="Get Data" runat="server">


<DirectEvents>


<Click OnEvent="getDate">


</Click>


</DirectEvents>


</ext:Button>


<ext:Label ID="Label1" runat="server" />


</form>


</body>


</html>
  2. #2
    Mar 15, 2010, 6:48 PM

    RE: [CLOSED] local paging shows all rows

    Hi,

    In the getDate add the following code after DataBind
    this.Store1.Call("load");
  3. #3
    Mar 15, 2010, 7:19 PM

    RE: [CLOSED] local paging shows all rows

    Hi,

    If you need bind/rebind data then it is better to call 'reload' method of the grid/store and bind data in the OnRefreshData handler, in this case the paging will be applied automatically
    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Xml" %>

<script runat="server">

    public List<mydata> TestData
    {
        get
        {
            DateTime now = DateTime.Now;
            List<mydata> data = new List<mydata>();
            data.Add(new mydata { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });
            data.Add(new mydata { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = now });
            data.Add(new mydata { company = "American Express Company", price = 52.55, change = 0.28, pctChange = 0.34, lastChange = now });
            data.Add(new mydata { company = "American International Group, Inc.", price = 52.55, change = 0.28, pctChange = 0.34, lastChange = now });
            data.Add(new mydata { company = "AT&amp;T Inc.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "Boeing Co.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "Caterpillar Inc.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "Citigroup, Inc.", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "E.I. du Pont de Nemours and Company", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "Exxon Mobil Corp", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "General Electric Company", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });
            data.Add(new mydata { company = "Government Motors Corporationp", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "Hewlett-Packard Co.", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });
            data.Add(new mydata { company = "EIntel Corporation", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "International Business Machines", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });
            data.Add(new mydata { company = "Johnson &amp; Johnson", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = now });
            data.Add(new mydata { company = "JP Morgan &amp; Chase &amp; Co", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = now });

            return data;
        }
    }

    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.Store1.DataSource = this.TestData;
        this.Store1.DataBind();
    }


    public class mydata
    {
        public string company { get; set; }
        public double price { get; set; }
        public double change { get; set; }
        public double pctChange { get; set; }
        public DateTime lastChange { get; set; }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
            <Reader>
                <ext:JsonReader IDProperty="company">
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                        <ext:RecordField Name="change" Type="Float" />
                        <ext:RecordField Name="pctChange" Type="Float" />
                        <ext:RecordField Name="lastChange" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
            Title="Array Grid" Width="600" Height="300" AutoExpandColumn="Company">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Price" Width="75" DataIndex="price">
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" DataIndex="change" />
                    <ext:Column Header="Change" Width="75" DataIndex="pctChange" />
                    <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="HH:mm:ss" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" />
            </BottomBar>
        </ext:GridPanel>
        <br />
        <ext:Button ID="test11" Text="Get Data" runat="server">
            <Listeners>
                <Click Handler="#{Store1}.reload();" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>

  4. #4
    Mar 26, 2010, 7:38 AM

    RE: [CLOSED] local paging shows all rows

    This - .Call("load") - would be useful to detail in the examples I think. Was scratching my head for a long time.

Similar Threads

  1. [CLOSED] Difference in Paging Toolbar behaviour between Ext.NET 1.x and 2 for Grid with remote (ashx) paging and local filtering
    By anup in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: Jun 13, 2012, 4:53 PM
  2. Gridpanel with datasource shows empty rows
    By darylpeeters in forum 2.x Help
    Replies: 2
    Last Post: May 31, 2012, 1:03 PM
  3. [CLOSED] Local Paging and loading records via DirectMethods
    By macap in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: May 31, 2011, 3:28 PM
  4. [CLOSED] Local Paging for Remote Data Issue
    By dnguyen in forum 1.x Legacy Premium Help
    Replies: 26
    Last Post: Apr 12, 2011, 12:50 AM
  5. [CLOSED] Local data paging problem
    By Timur.Akhmerov in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 20, 2010, 11:33 AM

Posting Permissions