[CLOSED] Workaround with FilterHeader (source, filter empty fields, filter by renderer value)

Hello!

FilterHeader plugin ( https://examples2.ext.net/#/GridPane...ader/Overview/ ) allow to filter rows by each of field.
I have several questions about it.
1) Where can I find the plugin sources?

2) How to filter null values?
Following code doesn't work.

Code:

---

Ext.net.FilterHeader.behaviour.addBehaviour("string", {
    name: "/",

    is: function (value) {
        return value == "/";
    },

    getValue: function (value) {
        return { value: value, valid: true };
    },

    match: function (recordValue, matchValue) {
        if (!recordValue) {
            console.log('r');
            return true;
        }

        return false;
    },

    isValid: function (value) {
        return true;
    },

    serialize: function (value) {
        return {
            type: "string",
            op: "/",
            value: value
        };
    }
});

---

Although match function returns true, it can filter empty values of string field, but cannot filter null-values. It looks like somewhere in next functions null values of value are ignored.

3) There are fields with renderer (ColumnBase.Renderer.Handler = "return value == true ? 'Yes' : 'No';") in some grids. But filter works only on "1, 0, true, false" values. How to make filter work on defined renderer of column?

Hi @centerinform,

Quote:

---

1) Where can I find the plugin sources?

---

In SVN:
http://svn.ext.net/premium/trunk/Ext...eader-debug.js

Quote:

---

2) How to filter null values?

---

Please provide a test case and exact steps to reproduce.

Quote:

---

3) There are fields with renderer (ColumnBase.Renderer.Handler = "return value == true ? 'Yes' : 'No';") in some grids. But filter works only on "1, 0, true, false" values. How to make filter work on defined renderer of column?

---

In the FilterHeader sources you will see the definition on the "boolean" filter. You can override it.

Thank you for your answer. The source code has helped me to solve the first two problems.

But I still have a question about the Renderer.
I can override the definition on the "boolean" filter, because I always know that "false" is "No" and "true" is "Yes".
In more complex cases, I do not know an exact match. For example, if the value of one column is replaced by the value of another column.

Do I understand correctly about FilterHeader that there is no way to use the result, has been returned from the column renderer handler?
Is it even possible to get to renderer values ​​of selected row's cells in JS?

Yes, a FilterHeader deals with the Store's records, not with HTML rendered to the cells.

You can call a Column's Renderer for a specific record.

Please look at the Ext.view.Table's renderCell method.
http://docs.sencha.com/extjs/4.2.1/s...hod-renderCell

The method calls Columns' Renderers (if defined).

Code:

---

if (column.renderer && column.renderer.call) {
    value = column.renderer.call(column.scope || me.ownerCt, fieldValue, cellValues, record, recordIndex, columnIndex, me.dataSource, me);

---

Generally speaking, nothing stops you to call it inside the FilterHeader's behavior scripts to determine the Renderer's value.

Another possible approach could be getting a value directly from cells (rendered HTML). Personally, I would try it first.

Thanks for the help.

The following override works for me:

Code:

---

Ext.define("my.overridden.FilterHeader", {
    override: 'Ext.net.FilterHeader',
   
    isSmartFilterValid : function (field) {
        return true;
    },

    smartFilterValue: function (value, dataIndex, record, type, field) {
        var recordValue = record && record.get(dataIndex),
            isEmpty = Ext.isEmpty(value, false);

        var column = field.column;
        if (column && column.renderer && column.renderer.call) {
            recordValue = column.renderer.call(column.scope, recordValue, null, record);
        }

        if (isEmpty) {
            return true;
        }

        if (!type && (recordValue == null || !Ext.isDefined(recordValue))) {
            return false;
        }

        return this.selectSmartFilter(type, recordValue, value, field);
    }
});

---