Grid header filters

**harshp** · 31 Jan 2013 4:39 AM

Hi,

Please check below code, I can see grid filter row , but it is not filtering data.
Do I need to write any code for filtering data from data store.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">


  <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
  <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext-all.js"></script>
  
  <script type="text/javascript" src="ext-all.js"></script>


 <script type="text/javascript" src="GridHeaderFilters.js"></script>


    <script type="text/javascript">
Ext.onReady(function() {


              // sample static data for the store
   var fields=[{
          type: 'string',
          name: 'item'
    },{
          type: 'string',
          name: 'description'
    },{
          type: 'string',
          name: 'po'
    },{
          type: 'string',
          name: 'style'
    },{
          type: 'string',
          name: 'size'
    },{
          type: 'int',
          name: 'ysqty'
    },{
          type: 'int',
          name: 'ssqty'
    },{
          type: 'string',
          name: 'remark'
    }]
    var columns=[{
       dataIndex: 'item',
       header: 'Item',
       filter: {xtype:"textfield", filterName:"CODE"},
       enableKeyEvents: true
    },{
       dataIndex: 'description',
       header: 'Description',
       width:300,
       filter: {xtype:"textfield", filterName:"CODE"},
       enableKeyEvents: true
    },{
       dataIndex: 'po',
       header: 'PO'
    },{
       dataIndex: 'style',
       header: 'Style'
    },{
       dataIndex: 'size',
       header: 'Size'
    },{
       dataIndex: 'ysqty',
       header: 'ysqty'
    },{
       dataIndex: 'ssqty',
       header: 'ssqty'
    },{
       dataIndex: 'remark',
       header: 'remark'
    }]
    var data=[['item1','aaaaa','PO1','style1','L',90,85,'SDFDSF'],['item1','aaaaa','PO1','style1','M',70,65,'SDFDSF']
    ,['item1','aaaaa','PO2','style4','M',70,65,'SDFDSF'],['item2','aaaaa','PO1','style1','M',70,65,'SDFDSF']
    ,['item2','aaaaa','PO1','style1','M',70,65,'SDFDSF'],['item2','aaaaa','PO1','style1','M',70,65,'SDFDSF']]
    
    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        title: 'Sales By Location',
        width: 1000,
        height: 400,
        store: new Ext.data.ArrayStore({
            fields: fields,
            data: data
        }),
        columns: columns,
        viewConfig: {
            forceFit: true
        },
        plugins: [new Ext.ux.grid.GridHeaderFilters()]
    });
    
})
    </script>
 </head>


 <body> <div id="grid"></div>
 
 </body>
</html>

**bizcatalyst** · 6 Mar 2013 12:35 PM

Originally Posted by daddie888

Hello, i use version 2.0.3 of GridHeaderFilters with Ext Js 3.3.1 and have the following problem in IE7 but not in FF3.5
When the window is too small to show the full width of the columns the width of the columns shrinks to show all of the table but not the filters, they are cut off by the next filter/column
See the attachment for an example.

Here my ColumnModel

Code:

cm1Midoc = new Ext.grid.ColumnModel({
      defaults: {"sortable": true, "menuDisabled":false, "align":"right"},
      columns: [
        {"id":"id", "header": "id", "hidden": true, "dataIndex": "id", "width": 40, "filter":[{xtype:"numberfield",style: 'text-align: right', emptyText:'van'},{xtype:"numberfield", style: 'text-align: right', emptyText:'tot'}]},
        {"header": "rnr13", "dataIndex": "rnr13", "width": 50, filter: [{xtype:"textfield", style: 'text-align: right'}, {xtype:"textfield", style: 'text-align: right'}]},
        {"header": "datumlijst", "dataIndex": "datumlijst", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "datvan", "dataIndex": "datvan", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "dattot", "dataIndex": "dattot", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "waarde", "dataIndex": "waarde", "renderer": "Ext.util.Format.number", "width": 30, filter: [{xtype:"numberfield"},{xtype:"numberfield"}]}
      ]
    });

Can anybody give me a hint ?

Thanks !!

Peter

Thanks for the example using multiple filters in one column, now I can do numeric and date ranges and display them, Yay!

**mthaxmiller** · 3 May 2013 12:56 PM

Does anyone have an example of hiding the filters for the latest version of this plugin? I have a button to show/hide the filters and this works for that:
toggleFilters: function(bShow) {
for(fc in this.filterContainers) {
var container = this.filterContainers[fc];
if(bShow) {
container.show();
} else {
container.hide();
}
}

}

However, if I call toggleFilters to hide them when the grid is first rendered the above does not work. Any ideas on how to fix this issue? I tried adding doLayout and syncSize, still no luck.

**wm003** · 7 May 2013 7:41 AM

Can you try to use it in the "afterrender" event?

**mthaxmiller** · 7 May 2013 9:39 AM

Thanks for replying....
Adding a call to toggle the filters in the afterrender event only works if we add a 2 second delay. Something in the DOM is not be refreshed to hide the filters, if you view the filters using firebug the hidden attribute is true. Any more ideas?

Grid header filters

Thread Tools

Search Thread

Display

Plugin not working

Plugin not working

Hide filters

Hide filters

Hide filters

Hide filters