DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

Filter Hierarchical Fields

In the following code, the FilterBuilder allows filtering by three fields, two of which are hierarchical. The allowHierarchicalFields property set to true specifies displaying hierarchical fields as a tree.

jQuery
JavaScript
const orders = [{
    orderID: 35703,
    address: {
        state: "California",
        city: "Los Angeles"
    }
}, {
    orderID: 35711,
    address: {
        state: "California",
        city: "San Jose"
    }
}, 
// ...
];

$(function() {
    $("#filterBuilderContainer").dxFilterBuilder({
        fields: [
            { dataField: "orderID" },
            { dataField: "address.state" }, 
            { dataField: "address.city" }
        ],
        allowHierarchicalFields: true
    });
});
Angular
HTML
TypeScript
<dx-filter-builder
    [allowHierarchicalFields]="true">
    <dxi-field dataField="orderID"></dxi-field>
    <dxi-field dataField="address.state"></dxi-field>
    <dxi-field dataField="address.city"></dxi-field>
</dx-filter-builder>
import { DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
    orders = [{
        orderID: 35703,
        address: {
            state: "California",
            city: "Los Angeles"
        }
    }, {
        orderID: 35711,
        address: {
            state: "California",
            city: "San Jose"
        }
    }, 
    // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxFilterBuilder
        :allow-hierarchical-fields="true">
        <DxField data-field="orderID" />
        <DxField data-field="address.state" />
        <DxField data-field="address.city" />
    </DxFilterBuilder>
</template>

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

import DxFilterBuilder, {
    DxField
} from 'devextreme-vue/filter-builder';

const orders = [{
    orderID: 35703,
    address: {
        state: "California",
        city: "Los Angeles"
    }
}, {
    orderID: 35711,
    address: {
        state: "California",
        city: "San Jose"
    }
}, 
// ...
];

export default {
    components: {
        DxFilterBuilder,
        DxField
    },
    data() {
        return {
            orders
        }
    }
}
</script>
React
App.js
import 'devextreme/dist/css/dx.light.css';

import FilterBuilder, {
    Field
} from 'devextreme-react/filter-builder';

const orders = [{
    orderID: 35703,
    address: {
        state: "California",
        city: "Los Angeles"
    }
}, {
    orderID: 35711,
    address: {
        state: "California",
        city: "San Jose"
    }
}, 
// ...
];

export default function App() {
    return (
        <FilterBuilder
            allowHierarchicalFields={true}>
            <Field dataField="orderID" />
            <Field dataField="address.state" />
            <Field dataField="address.city" />
        </FilterBuilder>
    );
}

DevExtreme HTML5 JavaScript Filter Builder Hierarchical Fields

View Demo

See Also