Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

how to set the background color for specific members?

yuyuyu asked on July 12, 2017

Hi are there any methods to set the background color for specific members or hierarchies? i have gone through the section of customizecell but i don’t want to jump into other page, i just want to change the color of cell.

13 answers

Public
Tanya Gryshko Flexmonster July 12, 2017

Hello Leon,
Thank you for writing. Currently, you can set custom CSS styles for headers, totals and subtotals. We are releasing the next major version of our component in a month. Among other improvements, we will upgrade customizeCell function so it would allow setting the background color for specific members or hierarchies. Please contact me if you have more questions.
Regards,
Tanya

Public
yuyuyu July 13, 2017

That is it. waitting for the next version. thanks a lot

Public
sabby September 7, 2017

is this feature already available?

Public
Tanya Gryshko Flexmonster September 8, 2017

Hello Sabby,
Thank you for your question. Yes, this feature is available. Please check documentation about customizeCell, especially example number 4. This example demonstrates highlighting cells based on their semantics. Please let me know if you have questions.
Regards,
Tanya

Public
MayurSinh June 29, 2020

hello tanya
 

Public
MayurSinh June 29, 2020

i need to customizeCell in react-native app can you help me

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster June 30, 2020

Hello,
 
Thank you for your question.
 
Our team would like to kindly explain that some features provided by Flexmonster are not available in React Native while using our module due to some specifics limitations it imposes on the execution of JavaScript.
It includes using the customizeCell API call.
 
Even so, it is possible to modify the module itself in the way the desired configuration is adjusted.
For example, the possibility to use the customizeCell API call can be achieved using the following approach:
Download the module mentioned earlier and modify the following code snippet in the way the customizeCell is called right after the component is created.
For example:

<script>
  let pivot = new Flexmonster({
    container: "#pivot-container",
    componentFolder: "<https://cdn.flexmonster.com/>",
    toolbar: true,
    licenseKey: '${this.props.licenseKey === undefined ? "" : this.props.licenseKey}',
    report: JSON.parse('${JSON.stringify(this.props.report)}')
  });
  pivot.customizeCell((cell, data) => {
    ...
  });
  ${this.registerEvents()}
</script>

 
Please note that in case such methods are required, the module should be downloaded and connected manually instead of installation through npm.
 
We hope it works for you.
Please contact us in case further questions occur.
 
Kind regards,
Illia

Public
MayurSinh June 30, 2020

<script type=”text/javascript”>
var pivot = new Flexmonster({
container: “#pivot-container”,
componentFolder: “https://cdn.flexmonster.com/”,
toolbar: false,
height: ${this.props.height ? this.props.height : height},
width: ${this.props.width ? this.props.width : width},
licenseKey: ‘${ this.props.licenseKey === undefined ? “” : this.props.licenseKey }’,
report: JSON.parse(‘${JSON.stringify(this.props.report)}’),
});
pivot.customizeCell(${this.props.customizeCell});
${this.registerEvents()}
function createFusionChart () {
pivot.fusioncharts.getData({
type:”${chartType}”
},function(data){
var response = {
type: “event”,
name: “onFusionChartData”,
data: data,
};
window.ReactNativeWebView.postMessage(JSON.stringify(response));
})
}
function createHighChart () {
pivot.highcharts.getData(
{},
function(data) {
var response = {
type: “event”,
name: “onHighChartData”,
data: data,
};
window.ReactNativeWebView.postMessage(JSON.stringify(response));
}
);
}
</script>
above code snipest is my pivot snipest …

 
 
 

<FlexmonsterReactNative
ref={(ref) => {
this.flexmonster = ref;
}}
report={this.state.pivot_config[pivotTableIndex]}
licenseKey=”Z7TE-102510-6Z0345-61393B-585P5Q-3X053C-5F5P3O-1B2038-6T164M-6F1V6W-0K61″
width={height}
height={width}
chartType={this.state.chartType}
reportcomplete={this.onReportComplete}
onFusionChartData={this._onFusionChartData}
onHighChartData={this._onHighChartData}
// customizeCell={(cell,data)=>this.customizeCell(cell,data)}
/>

 
this is my flexmonster snipest how to i get cell and data please help me

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 2, 2020

Hello,
 
Thank you for writing to us.
 
Please see the complemented code snippet below:

<script type="text/javascript">
  var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "<https://cdn.flexmonster.com/>",
height: ${ this.props.height ? this.props.height : height }, width: ${ this.props.width ? this.props.width : width }, licenseKey: '${ this.props.licenseKey === undefined ? "" : this.props.licenseKey }', report: JSON.parse('${JSON.stringify(this.props.report)}'),
}); pivot.customizeCell((cell, data) => { //body of the function }); ... </script>

 
The following arrow function is passed as an argument of the customizeCell API call:

pivot.customizeCell((cell, data) => {
  //body of the function
});

 
Detailed information about parameters taken by such a function (cell, data) can be found in our documentation.
 
We have prepared an example demonstrating the described approach. It can be downloaded by the link.
It uses the following code snippet, which is responsible for coloring in green all cells which values are above 3000:

<style>
  .highlight {
    background: green !important;
    color: white !important;
  }
</style>

...

flexmonster.customizeCell((cell, data) => {
  if(data.type == "value" && data.value > 3000)
    cell.addClass("highlight");
});

 
The module itself is represented as a react-native-flexmosnter.js file placed in the example.
Please run the following set of commands in order to launch and test the example:

> npm install
> expo start

 
We hope it helps.
If additional questions occur while implementing the desired functionality, we want to ask you to provide us with detailed information about the exact problem you are facing.
 
Kind regards,
Illia

Public
MayurSinh July 25, 2020

hello can we pass javascript function in

pivot.customizeCell((cell,data)=>${this.custimiseCellFunction(cell,data)})

 
i’m not getting cell and data how i can implement my logic in html

Public
Vera Didenko Flexmonster July 28, 2020

Hello, 
 
Thank you for writing to us. 
 
Currently, the known solution is to modify the source code of the module and define the customizeCell function there.
 
Please let us know if this approach works for you.
Looking forward to your response.
 
Kind regards, 
Vera

Public
MayurSinh July 28, 2020

yes but how to i set my logic under this function.my logic in react-native

Public
Vera Didenko Flexmonster July 29, 2020

Hello, 
 
Thank you for your reply. 
 
 
The cell customization logic should be invoked inside the customizeCell Flexmonster hook. 
This means in the earlier provided example, your cell customization logic could be placed in the react-native-flexmonster.js file in the following place: 

....
<script>

new Flexmonster({

container: "#pivot-container",

componentFolder: "https://cdn.flexmonster.com/",

toolbar: true,

height: "100%",

width: "100%",

licenseKey: '${this.props.licenseKey === undefined ? "" : this.props.licenseKey}',

report: JSON.parse('${JSON.stringify(this.props.report)}')

});




flexmonster.customizeCell((cell, data) => {

//add your cell customization logic here

});


${this.registerEvents()}

</script>
...

 

In addition, our team has tried to make it possible so that the customizeCell Flexmonster hook could be used on React Native’s side outside the module’s source code. Although it did work to customize the grid cells from React Native’s side, please note that the implementation lacks performance. Nevertheless, we have attached a sample project with the described implementation and you can check it out by the following link
The Flexmonster React Native module is included as a file – react-native-flexmosnter.js and is placed in the example’s root folder.
Please run the following set of commands in order to launch and test the example:

> npm install
> expo start

As a result, the cells on the grid are colored based on their values and a heat map is created.
 
 
We hope this helps.
 
Kind regards, 
Vera

Please login or Register to Submit Answer