Load GridPanel manually with RemotePaging (without AutoLoad)

  1. #1

    Load GridPanel manually with RemotePaging (without AutoLoad)

    Hello,

    I'm using Remote Paging just like the example page below, but using DataTable instead of List<object> as data source:

    please click on "Source Code" button

    https://examples1.ext.net/#/GridPane...ilters_Remote/

    My problem is that I don't want the grid to be initially filled (AUTOLOAD).

    I need it to be loaded on a click event of a button, or in the page Load event, for example.

    But if I change the store property AutoLoad="false", the grid appears EMPTY. It will be only loaded if you click on the "Refresh" button on the paging toolbar (which triggers the RefreshData event)

    Here's my code. What's wrong?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Paging.aspx.cs" Inherits="Prototipo.Paging"
        Theme="Cabinet" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <%@ Import Namespace="Company.Prototipo" %>
    
    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                LoadGrid();
            }
        }
    
        protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
    
            FiltersTestData obj = new FiltersTestData();
    
            int totalCount = 0;
            System.Data.DataTable rangeData = obj.GetSQLData(e.Start, e.Limit, out totalCount); //pagination on the stored procedure
    
            e.TotalCount = totalCount;
            this.Store1.DataSource = rangeData;
        }
    
        public void LoadGrid()
        {
            int start, limit, cont;
            start = (String.IsNullOrEmpty(this.Store1.BaseParams["start"]) ? 0 : Convert.ToInt32(this.Store1.BaseParams["start"].ToString()));
            limit = (String.IsNullOrEmpty(this.Store1.BaseParams["limit"]) ? 10 : Convert.ToInt32(this.Store1.BaseParams["limit"].ToString()));
    
            this.Store1.DataSource = LoadGrid(start, limit, out cont);
            this.Store1.DataBind();
            this.GridPanel1.StoreID = this.Store1.ID;
            this.GridPanel1.DataBind();
        }
    
        public System.Data.DataTable LoadGrid(int start, int limit, out int total_count)
        {
            Givaudan.Cabinet.Web.Prototipo.FiltersTestData obj = new Givaudan.Cabinet.Web.Prototipo.FiltersTestData();
    
            System.Data.DataTable rangeData = obj.GetSQLData(start, limit, out total_count);
    
            return rangeData;
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example
        </title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />
        <h1>
            GridPanel with Remote Filtering, Sorting and Paging</h1>
        <p>
            Please see column header menu for apllying filters</p>
        <ext:Store runat="server" ID="Store1" AutoLoad="false" RemotePaging="true" OnRefreshData="Store1_RefreshData">
            <Proxy>
                <ext:DataSourceProxy  />
            </Proxy>
            <Reader>
                <ext:JsonReader ReaderID="Id">
                    <Fields>
                        <ext:RecordField Name="cd_stor_cabi" />
                        <ext:RecordField Name="nm_stor_cabi" />
                        <ext:RecordField Name="cd_sale_orga" />
                        <ext:RecordField Name="ds_dirt_file_impt" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <BaseParams>
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="limit" Value="10" Mode="Raw" />
                <ext:Parameter Name="sort" Value="" />
                <ext:Parameter Name="dir" Value="" />
            </BaseParams>
        </ext:Store>
        <ext:Window ID="Window1" runat="server" Width="700" Height="400" Closable="false"
            Collapsible="true" Title="Example" Maximizable="true">
            <Body>
                <ext:FitLayout ID="FitLayout1" runat="server">
                    <ext:GridPanel runat="server" ID="GridPanel1" Border="false" StoreID="Store1">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column Header="Code" DataIndex="cd_stor_cabi" Sortable="true" />
                                <ext:Column Header="Name" DataIndex="nm_stor_cabi" Sortable="true" />
                                <ext:Column Header="Sales Org." DataIndex="cd_sale_orga" Sortable="true" />
                                <ext:Column Header="Directory" DataIndex="ds_dirt_file_impt" Sortable="true" />
                            </Columns>
                        </ColumnModel>
                        <LoadMask ShowMask="true" />
                        <Plugins>
                        </Plugins>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1"
                                DisplayInfo="true" />
                        </BottomBar>
                    </ext:GridPanel>
                </ext:FitLayout>
            </Body>
        </ext:Window>
    </body>
    </html>
    Thank you!!!

  2. #2

    RE: Load GridPanel manually with RemotePaging (without AutoLoad)

    Hi,

    I am not sure about your issue


    My problem is that I don't want the grid to be initially filled (AUTOLOAD). I need it to be loaded on a click event of a button

    and


    if I change the store property AutoLoad="false", the grid appears EMPTY. It will be only loaded if you click on the "Refresh" button on the paging toolbar (which triggers the RefreshData event)

    Do you need AutoLoad or don't need? If you want to load manually then set AutoLoad="false" and initiate load request manually (Store1.reload())


    Please provide more details what's wrong on your opinion?
  3. #3

    RE: Load GridPanel manually with RemotePaging (without AutoLoad)

    I don't need AutoLoad, I want to load the grid manually.


    I checked and couldn't find a Reload() method for the STORE object. Don't you mean GridPanel.Reload()??


    If so, looking at my code, where do you think I should place this GridPanel.Reload() call ???


    If I place it in the LoadGrid() void method, it will raise the Store1_RefreshData event, which contains again a call to the method that gets data from the SQL database (obviously wrong, I don't want to call SQL twice).


    Is it something in the way I'm organizing the code?


    If you have any ideas, please let me know.


    Thanks a lot!!


    Rodrigo
  4. #4

    RE: Load GridPanel manually with RemotePaging (without AutoLoad)

    Hi Rodringo,

    I think making a call to Store1.DataBind() in your Store1_RefreshData event might solve the problem of binding the Store during an AjaxEvent.

    I simplified your sample and now the GridPanel will load the data when refresh button is clicked.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
    
    <script runat="server">
        protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            this.LoadGrid();
        }
    
        public void LoadGrid()
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <ext:ScriptManager runat="server" />
        
        <ext:Store 
            ID="Store1" 
            runat="server" 
            AutoLoad="false" 
            OnRefreshData="Store1_RefreshData">
            <Reader>
                <ext:ArrayReader ReaderID="Id">
                    <Fields>
                        <ext:RecordField Name="cd_stor_cabi" />
                        <ext:RecordField Name="nm_stor_cabi" />
                        <ext:RecordField Name="cd_sale_orga" />
                        <ext:RecordField Name="ds_dirt_file_impt" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
            <BaseParams>
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="limit" Value="10" Mode="Raw" />
                <ext:Parameter Name="sort" Value="" />
                <ext:Parameter Name="dir" Value="" />
            </BaseParams>
        </ext:Store>
        
        <ext:Window 
            ID="Window1" 
            runat="server" 
            Title="Example" 
            Width="700" 
            Height="400"
            Closable="false">
            <Body>
                <ext:FitLayout runat="server">
                    <Items>
                        <ext:GridPanel 
                            ID="GridPanel1" 
                            runat="server" 
                            Border="false" 
                            StoreID="Store1"
                            AutoExpandColumn="cd_stor_cabi">
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column Header="Code" DataIndex="cd_stor_cabi" />
                                    <ext:Column Header="Name" DataIndex="nm_stor_cabi" />
                                    <ext:Column Header="Sales Org." DataIndex="cd_sale_orga" />
                                    <ext:Column Header="Directory" DataIndex="ds_dirt_file_impt" />
                                </Columns>
                            </ColumnModel>
                            <LoadMask ShowMask="true" />
                            <BottomBar>
                                <ext:PagingToolbar 
                                    runat="server" 
                                    PageSize="10" 
                                    StoreID="Store1"
                                    DisplayInfo="true" 
                                    />
                            </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:FitLayout>
            </Body>
        </ext:Window>
    </body>
    </html>
    You could also force the Store to reload with client-side JavaScript by calling the .reload() function on the Store.

    Example

    Store1.reload();
    Hope this helps.

    Geoffrey McGill
    Founder
  5. #5

    RE: Load GridPanel manually with RemotePaging (without AutoLoad)

    thank you

Similar Threads

  1. [CLOSED] GridPanel Store with RemotePaging
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 08, 2012, 12:42 PM
  2. Replies: 22
    Last Post: May 04, 2012, 11:49 AM
  3. Replies: 13
    Last Post: Feb 29, 2012, 8:41 AM
  4. Adding rows to a GridPanel manually
    By henricook in forum 1.x Help
    Replies: 0
    Last Post: May 14, 2010, 4:20 AM
  5. Replies: 3
    Last Post: Mar 12, 2009, 3:09 PM

Posting Permissions