Need a special offer?Find out if your project fits.
  1. API reference
  • Introduction
  • Connecting to Data Source
    1. Supported data sources
    2. Connecting to other data sources
  • Browser compatibility
  • Documentation for older versions
  • Table of contents

    Supporting multilevel hierarchies

    Flexmonster supports creating multilevel hierarchies from non-hierarchical data out of the box. To use this feature for the custom data source API, you need to handle certain request scenarios on your server. 

    This guide describes how to support multilevel hierarchies on your server and configure them in the component.

    Step 1. Implement advanced hierarchical filters

    Hierarchies are composed on the client side while the server's task is to filter them. For this purpose, your back end has to implement advanced hierarchical filters.

    Flexmonster sends filters in /members and /select requests. The filters' structure depends on the custom data source API version implemented by your server (see how to check your version):

    Version 2.8.22 or later

    If the version sent in the /handshake response is 2.8.22 or later, your server should support a filter structure described by the FilterGroupObject.

    Version 2.8.5

    In version 2.8.5, the FilterObject describes the structure of the filters sent by the component.

    The include.filter and exclude.filter properties of the FilterObject are responsible for filtering hierarchical data. Therefore, implement them to enable the support of multilevel hierarchies on your server.

    Step 2. Notify Flexmonster about implementing advanced filters

    When the server implements hierarchical filters, it should inform the component about that. 

    For this purpose, set the advanced property of the /fields request to true. The component will ignore multilevel hierarchies if the advanced property is set to false

    Step 3. (optional) Handle the additional /select request

    The component sends the additional /select request when the levelName property is defined in the slice. This request extracts members from the hierarchy level specified in levelName.

    If you need the levelName property in your slice, handle the /select request for loading the required hierarchy levels.

    Step 4. Configure the multilevel hierarchies

    There are two ways to compose multilevel hierarchies:

    On the client side

    The MappingObject is responsible for grouping data into hierarchies. Specify hierarchy and parent properties to structure the data.

    The example below illustrates how to compose multilevel hierarchies in the report. Here, we create the "Item" hierarchy with the "Category" field as a first level and the "Color" field as a second level:

    report: {
      dataSource: {
        type: "api",
        url: "your_url",
        index: "your_index",
        mapping: {
          "Category": {
            type: "string",
            hierarchy: "Item"
          "Color": {
            type: "string",
            hierarchy: "Item",
            parent: "Category"
      slice: {
        // Your slice

    See a live example on JSFiddle.

    On the server side

    As an alternative to the MappingObject, you can configure hierarchies right in the response to the /fields request. To do so, specify hierarchy and parent properties for the necessary fields.

    Here is an example of a /fields response where the "Category" and "Color" fields are grouped under the "Item" hierarchy (with "Category" as the top level of the hierarchy):

          "uniqueName": "Category",
          "type": "string",
          "hierarchy": "Item"
          "uniqueName": "Color",
          "type": "string",
          "hierarchy": "Item",
          "parent": "Category"
        // ...
        // ...
        // ...

    Now run your project and open the webpage with Flexmonster - multilevel hierarchies should appear in the component.

    Check your version of the custom data source API

    To find out which version of the custom data source API your server implements, you can use the /handshake request. There are two possible options:

    • /handshake is implemented on your server.
      If the server handles this request, a version sent in the response is your custom data source API version.
    • /handshake is not implemented on your server.
      In this case, Flexmonster considers 2.8.5 to be your version of the custom data source API.

    What’s next?

    You may be interested in the following articles: