DevExpress GridView - настраиваемая функция фильтра для ячейки / столбца

Как определить настраиваемую функцию-фильтр для столбца или ячейки? В качестве примера предположим, что у нас есть текстовое значение, а в заголовке есть поисковый ввод.

введите описание изображения здесь

Как сообщить gridview вызвать функцию

class FooComponent {
    protected doSomeFilter (value: string, searchQuery: string) {
        if (someConditions(value, searchQuery)) {
            return true;
        }
        return false;
    }
}

И я ожидал бы использовать это так:

<dxi-column
    dataField="myFooProperty"
    [(customFilter)]='doSomeFilter'
></dxi-column>

Но GridView не поддерживает метод customFilter и ничего подобного. Вы знаете, как добиться такой настраиваемой фильтрации в devexpress, выглядит очень просто, но я борюсь с этим часами. Заранее спасибо.


devexpress devextreme devextreme-angular
person tenbits    schedule 31.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В этом примере показано, как фильтровать данные с помощью панели фильтров. Вы можете использовать его флажок, чтобы включить / отключить текущее выражение фильтра, и щелчок по этому выражению открывает встроенный построитель фильтров. Обратите внимание, что внесенные в него изменения отражаются в строке фильтра и фильтре заголовка, и наоборот, из (https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/), см. это:

$("#gridContainer").dxDataGrid({
        dataSource: orders,
        columnsAutoWidth: true,
        filterRow: { visible: true },
        filterPanel: { visible: true },
        headerFilter: { visible: true },
        filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
        filterBuilder: {
            customOperations: [{
                name: "weekends",
                caption: "Weekends",
                dataTypes: ["date"],
                icon: "check",
                hasValue: false,
                calculateFilterExpression: function() {
                    return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
                }
            }]
        },
        filterBuilderPopup: {
            position: { of: window, at: "top", my: "top", offset: { y: 10 } },
        },
        scrolling: { mode: "infinite" },
        showBorders: true,
        columns: [{
            caption: "Invoice Number",
            dataField: "OrderNumber",
            dataType: "number",
            headerFilter: {
                groupInterval: 10000
            }
        }, {
            dataField: "OrderDate",
            dataType: "date"
        }, {
            dataField: "SaleAmount",
            dataType: "number",
            format: "currency",
            editorOptions: {
                format: "currency",
                showClearButton: true
            },
            headerFilter: {
                dataSource: [ {
                    text: "Less than $3000",
                    value: ["SaleAmount", "<", 3000]
                }, {
                    
                    text: "$3000 - $5000",
                    value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
                }, {
                    
                    text: "$5000 - $10000",
                    value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
                }, {
                    
                    text: "$10000 - $20000",
                    value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
                }, {                    
                    text: "Greater than $20000",
                    value: ["SaleAmount", ">=", 20000]
                }]
            }
        }, {
            dataField: "Employee",
            dataType: "string"
        }, {
            caption: "City",
            dataField: "CustomerInfo.StoreCity",
            dataType: "string"
        }, {
            caption: "State",
            dataField: "CustomerInfo.StoreState",
            dataType: "string"
        }]
    });

См. Также это: https://jsfiddle.net/mx1ovwp1/7/

$("#gridContainer").dxDataGrid({
    dataSource: employees,
     filterRow: {
        visible: true,
        applyFilter: "auto"
    },
    groupPanel:{
      visible: true
    },
    searchPanel: {
        visible: true,
        width: 240,
        placeholder: "Search..."
    },
    headerFilter: {
        visible: true
    },
    paging: {
        enabled: false
    },
    editing: {
        mode: "form",
        allowUpdating: true
    },
    columns: [
        {
            dataField: "Prefix",
            caption: "Title",
            width: 70
        },
        "FirstName",
        "LastName", {
            dataField: "Position",
            width: 170
        }, {
            dataField: "StateID",
            caption: "State",
            width: 125,
            lookup: {
                dataSource: states,
                displayExpr: "Name",
                valueExpr: "ID"
            }
        }, {
            dataField: "BirthDate",
            dataType: "date"
        }
    ]
});

Также обратитесь к этой ссылке (dxDataGrid - Как реализовать собственный фильтр для поля даты): https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field

Демо от DevExtreme см. Здесь: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/

person fiverbox.com    schedule 06.09.2020
comment
Спасибо, но все еще не понятно, как использовать мой doSomeFilter метод? - person tenbits; 07.09.2020