[CLOSED] GridPanel PagingToolbar Navigation Problem

  1. #1

    [CLOSED] GridPanel PagingToolbar Navigation Problem

    I has a gridPanel called grdSugestoes in my aspx page. See the code of my gridPanel for details with Store, PagingToolbar, etc... just below in the thread...

    The store call a WebService, and this WebService returns a paging records, follow this exemple
    https://examples2.ext.net/#/GridPane...ON_WebService/

    So my grid is started with 5 records oft 345... its working fine
    Attachment 3749

    I move to last page... it´s working fine too...
    Attachment 3750

    When I change a pagesize to 20 in combobox (I inserted a combobox follow this exemple https://examples2.ext.net/#/GridPane...rayWithPaging/), no records are returned...

    Where am I wrong? is there anything I can do for this paging function properly?

    <ext:GridPanel runat="server" ID="grdSugestoes" Title="Sugestões" Frame="true" Layout="FitLayout" IconCls="icon-sugestoes" ButtonAlign="Right" Flex="3">
                        <Store>
                            <ext:Store ID="Store1" runat="server" RemoteSort="true" PageSize="10">
                                <Proxy>
                                    <ext:AjaxProxy Json="true" Url="~/App/JSonDataPaging.asmx/Sugestoes_DAL">
                                        <ActionMethods Read="POST" />
                                        <Reader>
                                            <ext:JsonReader Root="d.Data" TotalProperty="d.TotalRecords" />
                                        </Reader>
                                    </ext:AjaxProxy>
                                </Proxy>
                                <AutoLoadParams>
                                    <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                    <ext:Parameter Name="limit" Value="10" Mode="Raw" />
                                </AutoLoadParams>
                                <Parameters>
                                    <ext:StoreParameter Name="filter"  Value="getFilter()" Mode="Raw" />
                                </Parameters>
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField  Name="IDSugestao" />
                                            <ext:ModelField  Name="Data" Type="Date" DateFormat="M$" />
                                            <ext:ModelField  Name="Descricao" />
                                            <ext:ModelField  Name="Tipo" />
                                            <ext:ModelField  Name="IDStatusDesenvolvimento_Descricao" />
                                            <ext:ModelField  Name="Situacao" />
                                            <ext:ModelField  Name="Solicitante" />
                                            <ext:ModelField  Name="SolicitanteEmail" />
                                            <ext:ModelField  Name="IDCronograma_Descricao" />
                                            <ext:ModelField  Name="DataSolucao" Type="Date" DateFormat="M$"/>
                                            <ext:ModelField  Name="Solucao" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Sorters>
                                    <ext:DataSorter Property="IDSugestao" Direction="DESC" />
                                </Sorters>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column 
                                    runat="server"
                                    ColumnID="Details" 
                                    Header=""
                                    DataIndex=""
                                    Width="30" 
                                    Align="Center" 
                                    Fixed="true" 
                                    MenuDisabled="true" 
                                    Resizable="false">
                                    <Renderer Fn="sugestaoDetailsRender"/>                    
                                </ext:Column>
                                <ext:Column runat="server" Text="ID" DataIndex="IDSugestao" Width="75px" Sortable="true" />
                                <ext:DateColumn runat="server" Text="Data" DataIndex="Data" Width="75px" Sortable="true" Format="dd/MM/yyyy" />
                                <ext:Column runat="server" Text="Descrição" DataIndex="Descricao" Width="300px" Sortable="true" />
                                <ext:Column runat="server" Text="Tipo" DataIndex="Tipo" Width="100px" Sortable="true" />
                                <ext:Column runat="server" Text="Status do Desenvolvimento" DataIndex="IDStatusDesenvolvimento_Descricao" Width="150px" Sortable="true" />
                                <ext:Column runat="server" Text="Situação" DataIndex="Situacao" Width="100px" Sortable="true" />
                                <ext:Column runat="server" Text="Solicitante" DataIndex="Solicitante" Width="100px" Sortable="true" />
                                <ext:Column runat="server" Text="E-mail do Solicitante" DataIndex="SolicitanteEmail" Width="120px" Sortable="true" />
                                <ext:Column runat="server" Text="Cronograma" DataIndex="IDCronograma_Descricao" Width="120px" Sortable="true" />
                                <ext:DateColumn runat="server" Text="Corrigido em" DataIndex="DataSolucao" Width="75px" Format="dd/MM/yyyy" Sortable="true" />
                                <ext:Column runat="server" Text="Solução" DataIndex="Solucao" Width="300px" Sortable="true" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" mode="Single" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="tbPagingSugestoes" runat="server" DisplayInfo="true"
                                DisplayMsg="Exibindo sugestões {0} - {1} of {2}" EmptyMsg="Sem sugestões para exibição">
                                <Items>
                                    <ext:Label ID="Label1" runat="server" Text="Page size:" />
                                    <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                    <ext:ComboBox ID="cmbPageSize" runat="server" Width="80">
                                        <Items>
                                            <ext:ListItem Text="5" />
                                            <ext:ListItem Text="10" />
                                            <ext:ListItem Text="20" />
                                            <ext:ListItem Text="30" />
                                        </Items>
                                        <SelectedItems>
                                            <ext:ListItem Value="10" />
                                        </SelectedItems>
                                        <Listeners>
                                            <Select Handler="#{grdSugestoes}.store.pageSize = parseInt(this.getValue(), 10); #{grdSugestoes}.store.load();" />
                                        </Listeners>
                                    </ext:ComboBox>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                        <Listeners>
                            <CellClick Fn="cellClick" />
                            <CellDblClick/>
                        </Listeners>       
                        <DirectEvents>
                            <CellClick 
                                OnEvent="ShowDetails" 
                                Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
                            </CellClick>
                            <CellDblClick  
                                OnEvent="ShowDetails" 
                                Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
                            </CellDblClick>
                        </DirectEvents>  
                        <Buttons>
                            <ext:Button runat="server" ID="btnAdd" Icon="ApplicationAdd" Text="Adicionar">
                            <DirectEvents>
                                    <Click OnEvent="AddSugestao" 
                                    Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
                                    </Click> 
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button runat="server" ID="btnDetails" Icon="ApplicationEdit" Text="Detalhar">
                                <DirectEvents>
                                    <Click OnEvent="ShowDetails" 
                                    Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
                                    </Click> 
                                </DirectEvents>
                            </ext:Button>
                        </Buttons>
                    </ext:GridPanel>
    Last edited by Daniil; Jan 23, 2012 at 2:55 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I think it's also required to change the limit parameter.

    Please try to replace:
    <ext:Parameter Name="limit" Value="10" Mode="Raw" />
    with

    <ext:XScript runat="server">
        <script type="text/javascript">
            var getLimit = function () {
                var limit,
                    combo = #{cmbPageSize};
                if (combo) {
                    limit = parseInt(combo.getValue(), 10);
                }
    
                return limit || 10;
            };
        </script>
    </ext:XScript>
    
    ...
    
    <ext:Parameter Name="limit" Value="getLimit()" Mode="Raw" />
  3. #3
    Hi Daniil...thank you for your response...

    Your code works fine...

    But de navigation problem remains...

    I realized that de problem is in the Start parameter...

    When pagesize is 10 and I move to last page, the Start parameter is filled with number 340 (there are 345 records in my query)...
    When I change a pagesize (cmbPageSize) to 30, the Start parameter is filled with number 2040...

    I need set Start parameter to 0 when I change a cmbPageSize SelectItem...

    I´m sorry about my dificult in resolve this problem for myself... I do not know how to access the Start parameter in the grid ...

    can you help me?
  4. #4
    You can deal with the start parameter the same way that I deal with the limit parameter.

    Set up a function named, for example, "getStart" and return a required value.
  5. #5
    Hi Daniil...

    Sorry, but I must have done something wrong...

    I insert a line with command alert('limit') in script function getLimit() and a line with command alert('start') in getStart() function...

    This script functions are fired when the page load only..

    I need fired this script functions (and change de start and limit parameter values) when the combo cmbPageSize is changed...

    What am I doing wrong?

    Thanks for any help...
  6. #6
    Please use:
    store.proxy.setExtraParam("start", 0);
    or
    store.load({
        params : {
            start : 0
        }
    });
    Here is the full example.

    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_ReadData(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;
            (sender as Store).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>
    
        <script type="text/javascript">
            var onSelect = function (combo, grid) {
                var store = grid.getStore();
                store.pageSize = parseInt(combo.getValue(), 10);
                store.load({
                    params : {
                        start : 0
                    }
                });
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server" OnReadData="Store_ReadData" PageSize="3">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar runat="server">
                        <Items>
                            <ext:Label runat="server" Text="Page size:" />
                            <ext:ToolbarSpacer runat="server" Width="10" />
                            <ext:ComboBox runat="server" Width="80">
                                <Items>
                                    <ext:ListItem Text="1" />
                                    <ext:ListItem Text="3" />
                                    <ext:ListItem Text="9" />
                                </Items>
                                <SelectedItems>
                                    <ext:ListItem Text="3" />
                                </SelectedItems>
                                <Listeners>
                                    <Select Handler="onSelect(this, #{GridPanel1});" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                        <Plugins>
                            <ext:ProgressBarPager runat="server" />
                        </Plugins>
                    </ext:PagingToolbar>
                </BottomBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Solved!!!

    Thanks a lot, Daniil

Similar Threads

  1. [CLOSED] tabPanel: navigation problem
    By supera in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 18, 2012, 11:50 AM
  2. [CLOSED] Tab navigation error in GridPanel which has SpinnerField editor
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: May 27, 2011, 8:20 AM
  3. [CLOSED] Tab navigation skip hidden row in GridPanel
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: May 13, 2011, 4:28 PM
  4. [CLOSED] GridPanel Navigation Keys
    By bethc in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 16, 2009, 5:49 AM
  5. [CLOSED] PagingToolBar problem
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 23, 2009, 5:29 AM

Posting Permissions