Dear visitor, despite all the challenges, our team continues operating at full speed.

We are ready to help with any questions you may have. Please fill out this quick form and we'll get back to you.

Fill the form
Get Free Trial

Can you please give an idea how to create conditional data bar in Table

Answered
Naidu asked on June 15, 2020

Can you please give an idea how to create conditional data bar in Table.
I want the data bar in table as shown image below
https://ibb.co/F6M1ZJk

5 answers

Public
Vera Didenko Flexmonster June 16, 2020

Hello, Naidu,
 
Thank you for reaching out to us. 
 
The desired output can be achieved using Flexmonster’s customizeCell hook.
We have prepared a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/nxpmrtsh/
In the example, the customizeCell hook is used to color the subtotal cells and to add a bar to the corresponding cells depending on the cell’s value.
 
Please let us know if this would work for you.
Looking forward to your reply.
 
Kind regards, 
Vera

Public
Naidu June 16, 2020

Hai, Vera Didenko,
 
Thank you so much for the reply. We are happy with the answer.
I have one more doubt on this, Tool tip on the cell is not working. Can you please suggest me how to implement the tool tip (when we are hover on the cell related data should be visible on the tool tip)

Public
Vera Didenko Flexmonster June 16, 2020

Hello, 
 
Thank you for your reply. 
 
We are glad to hear that the conditional data bar example works well for you. 
 
As for tooltips, this can also be achieved via the customizeCell hook and custom CSS. 
Here is a modified version of the example, where tooltips have been added: https://jsfiddle.net/flexmonster/2af9whz3/
 
Please let us know if this works for you. 
Looking forward to your reply.
 
Kind regards, 
Vera

Public
Naidu June 18, 2020

Hai, Vera Didenko,
 
Thank you so much. Everything working fine now.
I have one more query. In angular when i am using the data.expnaded  it throwing a issue like expanded property does not exist in cellData. please help me.
 
 

Public
Vera Didenko Flexmonster June 18, 2020

Hello, Naidu, 
 
Thank you for your answer. 
 
We are glad to hear that you found the example helpful. 
 
Regarding the problem with the expanded property, please see our reply in the following thread: https://www.flexmonster.com/question/angular-7-data-expanded-property-not-working/
 
Please let us know if further questions arise. 
 
Kind regards, 
Vera

Please login or Register to Submit Answer