[CLOSED] gridpanel store does not load dynamically from javascript

  1. #1

    [CLOSED] gridpanel store does not load dynamically from javascript

    I have trouble loading grid store when the page changes. Code is in javascript The store does not load when the page changes dynamically This feature worked perfectly in coolite 0.8.3.

    The code I used to change page from javascript is bottomToolbarOfGrid.changePage(value);
    Last edited by Daniil; Apr 01, 2011 at 12:26 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I tested this method and it appears to be working fine.

    Could you provide a sample? Something like this:

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        public List<object> MyData = new List<object> 
        { 
            new { test = "test1" },
            new { test = "test2" },
            new { test = "test3" },
            new { test = "test4" },
            new { test = "test5" },
            new { test = "test6" },
            new { test = "test7" },
            new { test = "test8" },
            new { test = "test9" }
        };
    
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            List<object> data = this.MyData;
            var limit = e.Limit;
            if ((e.Start + e.Limit) > data.Count)
            {
                limit = data.Count - e.Start;
            }
            List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
            e.Total = data.Count;
            this.GridPanel1.GetStore().DataSource = 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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server" OnRefreshData="Store_RefreshData">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="PagingToolbar1.changePage(2);">
            <Listeners>
                <Click Handler="PagingToolbar1.changePage(2);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    Code look like this:


    <script runat="server">
    
    function Store_Refresh(){
                var gridObject = ctl00_cphContent_grdDueRemittancesGridPanel;
                var gridObjectStore = gridObject.store;       
                pageToolbar = gridObject.getBottomToolbar();
                totalPage = gridObject.getBottomToolbar().getPageData().pages;
               
                for (var j = 1; j <= totalPage; j++) {
                    for (var i = 0; i < gridObjectStore.getCount(); i++) {
                        if (gridObjectStore.data.items[i].data.Refno == "test") {
                            selectedRow = i;
                         
                            break;
                        }
                    }
    
                    pageToolbar.changePage(j);
                }
               
            }
    
    </script>
     <ext:Panel ID="grdDueRemittancesPanel" runat="server" Border="false" Height="300">
                                                            <Content>
                                                                <ext:GridPanel ID="grdDueRemittancesGridPanel" runat="server" StripeRows="true" Header="true"
                                                                    Title="Your Remittances Due" Frame="false" Height="300" AutoExpandColumn="Description">
                                                                    <Store>
                                                                        <ext:Store ID="grdDueRemittancesStore" runat="server">
                                                                            <Reader>
                                                                                <ext:JsonReader IDProperty="grdDueRemittancesReaderID">
                                                                                    <Fields>
                                                                                        <ext:RecordField Name="RemittanceRootID" Type="String" />
                                                                                        
                                                                                    </Fields>
                                                                                </ext:JsonReader>
                                                                            </Reader>
                                                                            <AutoLoadParams>
                                                                                <ext:Parameter Name="start" Value="0" Mode="Raw" AutoDataBind="true"/>
                                                                                <ext:Parameter Name="limit" Value="10" Mode="Raw"  AutoDataBind="true"/>
                                                                            </AutoLoadParams>
                                                                  </ext:Store>
                                                                    </Store>
                                                                    <LoadMask ShowMask="true" />
                                                                    <SelectionModel>
                                                                        <ext:RowSelectionModel ID="grdDueRemittancesSelectedRowModel" runat="server SingleSelect="true">
                                                                            <Listeners>
                                                                                <RowSelect Fn="grdRemittance_Select" Buffer="250" />
                                                                                <RowDeselect Fn="grdRemittance_Deselect" Buffer="250" />
                                                                            </Listeners>
                                                                        </ext:RowSelectionModel>
                                                                    </SelectionModel>
                                                                    <ColumnModel ID="grdDueRemittancesColumnModel" runat="server">
                                                                        <Columns>
                                                                            <ext:Column Header="Employer Number" Width="100" Sortable="true" DataIndex="EmployerNumber"
                                                                                Hidden="True" />
                                                                           
                                                                            </ext:Column>
                                                                        </Columns>
                                                                    </ColumnModel>
                                                                    <Plugins>
                                                                        <ext:GridFilters runat="server" ID="grdDueRemittancesGridFilter" Local="true">
                                                                            <Filters>
                                                                              
                                                                                <ext:DateFilter DataIndex="PayrollThruDate">
                                                                                    <DatePickerOptions runat="server" TodayText="Today" />
                                                                                </ext:DateFilter>
                                                                            </Filters>
                                                                        </ext:GridFilters>
                                                                    </Plugins>
                                                                    <BottomBar>
                                                                        <ext:PagingToolbar ID="grdDueRemittancesPagingToolBar" runat="server" StoreID="grdDueRemittancesStore"
                                                                            PageSize="10" DisplayInfo="true" DisplayMsg="{0} - {1} of {2}" HideRefresh="true"
                                                                            PageIndex="1">
                                                                            <Items>
                                                                                <ext:Label ID="Label2" runat="server" Text="Records per page:" />
                                                                                <ext:ComboBox ID="ComboBox1" runat="server" Width="50">
                                                                                    <Items>
                                                                                        <ext:ListItem Text="10" Value="10" />
                                                                                        <ext:ListItem Text="25" Value="25" />
                                                                                        <ext:ListItem Text="50" Value="50" />
                                                                                        <ext:ListItem Text="100" Value="100" />
                                                                                        <ext:ListItem Text="All" Value="All" />
                                                                                    </Items>
                                                                                   
                                                                                    <SelectedItem Value="10" />
                                                                                </ext:ComboBox>
                                                                            </Items>
                                                                        </ext:PagingToolbar>
                                                                    </BottomBar>
                                                                </ext:GridPanel>

    Quote Originally Posted by Daniil View Post
    Hi,

    I tested this method and it appears to be working fine.

    Could you provide a sample? Something like this:

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        public List<object> MyData = new List<object> 
        { 
            new { test = "test1" },
            new { test = "test2" },
            new { test = "test3" },
            new { test = "test4" },
            new { test = "test5" },
            new { test = "test6" },
            new { test = "test7" },
            new { test = "test8" },
            new { test = "test9" }
        };
    
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            List<object> data = this.MyData;
            var limit = e.Limit;
            if ((e.Start + e.Limit) > data.Count)
            {
                limit = data.Count - e.Start;
            }
            List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
            e.Total = data.Count;
            this.GridPanel1.GetStore().DataSource = 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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server" OnRefreshData="Store_RefreshData">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="PagingToolbar1.changePage(2);">
            <Listeners>
                <Click Handler="PagingToolbar1.changePage(2);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 21, 2011 at 4:19 PM. Reason: Please use [CODE] tags
  4. #4
    Where is Store_Refresh actually called?
  5. #5
    I think - in the Button Click's handler.

    Really, there can be more details that is required to reproduce the problem and, follow, to solve.

    @pattake, I'm still unable to reproduce the problem.

    The following example works fine.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] {"test1"},
                    new object[] {"test2"},
                    new object[] {"test3"},
                    new object[] {"test4"},
                    new object[] {"test5"},
                    new object[] {"test6"},
                    new object[] {"test7"},
                    new object[] {"test"},
                    new object[] {"test9"}
                };
                store.DataBind();
            }
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var selectedRow
        
            var Store_Refresh = function () {
                var gridObject = GridPanel1;
                var gridObjectStore = gridObject.store;      
                pageToolbar = gridObject.getBottomToolbar();
                totalPage = gridObject.getBottomToolbar().getPageData().pages;
                
                for (var j = 1; j <= totalPage; j++) {
                    for (var i = 0; i < gridObjectStore.getCount(); i++) {
                        if (gridObjectStore.data.items[i].data.test == "test") {
                            selectedRow = i;
                          
                            break;
                        }
                    }
     
                    pageToolbar.changePage(j);
                }
                
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Store_Refresh">
            <Listeners>
                <Click Handler="Store_Refresh()" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    Are there exceptions, errors when you run your code?
  6. #6
    Thanks for reply
    It works fine while we run but if you remove one item from the store and debug in store_Refresh function, you can see that gridObjectStore.getCount() is always 3. It should be 2 when page reaches 3.



    Thanks





    Quote Originally Posted by Daniil View Post
    I think - in the Button Click's handler.

    Really, there can be more details that is required to reproduce the problem and, follow, to solve.

    @pattake, I'm still unable to reproduce the problem.

    The following example works fine.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] {"test1"},
                    new object[] {"test2"},
                    new object[] {"test3"},
                    new object[] {"test4"},
                    new object[] {"test5"},
                    new object[] {"test6"},
                    new object[] {"test7"},
                    new object[] {"test"},
                    new object[] {"test9"}
                };
                store.DataBind();
            }
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var selectedRow
        
            var Store_Refresh = function () {
                var gridObject = GridPanel1;
                var gridObjectStore = gridObject.store;      
                pageToolbar = gridObject.getBottomToolbar();
                totalPage = gridObject.getBottomToolbar().getPageData().pages;
                
                for (var j = 1; j <= totalPage; j++) {
                    for (var i = 0; i < gridObjectStore.getCount(); i++) {
                        if (gridObjectStore.data.items[i].data.test == "test") {
                            selectedRow = i;
                          
                            break;
                        }
                    }
     
                    pageToolbar.changePage(j);
                }
                
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Store_Refresh">
            <Listeners>
                <Click Handler="Store_Refresh()" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    Are there exceptions, errors when you run your code?
  7. #7
    Hi,

    Please call the following code after record removing
    #{GridPanel1}.store.load(#{GridPanel1}.store.lastOptions);
    please see the following sample
    https://examples1.ext.net/#/GridPane...l_Data_Paging/
  8. #8
    Generally speaking, .changePage() is not so good to through all records.

    We would suggest you to use the following code:
    var Store_Refresh = function() {
        var gridObject = GridPanel1;
        var gridObjectStore = gridObject.store;
        pageToolbar = gridObject.getBottomToolbar();
        totalPage = gridObject.getBottomToolbar().getPageData().pages;
    
        Ext.each(gridObjectStore.getAllRange(), function (record, index) {
            if (record.data.test == "test") {
                alert(index);
            }
        });
    }

Similar Threads

  1. [CLOSED] How to load store from javascript, MVC
    By RCM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 18, 2012, 12:20 AM
  2. Replies: 2
    Last Post: Nov 23, 2011, 1:02 AM
  3. [CLOSED] Load GridPanel dynamically
    By methode in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 13, 2010, 4:46 AM
  4. [CLOSED] Dynamically set store from Javascript and Codebehind
    By CMA in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 10, 2009, 12:15 PM
  5. Dynamically create GridPanel and Store
    By whitvanilla in forum 1.x Help
    Replies: 4
    Last Post: Jun 18, 2009, 10:18 PM

Posting Permissions