Grid header filters

[d.zucconi]

How would I create a checkbox filter for your plugin?

You can use something like this:
http://extjs.com/forum/showthread.php?t=32692
as input field for the filter.

...
filter: 
{
xtype: "lovcombo",
triggerAction: "all",
mode: "local",
store: [[1,'A'],[2,'B'],[3,'C']]
}
...

[d.zucconi]

I'm loading the data in my grid from an Ext.ux.grid.livegrid.Store and am looking to add this filter plugin. When the page loads, it displays the grid header and the filter fields but then, once the data is loaded from the server, the header filters disappear. Any thoughts on where I've got amiss?

I've never experienced this kind of problem...
Also, I've never used Ext.ux.grid.livegrid.Store... Could you post your grid configuration code ?

[ttbgwt]

I would like the filter to be a checkbox, and not a combo with checkbox selections...
xtype: checkbox

Thanks...

You can use something like this:
http://extjs.com/forum/showthread.php?t=32692
as input field for the filter.

...
filter: 
{
xtype: "lovcombo",
triggerAction: "all",
mode: "local",
store: [[1,'A'],[2,'B'],[3,'C']]
}
...

[ttbgwt]

Hi, our filters disappear as well when we move the columns around. Is there any way to reload the filters? Thanks! Below is an example of the code we use to move the columns and then the filters disappear...

		var views = {
			defaultView: 
				['id','ordername','ordertype','joblabel','companyname','contactfullname','salesfullname','orderstate','orderstage','orderstatus','lastupdated','total']
			,
			jobDetails:
				['id','ordername','ordertype','joblabel','jobshipaddress1','jobshipcity','jobshipstateabbrev','jobshipzipcode','companyname','contactfullname','salesfullname','orderstate','orderstage','orderstatus','lastupdated','total']
		}

			var cm = orderhomeGrid.getColumnModel();
			//iterate through defined view columns, moving and showing the desired cols in the right order
			for (var i=0; i<view.length; i++)
			{
				//start at col 1 so that checkbox are always included and are first
				var idx = cm.getIndexById(view[i]);
				if (idx == -1){
					firebugLog("Invalid column id in grid view definition: " + view[i]);
					continue;
				}
				cm.moveColumn(idx, i+1);
				cm.setHidden(i+1, false);
			}
			//now hide the rest of the columns
			for (var i=view.length+1; i<cm.getColumnCount()-1; i++)
			{
				cm.setHidden(i, true);
			}

I've never experienced this kind of problem...
Also, I've never used Ext.ux.grid.livegrid.Store... Could you post your grid configuration code ?

[d.zucconi]

Hi, our filters disappear as well when we move the columns around. Is there any way to reload the filters? Thanks! Below is an example of the code we use to move the columns and then the filters disappear...

You could simply call onRender() method of GridHeaderFilters plugin after your column movements are done.
Check the source code: this is the same action taken on "columnmove" event...

[ttbgwt]

Thanks, that worked! Now I'm having a similar issue when I resize a column. The column in question resizes fine, but the other columns do not resize. I then tried calling the onRender after a resize but all of the columns resize in width but they grow in height two-fold, each time a column resize occurs?

[jfvwi]

Have you seen an instance where the fields are missing in the header?

I just added the plug-in to a standard grid and the grid works fine, but the header doesn't contain any input fields.

Thanks for the help.

-John

[jfvwi]

Nevermind - very easy to figure out - I didn't have any filters attached to the columns - after looking at the source I realized they weren't created on the fly.

[ttbgwt]

I would like to show or hide the filters on demand from a button. Do you have a code example on how to show and hide the filters on demand? Thanks!

[ttbgwt]

I figured it out... This worked for me:

        this.grid.toggleHeaderFilters = function(bShow)
        {
            if(!this.headerFilters)
                return;
            if(arguments.length == 0)
                var bShow = true;
            for(var hc in this.headerFilters.headerCells)
            {
                var headerCell = this.headerFilters.headerCells[hc];
                for(var cc in headerCell.children)
                {
                    if (cc>0)
                    {
                        var child = headerCell.children[cc];
                        if (bShow)
                        {
                            child.style.height = this.headerFilters.height - (this.headerFilters.padding * 2) + 'px';
                        }
                        else
                        {
                            child.style.height = '0px';
                        }
                    }
                }
            }
        }