14
Views
8
Comments
Solved
Dynamically compare the values of two Number columns to apply a specific CSS style
Service Studio Version
11.54.69 (Build 63461)

In my screen, there is a data grid with four columns: Material No., Current Inventory, SafetyStock, and UOM. Now I want to apply the CSS style "red_center" to the cells in which the Current Inventory is less than SafetyStock. How can I achieve this? 

Thank you for your help .


2024-08-16_18-01-18.png
2024-08-02 10-18-01
Hakeem
Solution

Hi Cesar Ge,


You can do that on Grid's Initialize event and using javascript code. 

1) On grids initialize event, add a new client action.

2) Then grab the JS node to that action.


Here is the javascript code:


Do not forget add the css class into your page.

.red-center {    

color: red;   

text-align: center !important;

}


See also the attached OML file.


Hope it helps.


Best.

DataGridCondFormat.oml
UserImage.jpg
Cesar Ge

Thank you very much for your detailed answer, it's extremely helpful for a beginner like me. I want to express my gratitude once again for your answer. 

UserImage.jpg
Cesar Ge

Hi Hakeem ,I have implemented the above code, but the result is not as I expected. The background color didn't change when Inventory is less than safetystock. 

2024-08-19_09-42-42.png
UserImage.jpg
Cesar Ge

Hi Hakeem ,I have implemented the above code, but the result is not as I expected. The background color didn't change when Inventory is less than safetystock. 

2024-08-02 10-18-01
Hakeem

Hi Cesar Ge,

Can you please let me know how did you get the orange color.  Did you update the css code I provided?

.red-center{    

color: white;    

background-color: red !important;    

text-align: center !important;

}

I see your in your code you are getting the "TotalQuantity" column instead of the "CurrentInventory". Is it that same? 


can you share you OML file.


Best.

UserImage.jpg
Cesar Ge



Hi Hakeem , my css code is as follows 

.red_background{    background-color: coral;}        

TotalQuantity and CurrentInventory are the same .

2024-03-22 09-17-23
Chandra Vikas Sharma

Hi ,

You can use the OnCellClick block event and the FilterByCondition client action to achieve this behavior. 

let me know if still having issue or share the OML.

thanks

CV

UserImage.jpg
Cesar Ge

Thanks for your response, but my idea is to make the judgement and apply the corresponding CSS while the data is loading, just like writing an IF condition when using a Table, the corresponding style will be applied if the condition is met. 

Thank you once again for your response. 

2024-08-02 10-18-01
Hakeem
Solution

Hi Cesar Ge,


You can do that on Grid's Initialize event and using javascript code. 

1) On grids initialize event, add a new client action.

2) Then grab the JS node to that action.


Here is the javascript code:


Do not forget add the css class into your page.

.red-center {    

color: red;   

text-align: center !important;

}


See also the attached OML file.


Hope it helps.


Best.

DataGridCondFormat.oml
UserImage.jpg
Cesar Ge

Thank you very much for your detailed answer, it's extremely helpful for a beginner like me. I want to express my gratitude once again for your answer. 

UserImage.jpg
Cesar Ge

Hi Hakeem ,I have implemented the above code, but the result is not as I expected. The background color didn't change when Inventory is less than safetystock. 

2024-08-19_09-42-42.png
UserImage.jpg
Cesar Ge

Hi Hakeem ,I have implemented the above code, but the result is not as I expected. The background color didn't change when Inventory is less than safetystock. 

2024-08-02 10-18-01
Hakeem

Hi Cesar Ge,

Can you please let me know how did you get the orange color.  Did you update the css code I provided?

.red-center{    

color: white;    

background-color: red !important;    

text-align: center !important;

}

I see your in your code you are getting the "TotalQuantity" column instead of the "CurrentInventory". Is it that same? 


can you share you OML file.


Best.

UserImage.jpg
Cesar Ge



Hi Hakeem , my css code is as follows 

.red_background{    background-color: coral;}        

TotalQuantity and CurrentInventory are the same .

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.