How to add checkbox as a column

Hello,
 
Thank you for reaching out to us.
 
We would like to kindly ask you to provide some examples or detailed description of the functionality you desire to achieve. A better understanding of your use case would allow us to offer the most appropriate solution.
 
Best regards,
Illia

Hello,
 
Thank you for providing us with an example.
 
In order to create a column with checkboxes, we recommend the following approach:

1. Create an additional property "ID" that would be a wrapper for the checkbox, its value should be a unique identifier of the record:

   {
       "Serial number": 249898,
       "Hostname": "fas3950-dal-3b",
       "ID": 1
   },
   {
       "Serial number": 628502,
       "Hostname": "fas8176-dal-1b",
       "ID": 2
   }
   

2. Create an object that will be a container for chosen rows. Fill the wrappers with an appropriate HTML so the checkboxes are displayed. Also it is required to specify the value for each checkbox and create a controller dedicated to tracking the state of checkboxes.

   var selectedRows = {};
   
   flexmonster.customizeCell((cell, data) => {
       if (data.measure && data.type != 'header' && data.measure.uniqueName == "Checkbox") {
           cell.text = `<input type="checkbox" value="${data.value}" onchange="onCheck(event)" ${selectedRows[data.value] ? 'checked' : ''}>`;
           cell.style['z-index'] = 2;
       }
   });
   
   function onCheck(event) {
       selectedRows[event.target.value] = event.target.checked;
   }
   

3. Finally, the desired functionality can be implemented. An example below shows how to get ID of rows that were selected using created checkboxes:

   function printChecked() {
       let output = "Selected row's ID:\n";
       for (let elem in selectedRows)
       if (selectedRows[elem])
           output += elem + '\n';
       alert(output);
   }
   

Please check out an example we have prepared demonstrating such an approach.
 
You are welcome to learn more about methods and object used in the example:

• customizeCell API
• Cell Data Object

Also, find out more about component customization in our blog post: Grid customization and styling beyond CSS.
 
As you can see, the implementation of such a small feature is quite complicated. It is connected with fact that the main purpose of Flexmonster is visualization, filtration, and aggregation of data. In case you desire to visualize a small selectable list, it may be reasonable to use built-in JavaScript and HTML features.
 
We hope it helps.
 
Do not hesitate to contact us in case of additional questions.
 
Kind regards,
Illia

Hello,
 
Thank you for providing us with details.
 
The problem you are facing is due to the specifics Angular works with contexts. Being bound to the onchange event within the <input> tag itself, the onCheck function is invisible for the place it is called from.
 
As an alternative, we recommend using the following approach:
Invoke the customizeCell function after the reportcomplete event is triggered instead of binding a function while creating the instance of Flexmonster:
app.component.ts

onPivotReady(pivot: Flexmonster.Pivot): void {
  this.pivot.flexmonster.customizeCell((cell, data) => this.onCustomizeCell(cell, data));
  ...
}

app.component.html

<h1>Angular/Flexmonster</h1>
<fm-pivot #pivot
  ...
  [customizeCell]="onCustomizeCell"
  (ready)="onPivotReady($event)"
  ...
</fm-pivot>

Now, checkboxes should be created, as demonstrated in the following code block:

onCustomizeCell(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData): void {
  if (data.measure && data.type != 'header' && data.measure.uniqueName == "ID") {
    cell.text = `<input type="checkbox" name="fm-checkbox" value="${data.value}" ${this.selectedRows[data.value] ? 'checked' : ''}>`;
    cell.style['z-index'] = 2;
  }
}

 
The event listener for the checkboxes should be added manually after the report is complete instead of adding it inside the <input> tag:

onPivotReady(pivot: Flexmonster.Pivot): void {
  this.pivot.flexmonster.customizeCell((cell, data) => this.onCustomizeCell(cell, data));
  this.pivot["root"].addEventListener("change", (e) => {
    if (e.target.name == 'fm-checkbox')
      this.onCheck(e);
  });
}

Please note that the validation (e.g., by name) should be implemented in order to avoid collisions.

Such an approach allows working with checkboxes using Angular.

As for the possibility to check all checkboxes at once, it can be achieved with the following function:

selectAll(): void {
  let boxes = document.getElementsByName('fm-checkbox');
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].setAttribute("checked", "checked");
    this.selectedRows[boxes[i].getAttribute('value')] = true;
  }
}

It can be bound to the button or another control that fits your needs.
 
You will find a sample project demonstrating the described approach in attachments.
 
Please replace XXXX-XXXX-XXXX-XXXX in the app.component.html file with an actual key and run following commands in order to start the project:

npm install
ng serve

After running commands mentioned above, the project will be running on localhost:4200.
 
We hope it works for you.
 
Kind regards,
Illia

Example:

Hello, Michel,
 
Thank you for reaching out to us. 
 
For Vue, we kindly suggest adjusting the code this way: 

this.$el.addEventListener("change",(e)=>{

   if (e.target.name == 'fm-checkbox')
     this.onCheck(e);

});

 
We have prepared a sample Vue project for illustration available by the following link.
The project illustrates how the same code provided earlier for Angular can be implemented in Vue.
Please run the following commands in order to start the project:

npm install
npm start

After running the commands mentioned above, the project will be running on localhost:8080.
 
 
Please let us know if this works fine for you. 
Looking forward to your answer.
 
 
Kind regards, 
Vera

Hello, Michel,
 
How have you been? 
 
Our team would like to kindly take an interest in whether you found our previous response helpful. 
Did it work to get the checkboxes working in Vue?
 
Looking forward to your feedback.
 
Kind regards, 
Vera