custom dropdown and tree grid

Hello,
 
Thank you for contacting us.
 

1. In case your requirement is to place the drop-down within the cell, we can recommend the following approach:

   Use the customizeCell Flexmonster API in order to replace the inner HTML of the desired cell with the drop-down element. Please find out an example we have prepared for you. We recommend checking out our documentation dedicated to the customizeCell API in order to get better understanding of processes demonstrated within the mentioned example.

   However, such an approach can become a little bit heavy. Instead, we would like to draw your attention to our context menu. The context menu is opened after the cell is right clicked and provides additional functionality to the user.

   It customized in order to fit your needs. It is possible to remove existing or add new elements to the list of tabs, specify the different menu for each form (e.g., different menus for compact and flat forms of the pivot), and develop the custom logic for each element.

   We recommend checking out our tutorial dedicated to customization of the context menu: https://www.flexmonster.com/doc/customizing-context-menu/.

2. We would like to kindly inform you that we focus on a table representation of the data.

   In order to get the functionality that would be close to the described one, we recommend checking out our drill-through feature. It allows opening the grid with additional information about the double-clicked member in the pop-up. It is possible to specify an exact set of hierarchies that are going to be shown within the pop-up or show all connected hierarchies by default.

   You are welcome to test the feature on our demo. Simply double click on any cell in order to drill through it: https://www.flexmonster.com/demos/js/pivot-table/.

   In case it does not cover your needs and your requirement is to implement some custom representation, our team would like to draw your attention to the following events:
   cellclick: https://www.flexmonster.com/api/cellclick/
   celldoubleclick: https://www.flexmonster.com/api/celldoubleclick/

   Those events are triggered when the user clicks on the cell and can be used in order to create an appropriate block containing specific information about the clicked cell. The events pass the cell data object to the handler. Such an object contains all information about the clicked cell and can be used in order to implement the desired functionality. It also contains an absolute position of the cell that can be helpful while creating the custom block.

   More about cell data object: https://www.flexmonster.com/api/cell-object/.

3. As for the tree grid, our team would like to inform you that Flexmonster supports multi-level hierarchies.

   We recommend checking out an example demonstrating usage of the feature: https://jsfiddle.net/flexmonster/72ebxyvn/.

   The data set used within the example contains hierarchies "Country", "State", and "City".
   It is possible to present them as a multi-hierarchy (e.g., named "Geography) on the pivot using the following construction in the mapping property of the dataSource object.

    ...
    Country: {
        type: "level",
        hierarchy: "Geography",
        level: "Country"
    },
    State: {
        type: "level",
        hierarchy: "Geography",
        level: "State",
        parent: "Country"
    },
    City: {
        type: "level",
        hierarchy: "Geography",
        parent: "State"
    }
    ...

   The Mapping Object itself allows defining field data types, captions, and multi-level hierarchies; grouping fields under separate dimensions and setting other view configurations of hierarchies from the CSV, JSON, and OLAP data sources.

   More information dedicated to the mapping object itself: https://www.flexmonster.com/api/mapping-object/.

 
We hope it helps.
 
Please contact us in case any additional questions on this point occur.
 
Best regards,
Illia

Hello,
 
Thank you for providing additional information.
 
We have prepared a sample that uses Angular component as a base for creating the drop-down list.
However, it only demonstrates a general approach to implement the required functionality.
 
In order to start a project, run the following commands:

npm install
ng serve

 
We would like to kindly provide some additional explanation to the following code snippets taken from an example:
 
app.component.html
This element will serve as a template for creating drop-downs in cells. Its innerHTML will be used to compose appropriate elements.

<my-component id='template' style="display: none;"></my-component>

An execution of the onReportComplete($event) function is bound on the reportcomplete event.

<fm-pivot #pivot
  [toolbar]="true"
  [width]="'100%'"
  [height]="500"
  [report]="pivotReport"
  [licenseKey]="'XXXX-XXXX-XXXX-XXXX'"
  (reportomplete)="onReportComplete($event)">
</fm-pivot>

 
app.component.ts
The function called when the reportcomplete event it triggered. In its turn, it calls customizeCell function and bind event listener on the created drop-down.

onReportComplete(pivot: Flexmonster.Pivot): void {
  this.pivot.flexmonster.customizeCell((cell, data) => this.onCustomizeCell(cell, data));
  this.pivot["root"].addEventListener("change", (e) => {
    if (e.target.name == 'countrySelect')
      alert(`Record ID: ${e.target.parentElement.getAttribute('recordId')}\\nSelected country ID: ${e.target.value}`)
  });
}

Such a binding is due to the specifics of how Angular works with contexts.
Instead of listening to the onchange event as demonstrated in the example you have provided:

(change)="onChange($event.target.value)"

the following approach should be used:

this.pivot["root"].addEventListener("change", (e) => {
  if (e.target.name == 'countrySelect')
    /* some custom logic */

 
Finally, the onCustomizeCell function should be implemented as following:

onCustomizeCell(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData): void {
  if (data.measure && data.type != 'header' && data.measure.uniqueName == "Drop-down") {
    cell.attr['recordId'] = data.value;
    cell.text = document.getElementById('template').innerHTML;
    cell.style['z-index'] = 2;
  }
}

It is dedicated to find an appropriate cell and fill it with innerHTML of the template mentioned earlier.
 
An important remark: the following line of code is responsible for specifying a unique record identifier. The value property of the data object is taken from the initial data set and should be unique for each record.

cell.attr['recordId'] = data.value;

The following code snippet demonstrates the way to get such identifier:

this.pivot["root"].addEventListener("change", (e) => {
    if (e.target.name == 'countrySelect')
      alert(`Record ID: ${e.target.parentElement.getAttribute('recordId')}\\nSelected country ID: ${e.target.value}`)

 
Finally, specifying z-index property of the cell allows floating a created drop-down over the grid so the user is able to interact with it.
 
As you can see, implementing such functionality can be difficult enough in the context of pivot tables.
We would like to kindly suggest providing us with detailed information about the final result you desire to achieve so we could recommend the best variant for your case.
 
Our team is looking forward to hearing from you.
 
Kind regards,
Illia