Refresh button from PagingToolbar does not reload GRID

  1. #1

    Refresh button from PagingToolbar does not reload GRID

    Hello,

    I have a GRID with PagingToolbar and when I click the update button does not reload GRID, returns empty.

    Could you help me?

    Below the code of my page:

    <asp:Content ID="Conteudo" ContentPlaceHolderID="Conteudo" runat="Server">
    
    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';
    
        var change = function(value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };
    
        var pctChange = function(value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
        </script>
         
    
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                             
                var applyFilter = function (field) {                
                    var store = #{gridOrcamento}.getStore();
                    store.suspendEvents();
                    store.filterBy(getRecordFilter());                                
                    store.resumeEvents();
                    #{gridOrcamento}.getView().refresh(false);
                };
                 
                var clearFilter = function () {
                    #{cboFiltraSetor}.reset();
                    #{cboFiltraCargo}.reset();
                    #{ChangeFilter}.reset();            
                                   
                    #{StoreGridOrcamento}.clearFilter();
                }
     
                var filterString = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);
                    
                    if (typeof val != "string") {
                        return value.length == 0;
                    }
                    
                    return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
                };
     
     
                var filterNumber = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);
     
                    if (!Ext.isEmpty(value, false) && val != value) {
                        return false;
                    }
                    
                    return true;
                };
     
                var getRecordFilter = function () {
                    var f = [];
     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{cboFiltraSetor}.getValue(), "Setor", record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{cboFiltraCargo}.getValue(), "Cargo", record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterNumber(#{ChangeFilter}.getValue(), "Ano", record);
                        }
                    });
                     
                  
                    var len = f.length;
                     
                    return function (record) {
                        for (var i = 0; i < len; i++) {
                            if (!f[i].filter(record)) {
                                return false;
                            }
                        }
                    return true;
                    };
                };
            </script>
        </ext:XScript>
        
               <ext:Store runat="server" ID="StoreGridOrcamento">          
                <Reader>
                    <ext:JsonReader IDProperty="Value">
                        <Fields>
                            <ext:RecordField Name="IdOrcamento"/>
                            <ext:RecordField Name="Setor" />
                            <ext:RecordField Name="Cargo" />
                            <ext:RecordField Name="Ano"/>
                            <ext:RecordField Name="Janeiro"/>
                            <ext:RecordField Name="Fevereiro"/>
                            <ext:RecordField Name="Marco"/>
                            <ext:RecordField Name="Abril"/>
                            <ext:RecordField Name="Maio"/>
                            <ext:RecordField Name="Junho"/>
                            <ext:RecordField Name="Julho"/>
                            <ext:RecordField Name="Agosto"/>
                            <ext:RecordField Name="Setembro"/>
                            <ext:RecordField Name="Outubro"/>
                            <ext:RecordField Name="Novembro"/>
                            <ext:RecordField Name="Dezembro"/>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Store ID="StoreSetor" runat="server" AutoLoad="true">    
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="idSetor" />
                        <ext:RecordField Name="nomeSetor" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:Store ID="StoreCargo" runat="server" AutoLoad="true">    
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="idCargo" />
                        <ext:RecordField Name="nomeCargo" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
            
        <%--<ext:Window ID="frmCadastroOrcamento" runat="server" Title="Cadastro Or?amentario" Icon="ApplicationFormAdd" Plain="false" Padding="5" ButtonAlign="Center" LabelWidth="80" Layout="Form" ShowMask="true" Resizable="false" Draggable="true" Width="1300" Height="460" >--%>
        
            
        
            <Items>                   
                <ext:GridPanel 
                    ID="gridOrcamento" 
                    runat="server"                
                    Title="Or?amento" 
                    StripeRows="true"
                    TrackMouseOver="true"
                    Frame="false"
                    StoreID="StoreGridOrcamento"
                    AutoHeight="true"               
                    AutoWidth="true">
                    <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>                
                        <%--<ext:Column ColumnID="IdOrcamento" Header="ID" DataIndex="IdOrcamento" Width="70" />--%>
                        <ext:Column ColumnID="Setor" Header="Setor" DataIndex="Setor" Width="225" Align="left"/>
                        <ext:Column Header="Cargo" DataIndex="Cargo" Width="225" Align="left"/>
                        <ext:Column Header="Ano" DataIndex="Ano" Width="70" Align="left"><Renderer Fn="change"/></ext:Column>
                        <ext:Column Header="Janeiro" DataIndex="Janeiro" Width="65" Align="left" />
                         <ext:Column Header="Fevereiro" DataIndex="Fevereiro" Width="70" Align="left" />
                         <ext:Column Header="Mar?o" DataIndex="Marco" Width="65" Align="left" />
                         <ext:Column Header="Abril" DataIndex="Abril" Width="65" Align="left" />
                         <ext:Column Header="Maio" DataIndex="Maio" Width="65" Align="left" />
                         <ext:Column Header="Junho" DataIndex="Junho" Width="65" Align="left" />
                          <ext:Column Header="Julho" DataIndex="Julho" Width="65" Align="left" />
                         <ext:Column Header="Agosto" DataIndex="Agosto" Width="65" Align="left" />
                         <ext:Column Header="Setembro" DataIndex="Setembro" Width="70" Align="left" />
                         <ext:Column Header="Outubro" DataIndex="Outubro" Width="65" Align="left" />
                         <ext:Column Header="Novembro" DataIndex="Novembro" Width="72" Align="left" />
                         <ext:Column Header="Dezembro" DataIndex="Dezembro" Width="72" Align="left" />
                        </Columns>
                    </ColumnModel>
                      <SelectionModel>
                     <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                     </SelectionModel>
                     
                    <View>
                    <ext:GridView ID="GridView1" runat="server">
                    <HeaderRows>
                        <ext:HeaderRow>
                            <Columns>
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:ComboBox ID="cboFiltraSetor" StoreID="StoreSetor" runat="server" TriggerAction="All" Mode="Local" DisplayField="nomeSetor"
                                            ValueField="nomeSetor">                                       
                                            <Listeners>
                                                <Select Handler="applyFilter(this);" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </Component>
                                </ext:HeaderColumn>
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:ComboBox ID="cboFiltraCargo"  StoreID="StoreCargo" runat="server" TriggerAction="All" Mode="Local" DisplayField="nomeCargo"
                                            ValueField="nomeCargo">                                       
                                            <Listeners>
                                                <Select Handler="applyFilter(this);" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </Component>
                                </ext:HeaderColumn>
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:TextField ID="ChangeFilter" runat="server" EnableKeyEvents="true">
                                            <Listeners>
                                                <KeyUp Handler="applyFilter(this);"/>
                                            </Listeners>
                                        </ext:TextField>
                                    </Component>
                                </ext:HeaderColumn>
                                <ext:HeaderColumn AutoWidthElement="false">
                                    <Component>
                                        <ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
                                            <ToolTips>
                                                <ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
                                            </ToolTips>
                                            <Listeners>
                                                <Click Handler="clearFilter(null);" />
                                            </Listeners>
                                        </ext:Button>
                                    </Component>
                                </ext:HeaderColumn>
                            </Columns>
                        </ext:HeaderRow>
                    </HeaderRows>
                </ext:GridView>
            </View>
                     
                     
                <LoadMask ShowMask="true" />
                <BottomBar>
                     <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10">
                     <Listeners>
                     </Listeners>
                        <Items>
                            <ext:Label ID="Label1" runat="server" Text="Page size:" />
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="20" />                        
                            <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                <Items>
                                    <ext:ListItem Text="1" />
                                    <ext:ListItem Text="2" />
                                    <ext:ListItem Text="10" />
                                    <ext:ListItem Text="20" />
                                </Items>
                                <SelectedItem Value="10" />
                                <Listeners>
                                    <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>
                    <LoadMask ShowMask="true" />
                </ext:GridPanel> 
                <ext:Toolbar ID="Toolbar1" runat="server" >
                <Items>       
                <ext:Button ID="btnNovo" runat="server" Text="Novo" Icon="Add">
                <DirectEvents>
                            <Click OnEvent="btnNovo_Click" >
                                <EventMask ShowMask="true"/>
                            </Click>
                 </DirectEvents>                       
                </ext:button>
                <ext:Button ID="btnEditar" runat="server" Text="Editar" Icon="BulletEdit">
                    <DirectEvents>
                        <Click OnEvent="btnEditar_Click">
                            <ExtraParams>
                                <ext:Parameter Name="Values" Value="Ext.encode(#{gridOrcamento}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>              
                </ext:button>
                <ext:Button ID="btnExcluir" runat="server" Text="Excluir" Icon="BulletCross">
                 <DirectEvents>
                 <Click OnEvent="btnExcluir_Click">
                  <ExtraParams>
                  <ext:Parameter Name="Values" Value="Ext.encode(#{gridOrcamento}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                  </ExtraParams>
                  </Click>
                </DirectEvents>                        
                </ext:button>
               <%-- <ext:Button ID="btnCancelar" runat="server" Text="Cancelar" Icon="Decline" />   --%>       
                </Items>
                </ext:Toolbar>
            </Items>
            
       <%-- </ext:Window>--%>
    </asp:Content>
    Last edited by Cris; Sep 11, 2014 at 12:45 PM. Reason: Add [CODE]
  2. #2
    Hi,
    Please wrap all code in [CODE] tags.

    http://forums.ext.net/showthread.php...ing-New-Topics
    Last edited by geoffrey.mcgill; Sep 11, 2014 at 5:17 PM.
  3. #3
    Hi @Cris,

    Welcome to the Ext.NET forums!

    You should have an OnRefreshData handler for the Store. As here:
    https://examples1.ext.net/#/GridPane...rayWithPaging/
  4. #4

    Worked !!

    Thanks Daniil !!

    Worked !!

    There is some material that explains how to use the methods, components ext.net?
  5. #5
  6. #6
    Thanks for Help !!


    Can close this Thread

Similar Threads

  1. [CLOSED] Refresh button PagingToolBar --> Event ?
    By CarWise in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 02, 2013, 2:51 PM
  2. Replies: 4
    Last Post: Jan 25, 2011, 9:26 AM
  3. Disable refresh button in PagingToolBar
    By Kaido in forum 1.x Help
    Replies: 7
    Last Post: Jan 05, 2011, 5:11 PM
  4. Replies: 2
    Last Post: Feb 24, 2010, 5:04 PM
  5. Replies: 0
    Last Post: Jun 13, 2009, 5:34 AM

Tags for this Thread

Posting Permissions