A newer version of this page is available. Switch to the current version.

Filter Hierarchical Fields

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

jQuery
JavaScript
var 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
TypeScript
HTML
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"
        }
    }, 
    // ...
    ];

    fields = [
        { dataField: "orderID" },
        { dataField: "address.state" }, 
        { dataField: "address.city" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})
<dx-filter-builder 
    [fields]="fields">
</dx-filter-builder>

DevExtreme HTML5 JavaScript Filter Builder Hierarchical Fields

View Demo

See Also