Dear visitor, despite the COVID-19 outbreak, our team continues operating at full speed.

Also, here is the form where you can apply for a special discount and we will contact you with possible options. Stay safe and continue achieving your business goals.

Fill the form
Get Free Trial
Get Free Trial

How to add checkbox as a column

Answered
shilpi asked on February 20, 2020

Hi Team,
 
Please help how to add select all checkbox option in flexmonster grid.I want to have 1 more column which will show checkbox.
 
Thanks in Advance.

8 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster February 20, 2020

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

Public
shilpi February 20, 2020

Hi Illia,
 
I am looking something like this
 
http://prntscr.com/r5652f

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster February 21, 2020

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:

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

Public
shilpi March 12, 2020

Thanks Illia,
 
Tried the example given above, getting error as function onCheck is undefined.
I am using flexmonster with angular.
 
Tried outside/inside defination of the method
 

customizeCellFunction(cell, data): any {
    var selectedRows = {};

    if (data.type === “value” && !data.isDrillThrough && cell.text.includes(‘&lt;’)) {
          cell.style[‘z-index’] = 2;
          cell.text = data.member.caption;
    }
    
    if (data.hierarchy.uniqueName == “Checkbox”) {
        cell.text = `<input type=”checkbox” value=”1″ onchange=”onCheck($event)”  ‘checked’ >`;
        cell.style[‘z-index’] = 2;
    }
    function onCheck(event) {
      //not coming here
    selectedRows[event.target.value] = event.target.checked;
}
 
  }
onCheck(e){
//not coming here as well
}

Public
shilpi March 13, 2020

Please provide update on this.

Public
shilpi March 13, 2020

How to implement select all checkbox functionality?
 
 

Attachments:
selectall.png

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 13, 2020

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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 13, 2020

Example:

Please login or Register to Submit Answer