All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery FilterBuilder - 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