[CLOSED] filterheader, infinite scrolling and a component to show a record count

**HansWapenaar** · Aug 04, 2014, 5:56 PM

Hi,

I'm applying filterheader, infinite scrolling and a record-count component to a gridpanel.
I also tested this on the example: https://examples2.ext.net/#/GridPane...ader/Overview/

First applying the component to count records:
Add to the items in the toolbar:

   <ext:Component ID="status" 
       runat="server"
       ItemID="status">
       <Tpl ID="Tpl1" runat="server" >
          <Html>
              {count} records
          </Html>
       </Tpl>
    </ext:Component>

And a listener to the store (also add ID to gridpanel: gridpanel):

   <Listeners>
       <DataChanged Handler="#{gridpanel}.down('#status').update({ count: this.getTotalCount() });" />
   </Listeners>

This works fine: when applying a filter the amount of filtered records is shown.

Next step: removing the pagingToolbar and adding a buffered renderer in the plugin section.

                    
   <Plugins>
        <ext:FilterHeader runat="server" ID="filterheader" OnCreateFilterableField="OnCreateFilterableField" />
       <ext:BufferedRenderer ID="BufferedRenderer1" runat="server"  />
   </Plugins>

Result: the total amount of rows is shown. Also when the data is filtered.

What is missing? How do I get the amount of filtered rows instead of the total amount? And why is it working when paging is used?

Hans

**HansWapenaar** · Aug 05, 2014, 8:07 AM

Hi,

I replaced this.getTotalCount() by this.getCount() and the results are displayed as they should be.
So my problem is solved.

However, it remains strange that getTotalCount() gives the filtered amount when a pagingToolbar is used and the total amount when infinite scrolling is used even when the data is filtered.

Hans

**HansWapenaar** · Aug 05, 2014, 8:32 AM

Hi,

Documentation ExtJs/Sencha:

getTotalCount( ) : Number
Returns the total number of Model instances that the Proxy indicates exist. This will usually differ from getCount when using paging - getCount returns the number of records loaded into the Store at the moment, getTotalCount returns the number of records that could be loaded into the Store if the Store contained all data

It looks like it is just the other way around: getTotalCount differs from getCount when not using paging.

Hans

**Daniil** · Aug 05, 2014, 12:47 PM

Hi Hans,

However, it remains strange that getTotalCount() gives the filtered amount when a pagingToolbar is used

Could you, please, provide a test case to reproduce it?

**HansWapenaar** · Aug 07, 2014, 7:56 AM

Hi Daniil,

I adjusted the example https://examples2.ext.net/#/GridPane...ader/Overview/
First code block is with pagingToolbar
Second code block is with infinite scrolling.

Try 'load filters' and check what the record count is in lower left corner.
When you replace in the second code block getTotalCount() with getCount() the counter is ok.

<%@ 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)
        {
            this.Store1.DataSource = FiltersTestData.Data;
            this.Store1.DataBind();
        }
    }

    protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
    {
        if(column.DataIndex == "Id")
        {
            ((TextField)defaultField).Icon = Icon.Magnifier;
        }
        
        return defaultField;
    }
</script>

<!DOCTYPE html>
    
<html>
<head runat="server">
    <title>FilterHeader plugin overview - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
        var loadFilter = function (plugin) {
            plugin.setValue({
                Id : ">5",
                Company: "!Inc.",
                Price: ">50<70",
                Visible: 1
            });
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
    
        <h1>FilterHeader plugin overview</h1> 
        
        <p>FilterHeader plugin allows use the following operators:</p>

        <ul>
            <li>String: =(equals), +(starts with), -(ends with), *(contains), !(doesn't contain)</li>
            <li>Date: >, <, >=, <= or date for equals</li>
            <li>Number: >, <, >=, <= or date for equals</li>
            <li>Boolean: 1, 0, true, false</li>
        </ul>
    
        <ext:Window 
            ID="Window1" 
            runat="server"         
            Width="800" 
            Height="400" 
            Closable="false"
            Title="Example" 
            Maximizable="true"
            Layout="Fit">
            <Items>
                <ext:GridPanel runat="server" ID="gridpanel">
                    <Store>
                        <ext:Store ID="Store1" runat="server" PageSize="10">
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Id" Type="Int" />
                                        <ext:ModelField Name="Company" Type="String" />
                                        <ext:ModelField Name="Price" Type="Float" />
                                        <ext:ModelField Name="Date" Type="Date" />
                                        <ext:ModelField Name="Size" Type="String" />
                                        <ext:ModelField Name="Visible" Type="Boolean" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="Company" Direction="ASC" />
                            </Sorters>        
                            <Listeners>
                                <DataChanged Handler="#{gridpanel}.down('#status').update({ count: this.getTotalCount() });" />
                             </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Text="ID" DataIndex="Id" />
                            <ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
                            <ext:Column runat="server" Text="Price" DataIndex="Price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
                            <ext:Column runat="server" Text="Size" DataIndex="Size" />
                            <ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
                                <Renderer Handler="return (value) ? 'Yes':'No';" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <Plugins>
                        <ext:FilterHeader runat="server" ID="filterheader" OnCreateFilterableField="OnCreateFilterableField" />
                    </Plugins>
                    <BottomBar>
                        <ext:PagingToolbar runat="server" HideRefresh="True">
                        </ext:PagingToolbar>
                    </BottomBar>
                    <DockedItems>
                        <ext:Toolbar runat="server" Dock="Bottom">
                            <Items>
                                <ext:Component ID="status" 
                                    runat="server"
                                    ItemID="status">
                                    <Tpl ID="Tpl1" runat="server" >
                                        <Html>
                                            {count} records
                                        </Html>
                                    </Tpl>
                                </ext:Component>
                                <ext:Button 
                                    runat="server" 
                                    Text="Case Sensitive" 
                                    EnableToggle="true" 
                                    AllowDepress="true" 
                                    ToggleHandler="var plugin = this.up('grid').filterHeader; plugin.caseSensitive = this.pressed; plugin.applyFilter();" 
                                    />
                                <ext:Button 
                                    runat="server" 
                                    Text="Load Filters" 
                                    Handler="loadFilter(this.up('grid').filterHeader);" 
                                    />                                               
                                <ext:Button 
                                    runat="server" 
                                    Text="Get Fields Values" 
                                    ToolTip="Get Values of Fields" 
                                    Handler="var values = Ext.encode(this.up('grid').filterHeader.getValue()); Ext.Msg.alert('Fields Values', values);" 
                                    />
                                <ext:Button 
                                    runat="server" 
                                    Text="Get Filter Values" 
                                    ToolTip="Get Filter Values of Grid" 
                                    Handler="var filters = Ext.encode(this.up('grid').filterHeader.getFilterValues()); Ext.Msg.alert('Filter Values', filters);" 
                                    />
                                <ext:Button 
                                    runat="server" 
                                    Text="Clear Filters" 
                                    Handler="this.up('grid').filterHeader.clearFilter();" 
                                    />
                            </Items>
                        </ext:Toolbar>
                    </DockedItems>                   
                </ext:GridPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

Second code block:

<%@ 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)
        {
            this.Store1.DataSource = FiltersTestData.Data;
            this.Store1.DataBind();
        }
    }

    protected Field OnCreateFilterableField(object sender, ColumnBase column, Field defaultField)
    {
        if(column.DataIndex == "Id")
        {
            ((TextField)defaultField).Icon = Icon.Magnifier;
        }
        
        return defaultField;
    }
</script>

<!DOCTYPE html>
    
<html>
<head runat="server">
    <title>FilterHeader plugin overview - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
        var loadFilter = function (plugin) {
            plugin.setValue({
                Id : ">5",
                Company: "!Inc.",
                Price: ">50<70",
                Visible: 1
            });
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
    
        <h1>FilterHeader plugin overview</h1> 
        
        <p>FilterHeader plugin allows use the following operators:</p>

        <ul>
            <li>String: =(equals), +(starts with), -(ends with), *(contains), !(doesn't contain)</li>
            <li>Date: >, <, >=, <= or date for equals</li>
            <li>Number: >, <, >=, <= or date for equals</li>
            <li>Boolean: 1, 0, true, false</li>
        </ul>
    
        <ext:Window 
            ID="Window1" 
            runat="server"         
            Width="800" 
            Height="400" 
            Closable="false"
            Title="Example" 
            Maximizable="true"
            Layout="Fit">
            <Items>
                <ext:GridPanel runat="server" ID="gridpanel">
                    <Store>
                        <ext:Store ID="Store1" runat="server" PageSize="10">
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Id" Type="Int" />
                                        <ext:ModelField Name="Company" Type="String" />
                                        <ext:ModelField Name="Price" Type="Float" />
                                        <ext:ModelField Name="Date" Type="Date" />
                                        <ext:ModelField Name="Size" Type="String" />
                                        <ext:ModelField Name="Visible" Type="Boolean" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="Company" Direction="ASC" />
                            </Sorters>        
                            <Listeners>
                                <DataChanged Handler="#{gridpanel}.down('#status').update({ count: this.getTotalCount() });" />
                             </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Text="ID" DataIndex="Id" />
                            <ext:Column runat="server" Text="Company" DataIndex="Company" Flex="1" />
                            <ext:Column runat="server" Text="Price" DataIndex="Price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
                            <ext:Column runat="server" Text="Size" DataIndex="Size" />
                            <ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
                                <Renderer Handler="return (value) ? 'Yes':'No';" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <Plugins>
                        <ext:FilterHeader runat="server" ID="filterheader" OnCreateFilterableField="OnCreateFilterableField" />
                        <ext:BufferedRenderer ID="BufferedRenderer1" runat="server"   />
                    </Plugins>
                    <BottomBar>
                    </BottomBar>
                    <DockedItems>
                        <ext:Toolbar runat="server" Dock="Bottom">
                            <Items>
                                <ext:Component ID="status" 
                                    runat="server"
                                    ItemID="status">
                                    <Tpl ID="Tpl1" runat="server" >
                                        <Html>
                                            {count} records
                                        </Html>
                                    </Tpl>
                                </ext:Component>
                                <ext:Button 
                                    runat="server" 
                                    Text="Case Sensitive" 
                                    EnableToggle="true" 
                                    AllowDepress="true" 
                                    ToggleHandler="var plugin = this.up('grid').filterHeader; plugin.caseSensitive = this.pressed; plugin.applyFilter();" 
                                    />
                                <ext:Button 
                                    runat="server" 
                                    Text="Load Filters" 
                                    Handler="loadFilter(this.up('grid').filterHeader);" 
                                    />                                               
                                <ext:Button 
                                    runat="server" 
                                    Text="Get Fields Values" 
                                    ToolTip="Get Values of Fields" 
                                    Handler="var values = Ext.encode(this.up('grid').filterHeader.getValue()); Ext.Msg.alert('Fields Values', values);" 
                                    />
                                <ext:Button 
                                    runat="server" 
                                    Text="Get Filter Values" 
                                    ToolTip="Get Filter Values of Grid" 
                                    Handler="var filters = Ext.encode(this.up('grid').filterHeader.getFilterValues()); Ext.Msg.alert('Filter Values', filters);" 
                                    />
                                <ext:Button 
                                    runat="server" 
                                    Text="Clear Filters" 
                                    Handler="this.up('grid').filterHeader.clearFilter();" 
                                    />
                            </Items>
                        </ext:Toolbar>
                    </DockedItems>                   
                </ext:GridPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

**Daniil** · Aug 08, 2014, 8:18 AM

Thank you.

Indeed, a .getTotalCount() doesn't calculate records which are excluded by filters. Otherwise it would show a wrong number in a PagingToolbar's total field:

If you need a total count including the records excluded by filters, I can suggest:

<DataChanged Handler="#{gridpanel}.down('#status').update({ count: (this.snapshot && this.snapshot.length) || this.getTotalCount() });" />

It should work in both the cases.

Thread: [CLOSED] filterheader, infinite scrolling and a component to show a record count

Thread Tools

Search Thread

Display

[CLOSED] filterheader, infinite scrolling and a component to show a record count

Similar Threads

[CLOSED] Infinite Scrolling Issue

[OPEN] [#308] FilterHeader and infinite scrolling

[CLOSED] Infinite scrolling and selection

[CLOSED] TreePanel infinite scrolling

[CLOSED] Infinite scrolling grid wrong row updating after edit record in modal form window

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] filterheader, infinite scrolling and a component to show a record count

[CLOSED] filterheader, infinite scrolling and a component to show a record count

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us