Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/TreeList/Filtering_and_Searching/ below:

Vue TreeList - Filtering and Searching

The filter row allows users to filter data by individual column values. The following DevExtreme components are used as filter editors:

• TextBox
• CheckBox
• DateBox
• NumberBox
• SelectBox

You can customize these editors using the columns[].editorOptions property. For more information about customizing filter row editors, refer to the following topic: Customize Editors.

View Demo

To make the filter row visible, assign true to the filterRow.visible property. You can set a column's allowFiltering property to false if data should never be filtered by it.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterRow: { visible: true },
        columns: [{
            // ...
            allowFiltering: false
        }]
    });
});

<dx-tree-list ... >
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxi-column [allowFiltering]="false" ... ></dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >
        <DxFilterRow :visible="true" />
        <DxColumn :allow-filtering="false" ... />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxFilterRow
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxFilterRow
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    FilterRow
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
                <FilterRow visible={true} />
                <Column allowFiltering={false} ... />
            </TreeList>
        );
    }
}

A user-specified filter is automatically applied with a delay by default. Alternatively, it can be applied by a click on the "Apply Filter" button if you set the filterRow.applyFilter property to "onClick".

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterRow: {
            visible: true,
            applyFilter: "onClick"
        }
    });
});

<dx-tree-list ... >
    <dxo-filter-row
        [visible]="true"
        applyFilter="onClick">
    </dxo-filter-row>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ...>
        <DxFilterRow 
            :visible="true" 
            apply-filter="onClick"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxFilterRow
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxFilterRow
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    FilterRow
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
                <FilterRow 
                    visible={true} 
                    applyFilter="onClick" 
                />
            </TreeList>
        );
    }
}

Each cell in the filter row contains a magnifying glass icon. Hovering the mouse pointer over it opens a drop-down list with the column's available filter operations.

The set of available filter operations can be restricted using the filterOperations property. You can also preselect a filter operation and specify the initial filter value with the selectedFilterOperation and filterValue properties. Call the columnOption method at runtime to change these properties:

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterRow: { visible: true },
        columns: [{
            dataField: "Status",
            filterOperations: ["contains", "="],
            selectedFilterOperation: "contains",
            filterValue: "Pending"
        }]
    });
});

$("#treeListContainer").dxTreeList("columnOption", "Status", {
    selectedFilterOperation: "=",
    filterValue: "Finished"
});

<dx-tree-list ... >
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxi-column 
        dataField="Status"
        [filterOperations]="['contains', '=']"
        [(selectedFilterOperation)]="selectedOperation"
        [(filterValue)]="filterValue">
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    selectedOperation: string = "contains";
    filterValue: any = "Pending";
    applyFilter (operation, value) {
        this.selectedOperation = operation;
        this.filterValue = value;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >
        <DxFilterRow :visible="true />
        <DxColumn 
            :filter-operations="allowedOperations"
            v-model:selected-filter-operation="selectedOperation"
            v-model:filter-value="filterValue" 
            data-field="Status"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxFilterRow
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxFilterRow
    },
    data() {
        return {
            allowedOperations: ['contains', '='],
            selectedOperation: 'contains',
            filterValue: 'Pending'
        }
    },
    methods: {
        applyFilter (operation, value) {
            this.selectedOperation = operation;
            this.filterValue = value;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    FilterRow
} from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.filterOperations = ['contains', '='];
        this.state = {
            selectedOperation: 'contains',
            filterValue: 'Pending'
        }
    }

    render() {
        let { selectedOperation, filterValue } = this.state;
        return (
            <TreeList (onOptionChanged)={this.optionChanged} ... >
                <FilterRow visible={true} />
                <Column 
                    dataField="Status"
                    filterOperations={this.filterOperations}
                    selectedFilterOperation={selectedOperation}
                    filterValue={filterValue}
                />
            </TreeList>
        );
    }
    optionChanged = (e) => {
        if(e.fullName === "columns[0].filterValue") {
            this.setState({ 
                filterValue: e.value
            })
        }
        if(e.fullName === "columns[0].selectedFilterOperation") {
            this.setState({ 
                selectedOperation: e.value
            })
        }
    }
    applyFilter = (operation, value) => {
        this.setState({
            selectedOperation: operation,
            filterValue: value
        })
    }
}

• Filtering API - Initial and Runtime Filtering
• remoteOperations

A header filter allows a user to filter values in an individual column by including or excluding them from the applied filter. Clicking a header filter icon invokes a popup menu with all the column's unique values. A user includes or excludes values from the filter by selecting or clearing their selection in this menu.

View Demo

Assign true to the headerFilter.visible property to make header filter icons visible for all columns. Set a column's allowHeaderFiltering property to false if its header filter should not be available. Note that this property inherits the allowFiltering property's value by default.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        headerFilter: { visible: true },
        columns: [{
            // ...
            allowHeaderFiltering: false
        }]
    });
});

<dx-tree-list ... >
    <dxo-header-filter [visible]="true"></dxo-header-filter>
    <dxi-column [allowHeaderFiltering]="false" ... ></dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >
       <DxHeaderFilter :visible="true" />
       <DxColumn :allow-header-filtering="false" ... />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxHeaderFilter
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxHeaderFilter
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    HeaderFilter
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
                <HeaderFilter visible={true} />
                <Column allowHeaderFiltering={false} ... />
            </TreeList>
        );
    }
}

A user can change the applied filter by including or excluding values. Use a column's filterType property to specify the required mode. You can specify the initial filter by combining this property and the filterValues property. To change it at runtime, call the columnOption method:

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "OrderDate",
            filterType: "exclude", // or "include"
            filterValues: [2014]
        }]
    });
});

$("#treeListContainer").dxTreeList("columnOption", "OrderDate", {
    filterType: "include",
    filterValues: [2014, 2015]
});

<dx-tree-list ... >
    <dxi-column 
        dataField="OrderDate"
        [(filterValues)]="filterValues"
        [(filterType)]="filterType"> 
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    filterValues: Array<any> = [2014];
    filterType: string = "exclude";    // or "include"
    applyFilter (filterType, values) {
        this.filterType = filterType;
        this.filterValues = values;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >           
        <DxColumn 
            v-model:filter-type="filterType"
            v-model:filter-values="filterValues" 
            data-field="OrderDate"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    data() {
        return {
           filterType: "exclude", // or "include" 
           filterValues: [2014]
        }
    },
    methods: {
        applyFilter (filterType, values) {
            this.filterType = filterType;
            this.filterValues = values;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);            
        this.state = {
            filterType: 'exclude', // or 'include'
            filterValues: [2014]
        }
    }

    render() {
        let { filterType, filterValues } = this.state;
        return (
            <TreeList ... 
                onOptionChanged={this.onOptionChanged}>                
                <Column 
                    dataField="OrderDate"
                    filterType={filterType}                   
                    filterValues={filterValues}
                />
            </TreeList>
        );
    }
    onOptionChanged = (e) => {
        if(e.fullName === "columns[0].filterValues") {
            this.setState({ 
                filterValues: e.value
            })
        }
        if(e.fullName === "columns[0].filterType") {
            this.setState({ 
                filterType: e.value
            })
        }
    }
    applyFilter = (filterType, values) => {
        this.setState({
            filterType: filterType,
            filterValues: values
        })
    }
}

You can use the headerFilter.allowSearch property to enable the header filter's searching capability. The same property can be declared in a column's configuration object, in which case it controls searching in that column's header filter.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        headerFilter: { 
            visible: true,
            allowSearch: true
        },
        columns: [{
            // ...
            headerFilter: { 
                allowSearch: false
            }
        }]
    });
});

<dx-tree-list ... >
    <dxo-header-filter [visible]="true" [allowSearch]="true"></dxo-header-filter>
    <dxi-column ... >
        <dxo-header-filter [allowSearch]="false"></dxo-header-filter>
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >
        <DxHeaderFilter 
            :allow-search="true" 
            :visible="true" 
        />
        <DxColumn>
            <DxColumnHeaderFilter :allow-search="false" />
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxHeaderFilter,
    DxColumnHeaderFilter
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxHeaderFilter,
        DxColumnHeaderFilter
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    HeaderFilter,
    ColumnHeaderFilter
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
                <HeaderFilter 
                    allowSearch={true} 
                    visible={true} 
                />
                <Column>
                    <ColumnHeaderFilter allowSearch={false} />
                </Column>
            </TreeList>
        );
    }
}

A header filter's popup menu lists all column values by default. You can group them using the headerFilter.groupInterval property if they are numbers or dates. You can also provide a custom data source for a header filter using the dataSource property. Refer to the property's description for details.

• Filtering API - Initial and Runtime Filtering
• remoteOperations

The search panel allows users to search for values in several columns at once. Search is case-insensitive.

View Demo

To make the search panel visible, assign true to the searchPanel.visible property. You can set a column's allowSearch property to false if it should be excluded from searching. Note that this property inherits the allowFiltering property's value by default.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        searchPanel: { visible: true },
        columns: [{
            // ...
            allowSearch: false
        }]
    });
});

<dx-tree-list ... >
    <dxo-search-panel [visible]="true"></dxo-search-panel>
    <dxi-column [allowSearch]="false" ... ></dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >
       <DxSearchPanel :visible="true" />
       <DxColumn :allow-search="false" />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxSearchPanel
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxSearchPanel
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    SearchPanel
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
              <SearchPanel visible={true} />
              <Column allowSearch={false} />
            </TreeList>
        );
    }
}

Use the searchPanel.text property to predefine the search value. You can also change it at runtime by calling the searchByText(text) method:

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        searchPanel: {
            visible: true,
            text: "4/1/2015"
        }
    });
});

$("#treeListContainer").dxTreeList("searchByText", "1/29/2016");

<dx-tree-list ... >
    <dxo-search-panel 
        [visible]="true" 
        [(text)]="searchText">
    </dxo-search-panel>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    searchText: string = "4/1/2015";
    setSearchValue (searchText) {
        this.searchText = searchText;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... >
        <DxSearchPanel 
            :visible="true"
            v-model:text="searchText" 
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxSearchPanel
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxSearchPanel
    },
    data() {
       return {
           searchText: "4/1/2015",
       }
    },
    methods: {
        setSearchValue (searchText) {
            this.searchText = searchText;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    SearchPanel
} from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchText: "4/1/2015"
        }
    }

    render() {
        let { searchText } = this.state;
        return (
            <TreeList ... 
                onOptionChanged={this.onOptionChanged}>
                <SearchPanel 
                    visible={true}
                    text={searchText} 
                />
            </TreeList>
        );
    }
    onOptionChanged = (e) => {
        if(e.fullName === "searchPanel.text") {
            this.setSearchValue(e.value);
        }
    }
    setSearchValue = (searchText) => {
        this.setState({
            searchText: searchText
        })
    }
}

Searching is performed differently depending on a column's data type. Numeric, Boolean, and date columns require that a user enters a full value into the search panel. Searching columns containing string values and specifying the search value using the API requires entering only a part of a value.

• Filtering API - Initial and Runtime Filtering
• remoteOperations

The filter panel displays the applied filter expression.

You can click the filter expression to open the integrated filter builder.

View Demo

Set the filterPanel.visible property to true to make the filter panel visible.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterPanel: { visible: true }
    });
});

<dx-tree-list ... >
    <dxo-filter-panel [visible]="true"></dxo-filter-panel>
</dx-tree-list>

<template>
    <DxTreeList ... >
       <DxFilterPanel :visible="true />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {      
    DxFilterPanel
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxFilterPanel
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    FilterPanel
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ...>
                <FilterPanel visible={true} />                  
            </TreeList>
        );
    }
}

If a user changes the filter expression in the filter panel or filter builder, the changes are reflected in the filter row and header filter, and vice versa. Set the filterSyncEnabled property to false to disable this synchronization. In this case, the filter panel remains synchronized with the filter builder.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterSyncEnabled: false
    });
});

<dx-tree-list ...
    [filterSyncEnabled]="false">
</dx-tree-list>

<template>
    <DxTreeList ... 
        :filter-sync-enabled="false"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                filterSyncEnabled={false}
            />
        );
    }
}

You can define the filter expression programmatically with the filterValue property. See the property's description for the full list of available filter operations and their peculiarities.

The filterValue is updated when a user changes the filter expression from the UI. Use the option method to update it from the API:

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterValue: ["SaleAmount", "<>", null],
        filterPanel: { 
            visible: true
        }
    });
});

$("#treeListContainer").dxTreeList("option", "filterValue", ["Employee", "contains", "Clark"]);

<dx-tree-list ...
    [(filterValue)]="filterValue">
    <dxo-filter-panel 
        [visible]="true">
    </dxo-filter-panel>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    filterValue: Array<any> = ['SaleAmount', '<>', null];
    applyFilter (filterExpression) {
        this.filterValue = filterExpression;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... 
        v-model:filter-value="filterValue">
        <DxFilterPanel :visible="true" />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxFilterPanel
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxFilterPanel
    },
    data() {
        return {
            filterValue: ['SaleAmount', '<>', null]
        };
    },
    methods: {
        applyFilter (filterExpression) {
            this.filterValue = filterExpression;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    FilterPanel
} from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filterValue: ['SaleAmount', '<>', null]
        }
    }

    render() {
        let { filterValue } = this.state;
        return (
            <TreeList ...
                onOptionChanged={this.onOptionChanged} 
                filterValue={filterValue}>
                <FilterPanel visible={true} />                  
            </TreeList>
        );
    }
    onOptionChanged = (e) => {
        if(e.fullName === "filterValue") {
            this.applyFilter(e.value);
        }      
    }
    applyFilter = (filterExpression) => {
        this.setState({
            filterValue: filterExpression
        });
    }
}

The TreeList provides the filterBuilder and filterBuilderPopup objects that configure the integrated filter builder and the popup in which it appears. These objects can contain the FilterBuilder's and Popup's properties. In the following code, the filter builder has an additional filter operation Is Zero; the filter builder's popup is customized and displayed on a button click:

$(function() {
    var treeList = $("#treeListContainer").dxTreeList({
        // ...
        filterPanel: { visible: false },
        filterSyncEnabled: true,
        filterBuilder: {
            customOperations: [{
                name: "isZero",
                caption: "Is Zero",
                dataTypes: ["number"],
                hasValue: false,
                calculateFilterExpression: function(filterValue, field) {
                    return [field.dataField, "=", 0];
                }
            }]
        }, 
        filterBuilderPopup: {
            width: 400,
            title: "Synchronized Filter"
        }
    }).dxTreeList("instance");
    $("#button").dxButton({
        text: "Show Filter Builder",
        onClick: function () {
            treeList.option("filterBuilderPopup", { visible: true });
        }
    });
});

<dx-tree-list ... 
    [filterSyncEnabled]="true">
    <dxo-filter-panel [visible]="false"></dxo-filter-panel>
    <dxo-filter-builder 
        [customOperations]="customOperations">
    </dxo-filter-builder>
    <dxo-filter-builder-popup 
        [width]="400"
        title="Synchronized Filter"
        [(visible)]="popupVisible">
    </dxo-filter-builder-popup>
</dx-tree-list>
<dx-button
    text="Show Filter Builder"
    (onClick)="showFilterBuilder()">
</dx-button>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    popupVisible: boolean = false;
    customOperations = [{
        name: "isZero",
        caption: "Is Zero",
        dataTypes: ["number"],
        hasValue: false,
        calculateFilterExpression: function(filterValue, field) {
            return [field.dataField, "=", 0];
        }
    }];
    showFilterBuilder () {
        this.popupVisible = true;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <div>
        <DxTreeList ... 
            :filter-sync-enabled="true">
            <DxFilterPanel :visible="false" />
            <DxFilterBuilder :custom-operations="customOperations" />
            <DxFilterBuilderPopup 
                :width="400"
                v-model:visible="popupVisible"
                title="Synchronized Filter"
            />
        </DxTreeList>
        <DxButton
            @click="showFilterBuilder"
            text="Show Filter Builder"                
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxButton from 'devextreme-vue/button';

import DxTreeList, {
    DxFilterPanel,
    DxFilterBuilder,
    DxFilterBuilderPopup
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxFilterPanel,
        DxFilterBuilder,
        DxFilterBuilderPopup,
        DxButton
    },
    data() {
        return {
            customOperations: [{
                name: "isZero",
                caption: "Is Zero",
                dataTypes: ["number"],
                hasValue: false,
                calculateFilterExpression: function(filterValue, field) {
                    return [field.dataField, "=", 0];
                }
            }],
            popupVisible: false                
        };
    },
    methods: {
        showFilterBuilder () {
            this.popupVisible = true;
        }            
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Button from 'devextreme-react/button';

import TreeList, {
    FilterPanel,        
    FilterBuilder,
    FilterBuilderPopup
} from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            popupVisible: false
        }
        this.customOperations = [{
            name: "isZero",
            caption: "Is Zero",
            dataTypes: ["number"],
            hasValue: false,
            calculateFilterExpression: function(filterValue, field) {
                return [field.dataField, "=", 0];
            }
        }]
    }

    render() {
        let { popupVisible } = this.state;
        return (
            <React.Fragment>
                <TreeList ... 
                    filterSyncEnabled={true} >
                    <FilterPanel visible={false} />
                    <FilterBuilder customOperations={this.customOperations} />
                    <FilterBuilderPopup 
                        width={400}
                        title="Synchronized Filter"
                        visible={popupVisible}
                    />                  
                </TreeList>
                <Button 
                    text="Show Filter Builder" 
                    onClick={this.showFilterBuilder} 
                />
            </React.Fragment>
        );
    }
    showFilterBuilder = () => {
        this.setState({
            popupVisible: true
        });
    }
}

• FilterBuilder - Overview
• remoteOperations

The TreeList UI component has an integrated filter builder that can be invoked using the filter panel. You can also use the FilterBuilder UI component as a standalone component. Pass an array of columns that should be filtered to the FilterBuilder's fields property. Each item in this array should at least specify a dataField. The following code passes TreeList columns to the FilterBuilder:

var columns = [{
    caption: "ID",
    dataField: "Product_ID",
    dataType: "number"
}, {
    dataField: "Product_Name"
}, {
    caption: "Cost",
    dataField: "Product_Cost",
    dataType: "number",
    format: "currency"
}];

$(function () {
    $("#treeList").dxTreeList({
        dataSource: products, 
        columns: columns
    });
    $("#filterBuilder").dxFilterBuilder({
        fields: columns
    });
});

<dx-filter-builder 
    [fields]="columns">
</dx-filter-builder>
<dx-tree-list 
    [dataSource]="products"  
    [columns]="columns">
</dx-tree-list>

import { DxTreeListModule, DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
    columns = [{
        caption: "ID",
        dataField: "Product_ID",
        dataType: "number"
    }, {
        dataField: "Product_Name"
    }, {
        caption: "Cost",
        dataField: "Product_Cost",
        dataType: "number",
        format: "currency"
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        DxFilterBuilderModule
    ],
    // ...
})

<template>
    <div>
        <DxTreeList :columns="columns" />
        <DxFilterBuilder :fields="columns" />          
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';
import DxFilterBuilder from 'devextreme-vue/filter-builder';

export default {
    components: {
        DxTreeList,
        DxFilterBuilder
    },
    data() {
        return {
            columns: [{
                caption: "ID",
                dataField: "Product_ID",
                dataType: "number"
            }, {
                dataField: "Product_Name"
            }, {
                caption: "Cost",
                dataField: "Product_Cost",
                dataType: "number",
                format: "currency"
            }]
        };
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';
import FilterBuilder from 'devextreme-react/filter-builder';

const columns = [{
    caption: "ID",
    dataField: "Product_ID",
    dataType: "number"
}, {
    dataField: "Product_Name"
}, {
    caption: "Cost",
    dataField: "Product_Cost",
    dataType: "number",
    format: "currency"
}];

class App extends React.Component {
    render() {
        return (
            <React.Fragment>
                <TreeList defaultColumns={columns} />              
                <FilterBuilder defaultFields={columns} />
            </React.Fragment>
        );
    }
}

Then, add a button that updates a filter of the TreeList's data source according to the filter expression:

$(function () {
    // ...
    $("#button").dxButton({
        text: "Apply Filter",
        onClick: function () {
            var filter = $("#filterBuilder").dxFilterBuilder("instance").getFilterExpression();
            $("#treeList").dxTreeList("instance").filter(filter);
        }
    });
});

import { 
    DxTreeListModule, 
    DxFilterBuilderModule, 
    DxTreeListComponent, 
    DxFilterBuilderComponent 
} from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    @ViewChild(DxFilterBuilderComponent, { static: false }) filterBuilder: DxFilterBuilderComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    // @ViewChild(DxFilterBuilderComponent) filterBuilder: DxFilterBuilderComponent;
    // ...
    buttonClick() {
        this.treeList.instance.filter(this.filterBuilder.instance.getFilterExpression());
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        DxFilterBuilderModule
    ],
    // ...
})

<dx-button 
    text="Apply Filter"
    (onClick)="buttonClick()">
</dx-button>

<template>
    <div>
        <DxTreeList ... 
           :ref="gridRefKey"
        />
        <DxFilterBuilder ... 
            :ref="fbRefKey"
        />
        <DxButton 
            @click="buttonClick"
            text="Apply Filter"   
        />               
    </div>    
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';
import DxFilterBuilder from 'devextreme-vue/filter-builder';
import DxButton from 'devextreme-vue/button';

const treeListRefKey = 'tree-list';
const fbRefKey = 'filter-builder';

export default {
    components: {
        DxTreeList,
        DxButton,
        DxFilterBuilder
    },
    data() {
        return {
            // ...
            treeListRefKey,
            fbRefKey
        };
    },
    methods: {
        buttonClick () {
            this.treeList.filter(this.filterBuilder.getFilterExpression());
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        },
        filterBuilder: function(){
            return this.$refs[fbRefKey].instance;                
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';
import FilterBuilder from 'devextreme-react/filter-builder';
import Button from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);    
        this.gridRef = React.createRef();
        this.fbRef = React.createRef();                   
    }
    get treeList() {
        return this.gridRef.current.instance();
    }
    get filterBuilder() {
        return this.fbRef.current.instance();
    }

    render() {
        return (
            <React.Fragment>
                <TreeList ... 
                    :ref="gridRef" />              
                <FilterBuilder ...
                    :ref="fbRef" />
                <Button 
                    text="Apply Filter" 
                    onClick={this.buttonClick} />    
            </React.Fragment>
        );
    }
    buttonClick = () => {
        this.treeList.filter(this.filterBuilder.getFilterExpression());
    }
}

• Filtering API - Initial and Runtime Filtering

The initial and runtime filtering API depends on the UI element and is described in the topics above. This API is designed to filter data the data source returns. If you need to pre-filter data in the data source, call the filter(filterExpr) method by passing a filter expression as an argument. Note that this filter can only be cleared programmatically.

$("#treeListContainer").dxTreeList("filter", [
    [ "Cost", ">", 1000 ],
    "and",
    [ "Cost", "<=", 2000 ]
]);

import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    filterByCost () {
        this.treeList.instance.filter([
            [ "Cost", ">", 1000 ],
            "and",
            [ "Cost", "<=", 2000 ]
        ]);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList ... 
        :ref="gridRefKey"
    />      
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

const treeListRefKey = 'tree-list';

export default {
    components: {
        DxTreeList,
    },
    data() {
        return {
            // ...
            treeListRefKey
        };
    },
    methods: {
        filterByCost() {
            this.treeList.filter([
                [ "Cost", ">", 1000 ],
                "and",
                [ "Cost", "<=", 2000 ]
            ]);
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);    
        this.gridRef = React.createRef();                  
    }
    get treeList() {
        return this.gridRef.current.instance();
    }

    render() {
        return (
            <TreeList ... 
                :ref="gridRef" /> 
        );
    }

    filterByCost = () => {
        this.treeList.filter([
            [ "Cost", ">", 1000 ],
            "and",
            [ "Cost", "<=", 2000 ]
        ]);
    }
}

You can create a filter that combines all the applied filters by calling the getCombinedFilter() method. It returns a filter with getters by default. Call it by passing true as the argument to get the combined filter with data fields.

$("#treeListContainer").dxTreeList("getCombinedFilter", true);

import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    getCombinedFilter () {
        return this.treeList.instance.getCombinedFilter(true);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <div>
        <DxTreeList ... 
           :ref="gridRefKey"
        />   
    </div>    
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

const treeListRefKey = 'tree-list';

export default {
    components: {
        DxTreeList,
    },
    data() {
        return {
            // ...
            treeListRefKey
        };
    },
    methods: {
        getCombinedFilter () {
            return this.treeList.getCombinedFilter(true);
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);    
        this.gridRef = React.createRef();                  
    }
    get treeList() {
        return this.gridRef.current.instance();
    }

    render() {
        return (               
            <TreeList ... 
                :ref="gridRef" />
        );
    }

    getCombinedFilter = () => {
        return this.treeList.getCombinedFilter(true);
    }
}

• Filtering API - Clear Filtering Settings

The clearFilter(filterName) method allows you to clear different filter settings depending on the argument. Acceptable arguments are listed in the method's description.

// Clears the search panel
$("#treeListContainer").dxTreeList("clearFilter", "search");

import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    clearSearchPanel () {
        this.treeList.instance.clearFilter("search");
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template> 
    <DxTreeList ... 
        :ref="gridRefKey"
    />       
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

const treeListRefKey = 'tree-list';

export default {
    components: {
        DxTreeList,
    },
    data() {
        return {
            // ...
            treeListRefKey
        };
    },
    methods: {
        clearSearchPanel = () => {
            this.treeList.clearFilter("search");
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);    
        this.gridRef = React.createRef();                  
    }
    get treeList() {
        return this.gridRef.current.instance();
    }

    render() {
        return (
            <TreeList ... 
                :ref="gridRef" 
            />
        );
    }

    clearSearchPanel = () => {
        this.treeList.clearFilter("search");
    }
}

• remoteOperations

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4