Using Ext.ux.grid.FiltersFeature with Grouped Headers

Hi,

got a hint for anybody who wants to use the new? grouped headers (example) together with the filtersFeature (of course not using the filter on the group headers) on ExtJs 4.1 with ux from examples.
In the source ux.grid.FiltersFeature.js its quoted:

Quote:

---

// filters may be configured through the plugin,
// or in the column definition within the headers configuration

---

But with grouped headers for me applying the filters to the single columns config as mainly used in the grid filter example (example) did not work (the menus were not showing the filter option). So do not:

Code:

---

//columns
var columns = [{text: 'groupedHeader', columns: [{.., filter: {type: ..., ...}}, ...]],...},...];

//define filter
var filtersCfg = {
            ftype: 'filters',
            autoReload: false, //don't reload automatically
            local: true //only filter locally
};

grid = Ext.create('Ext.grid.Panel', {
            ...,
            columns:    columns,
            features:    [filtersCfg]
});

---

Do instead configure through the plugin

Code:

---

//define filter
var filtersCfg = {
            ftype: 'filters',
            autoReload: false, //don't reload automatically
            local: true, //only filter locally
            // filters may be configured through the plugin,
            // or in the column definition within the headers configuration
            filters: [{type: ...., ....}, ...]
        };

---

Then for me they are displayed correctly.

Cheers

Thanks for the code. I am sure someone will fine this useful.

Scott.

The method createFilters of Ext.ux.grid.FiltersFeature could be changed a little in order to take grouped headers into account:

Code:

---

/**
 * @private Create the Filter objects for the current configuration, destroying any existing ones first.
 */
createFilters: function () {
    var me = this,
        hadFilters = me.filters.getCount(),
        grid = me.getGridPanel(),
        filters = me.createFiltersCollection(),
        model = grid.store.model,
        fields = model.prototype.fields,
        field,
        filter,
        state;

    if(hadFilters) {
        state = {};
        me.saveState(null, state);
    }

    function add(dataIndex, config, filterable) {
        if(dataIndex && (filterable || config)) {
            field = fields.get(dataIndex);
            filter = {
                dataIndex: dataIndex,
                type: (field && field.type && field.type.type) || 'auto'
            };

            if(Ext.isObject(config)) {
                Ext.apply(filter, config);
            }

            filters.replace(filter);
        }
    }

    // We start with filters from our config
    Ext.Array.each(me.filterConfigs, function (filterConfig) {
        add(filterConfig.dataIndex, filterConfig);
    });

    // Then we merge on filters from the columns in the grid. The columns' filters take precedence.
    //Ext.Array.each(grid.columns, function (column) {
        //if(column.filterable === false) {
            //filters.removeAtKey(column.dataIndex);
        //} else {
            //add(column.dataIndex, column.filter, column.filterable);
        //}
    //});

  function traverseColumns(columns) {
        // Then we merge on filters from the columns in the grid. The columns' filters take precedence.
        Ext.Array.each(columns, function (column) {
            if(column.items.length > 0) {
                traverseColumns(column.items.items);
            } else {
                if(column.filterable === false) {
                    filters.removeAtKey(column.dataIndex);
                } else {
                    add(column.dataIndex, column.filter, column.filterable);
                }
            }
        });
    }

    traverseColumns(grid.columns);

    me.removeAll();
    if(filters.items) {
        me.initializeFilters(filters.items);
    }

    if(hadFilters) {
        me.applyState(null, state);
    }
}

---

+1 to add this suggestion. works like a charm! B)

Cheers[/QUOTE]
#nobbler, thanks for the code, it worked for me.... Yupieee.... :)

Hello,

When I used to use filter for grid, css class .ux-filtered-column used get append dynamically.
However, for grouped headers filters this class is not getting appended :( .

Below is the code for customization

.ux-filtered-column {
background-color:#E4EFFC;
background-image: url('../icons/fam/filter.png') !important;
background-repeat:no-repeat !important;
background-position:85% 20% !important;
color: green !important;
}


Am unable to customize the grouped header now....

Still waiting for update :(