Grid Header Filters

[gayathr]

I applied this plug in .Every thing is workingfine except filter for "date field". I coded as follows
{xtype: 'datecolumn', text: "Note Date", dataIndex: 'NoteDate', align: 'center', sortable: true, filter:{
xtype:'datefield',emptyText : 'Filter for',format: 'Y-m-d', allowBlank: true},
renderer: Ext.util.Format.dateRenderer('Y-m-d')
}

Can u please suggest what needs to do for " date filter " functioanlity

[ClaudeG]

I'm reading your code and you have a few references to CSS such as x-gridheaderfilters-filter-field. Can you paste the CSS somewhere? because it doesn't seem to be in ExtJS itself, at least, not that I can find.

[gayathr]

Hi

I am using HedaerFilters plugin to get row inside the grid. I need Datepicker in yyyymmdd format . Can you please let me know how to get that one

[gayathr]

filter: { xtype: 'datefield', format: 'Y-m-d'} is not filtering data for ext js 4.1 version. Please suggest what needs tp do

[gayathr]

Please let me know whether this supports yyyy-mm-dd format for the date picker calender for date field. Also let me know remote filtering will supports or not

[prijithkr]

I think its a bug,

If my code has columns which are given width, instead of Flex, as i need Horizondal scroll bar to appear, also there is header filter assigned to each columns,

While Choosing a hidden column from "Select Column", the filters are not render properly,

but once i stretch the column, it gets rendered properly..

But than i tried changing the code grid filter plugin, since it handles only column.flex, previosuly, I tried adding a condition for column.width too and it worked fine

 adjustFilterWidth: function()     {
    	if(!this.containers) return;
		var columns = this.grid.headerCt.getGridColumns(true);        
		for(var c=0; c < columns.length; c++) 
		{           
			var column = columns[c];            
			if (column.filter && column.flex) 
			{  
				this.containers[column.id].setWidth(column.getWidth()-1);            
			}
			else if (column.filter && column.width) 
			{  
				this.containers[column.id].setWidth(column.getWidth()-1);            
			}
	  	}
	 }

[likdike]

i add dynamically columns in grid, follows:

var column = Ext.create('Ext.grid.column.Column', {text: 'New Column'});gridView.headerCt.insert(gridView.columns.length, column);gridView.getView().refresh(); 

How dinamically add filters to headers column's, such code not work

var column = Ext.create('Ext.grid.column.Column', {text: 'New Column', filter: {xtype: 'textfield'}});gridView.headerCt.insert(gridView.columns.length, column);gridView.getView().refresh(); 

[carlov]

Hi

i am trying to use the plugin to implement a multiselect combo header filter

filter: {xtype: 'combo', multiSelect : true, store: ...} 

but i get 'TypeError: gs.data is undefined' on line 711

gs.snapshot = gs.data.clone();

Any idea?
Thanks!

[carlov]

i fixed it by adding

remoteFilter: true 

to the grid store ...

[eternasparta]

How do I implement/incorporate this and make it work?

Thanks

Add in your grid class the following rows:


- plugin for the grid:


plugins: [Ext.create('Ext.ux.grid.plugin.HeaderFilters')/*, ... other plugins here */]


- column configuration:


columns:[{ /*other configurations for your column:*/
header: 'Accepted', dataIndex: 'accepted', flex: 1,
/*filter plugin configuration:*/
filterable: true, filter:{xtype: 'textfield' /* i've used a simple textbox*/}}
/*, other columns here */]