15
Dynamical displaying of cells on the grid layout
source link: https://blogs.sap.com/2022/06/30/dynamical-displaying-of-cells-on-the-grid-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
In this blog I want to show how to make cells on the grid that may contain chart or text appearing/disappearing by clicking on the checkboxgroup. The feature of this solution is that depending on the number of selected items on the checkboxgrup, the relevant cells are displayed and aligned with the center of the page.
Overview
The blog post covers the following steps:
- Create the checkboxgroup.
- Create grid_layout_1 with 1 row and 11 columns.
- Create grid_layout_9 with 1 row and 10 columns
- At the “on select” event of the checkboxgroup write the JS code
Create the checkboxgroup.
Put the checkboxgroup and fill it with values and text.
Create grid_layout_1 with 1 row and 11 columns.
Starting from the second cell (0,1) put the panels with texts of fruits. Cells (0,0) and (0,10) leave empty.
Create grid_layout_9 with 1 row and 10 columns.
In grid_layout_9 starting from the second cell(0,1) create the empty panels. Cells (0,0) and (0,9) leave empty.
Make the grid_layout_9 invisible:
Two grid_layouts we need for 2 cases: if there are odd number of selected items on the checkboxgroup, then the grid_layout_1 is visible, the grid_layout_9 is invisible. In case of even number, then the grid_layout_9 is visible, the grid_layout_1 is invisible. This solution help us to lay out the panels with text at the center of the page.
| Number | ODD | ||||||||
| 1 | PANEL_8 | ||||||||
| 3 | PANEL_7 | PANEL_8 | PANEL_9 | ||||||
| 5 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | ||||
| 7 | PANEL_4 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | PANEL_11 | ||
| 9 | PANEL_6 | PANEL_4 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | PANEL_11 | PANEL_12 |
| Number | EVEN | ||||||||
| 2 | PANEL_7_1 | PANEL_8_1 | |||||||
| 4 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | |||||
| 6 | PANEL_4_1 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | PANEL_10_1 | |||
| 8 | PANEL_6_1 | PANEL_4_1 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | PANEL_10_1 | PANEL_11_1 |
Put the JS code at the “On Select” event of the checkboxgroup.
First of all make all created panels and texts invisible.
So, if a user selects odd number of items on the checkboxgroup, then grid_layout_1 is set to visible.
When checkboxgroup item is selected, the value of the item is written to the array arr. After the selection, the event is triggered, the array arr is read from the index 0.
In the table below, you can see the relevance of the array index and the cells with panels on the grid.
| GRIDLAYOUT_1 | Odd | PANEL_6 | PANEL_4 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | PANEL_11 | PANEL_12 |
| Array index | 7 | 5 | 3 | 1 | 0 | 2 | 4 | 6 | 8 | |
| GRIDLAYOUT_9 | Even | PANEL_6_1 | PANEL_4_1 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | PANEL_10_1 | PANEL_11_1 | |
| Array index | 7 | 4 | 2 | 0 | 1 | 3 | 5 | 6 |
Depending on the index (0) the relevant (panel_8) is set to visible, depending which element was written at index 0 the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_8.
For the index (1) the relevant (panel_7) is set to visible, depending which element was written at 1 index the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_7.
Else, if a user selects even number of items on the checkbox, then grid_layout_9 is set to visible.
Depending on the index (0) the relevant (panel_7_1) is set to visible, depending which element was written at index 0 the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_7_1.
For the index (1) the relevant (panel_8_1) is set to visible, depending which element was written at index 1 the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_8_1.
Below in Appendix we can find full JS and CSS code.
Conclusion
Finaly, you can see how to create complex visualizations of dynamicaly appearing/disapearing cell panels by clicking on the checkboxgroup. By using this solution you can create attractive and modern applications. Hope it will be useful for you.
Please, share your opinion in comments and subscribe and follow my account to get similar content.
Find more information about SAP Lumira solutions in blog posts: SAP Lumira | SAP Blogs
Search for questions and answers : SAP Lumira | Questions and answers
Explore another posts about SAP Lumira: SAP Lumira | Other messages
Appendix
PANEL_6.setVisible(false);
PANEL_4.setVisible(false);
PANEL_5.setVisible(false);
PANEL_7.setVisible(false);
PANEL_8.setVisible(false);
PANEL_9.setVisible(false);
PANEL_10.setVisible(false);
PANEL_11.setVisible(false);
PANEL_12.setVisible(false);
PANEL_6_1.setVisible(false);
PANEL_4_1.setVisible(false);
PANEL_5_1.setVisible(false);
PANEL_7_1.setVisible(false);
PANEL_8_1.setVisible(false);
PANEL_9_1.setVisible(false);
PANEL_10_1.setVisible(false);
PANEL_11_1.setVisible(false);
TEXT_6.setVisible(false);
TEXT_7.setVisible(false);
TEXT_8.setVisible(false);
TEXT_9.setVisible(false);
TEXT_11.setVisible(false);
TEXT_14.setVisible(false);
TEXT_15.setVisible(false);
TEXT_16.setVisible(false);
TEXT_17.setVisible(false);
arr =this.getSelectedValues();
var arrlen=arr.length;// read the array lenth
arr.forEach(function(element, index) { //Array begin
if (arrlen ==1 || arrlen ==3 || arrlen ==5 || arrlen ==7 || arrlen ==9 ){// if the array lenth is odd
GRID_LAYOUT_1.setVisible(true);
GRID_LAYOUT_9.setVisible(false);
if (index == 0){// 0 array value
if ( element =="1"){
PANEL_8.moveComponent(TEXT_6);
PANEL_8.setVisible(true);
TEXT_6.setVisible(true);
PANEL_8.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_8.moveComponent(TEXT_7);
PANEL_8.setVisible(true);
TEXT_7.setVisible(true);
PANEL_8.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_8.moveComponent(TEXT_8);
PANEL_8.setVisible(true);
TEXT_8.setVisible(true);
PANEL_8.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_8.moveComponent(TEXT_9);
PANEL_8.setVisible(true);
TEXT_9.setVisible(true);
PANEL_8.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_8.moveComponent(TEXT_11);
PANEL_8.setVisible(true);
TEXT_11.setVisible(true);
PANEL_8.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_8.moveComponent(TEXT_14);
PANEL_8.setVisible(true);
TEXT_14.setVisible(true);
PANEL_8.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_8.moveComponent(TEXT_15);
PANEL_8.setVisible(true);
TEXT_15.setVisible(true);
PANEL_8.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_8.moveComponent(TEXT_16);
PANEL_8.setVisible(true);
TEXT_16.setVisible(true);
PANEL_8.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_8.moveComponent(TEXT_17);
PANEL_8.setVisible(true);
TEXT_17.setVisible(true);
PANEL_8.setCSSClass("CHART_9");
}
} //0 the end of array
else if (index == 1){// 1 array value
if ( element =="1"){
PANEL_7.moveComponent(TEXT_6);
PANEL_7.setVisible(true);
TEXT_6.setVisible(true);
PANEL_7.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_7.moveComponent(TEXT_7);
PANEL_7.setVisible(true);
TEXT_7.setVisible(true);
PANEL_7.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_7.moveComponent(TEXT_8);
PANEL_7.setVisible(true);
TEXT_8.setVisible(true);
PANEL_7.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_7.moveComponent(TEXT_9);
PANEL_7.setVisible(true);
TEXT_9.setVisible(true);
PANEL_7.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_7.moveComponent(TEXT_11);
PANEL_7.setVisible(true);
TEXT_11.setVisible(true);
PANEL_7.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_7.moveComponent(TEXT_14);
PANEL_7.setVisible(true);
TEXT_14.setVisible(true);
PANEL_7.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_7.moveComponent(TEXT_15);
PANEL_7.setVisible(true);
TEXT_15.setVisible(true);
PANEL_7.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_7.moveComponent(TEXT_16);
PANEL_7.setVisible(true);
TEXT_16.setVisible(true);
PANEL_7.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_7.moveComponent(TEXT_17);
PANEL_7.setVisible(true);
TEXT_17.setVisible(true);
PANEL_7.setCSSClass("CHART_9");
}
} //1 end of the array
else if (index == 2){// 2 array value
if ( element =="1"){
PANEL_9.moveComponent(TEXT_6);
PANEL_9.setVisible(true);
TEXT_6.setVisible(true);
PANEL_9.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_9.moveComponent(TEXT_7);
PANEL_9.setVisible(true);
TEXT_7.setVisible(true);
PANEL_9.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_9.moveComponent(TEXT_8);
PANEL_9.setVisible(true);
TEXT_8.setVisible(true);
PANEL_9.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_9.moveComponent(TEXT_9);
PANEL_9.setVisible(true);
TEXT_9.setVisible(true);
PANEL_9.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_9.moveComponent(TEXT_11);
PANEL_9.setVisible(true);
TEXT_11.setVisible(true);
PANEL_9.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_9.moveComponent(TEXT_14);
PANEL_9.setVisible(true);
TEXT_14.setVisible(true);
PANEL_9.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_9.moveComponent(TEXT_15);
PANEL_9.setVisible(true);
TEXT_15.setVisible(true);
PANEL_9.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_9.moveComponent(TEXT_16);
PANEL_9.setVisible(true);
TEXT_16.setVisible(true);
PANEL_9.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_9.moveComponent(TEXT_17);
PANEL_9.setVisible(true);
TEXT_17.setVisible(true);
PANEL_9.setCSSClass("CHART_9");
}
} //2 end of the array
else if (index == 3){// 3 array value
if ( element =="1"){
PANEL_5.moveComponent(TEXT_6);
PANEL_5.setVisible(true);
TEXT_6.setVisible(true);
PANEL_5.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_5.moveComponent(TEXT_7);
PANEL_5.setVisible(true);
TEXT_7.setVisible(true);
PANEL_5.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_5.moveComponent(TEXT_8);
PANEL_5.setVisible(true);
TEXT_8.setVisible(true);
PANEL_5.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_5.moveComponent(TEXT_9);
PANEL_5.setVisible(true);
TEXT_9.setVisible(true);
PANEL_5.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_5.moveComponent(TEXT_11);
PANEL_5.setVisible(true);
TEXT_11.setVisible(true);
PANEL_5.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_5.moveComponent(TEXT_14);
PANEL_5.setVisible(true);
TEXT_14.setVisible(true);
PANEL_5.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_5.moveComponent(TEXT_15);
PANEL_5.setVisible(true);
TEXT_15.setVisible(true);
PANEL_5.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_5.moveComponent(TEXT_16);
PANEL_5.setVisible(true);
TEXT_16.setVisible(true);
PANEL_5.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_5.moveComponent(TEXT_17);
PANEL_5.setVisible(true);
TEXT_17.setVisible(true);
PANEL_5.setCSSClass("CHART_9");
}
} //3 end of the array
else if (index == 4){// 4 array value
if ( element =="1"){
PANEL_10.moveComponent(TEXT_6);
PANEL_10.setVisible(true);
TEXT_6.setVisible(true);
PANEL_10.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_10.moveComponent(TEXT_7);
PANEL_10.setVisible(true);
TEXT_7.setVisible(true);
PANEL_10.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_10.moveComponent(TEXT_8);
PANEL_10.setVisible(true);
TEXT_8.setVisible(true);
PANEL_10.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_10.moveComponent(TEXT_9);
PANEL_10.setVisible(true);
TEXT_9.setVisible(true);
PANEL_10.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_10.moveComponent(TEXT_11);
PANEL_10.setVisible(true);
TEXT_11.setVisible(true);
PANEL_10.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_10.moveComponent(TEXT_14);
PANEL_10.setVisible(true);
TEXT_14.setVisible(true);
PANEL_10.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_10.moveComponent(TEXT_15);
PANEL_10.setVisible(true);
TEXT_15.setVisible(true);
PANEL_10.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_10.moveComponent(TEXT_16);
PANEL_10.setVisible(true);
TEXT_16.setVisible(true);
PANEL_10.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_10.moveComponent(TEXT_17);
PANEL_10.setVisible(true);
TEXT_17.setVisible(true);
PANEL_10.setCSSClass("CHART_9");
}
} //4 end of the array
else if (index == 5){// 5 array value
if ( element =="1"){
PANEL_4.moveComponent(TEXT_6);
PANEL_4.setVisible(true);
TEXT_6.setVisible(true);
PANEL_4.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_4.moveComponent(TEXT_7);
PANEL_4.setVisible(true);
TEXT_7.setVisible(true);
PANEL_4.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_4.moveComponent(TEXT_8);
PANEL_4.setVisible(true);
TEXT_8.setVisible(true);
PANEL_4.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_4.moveComponent(TEXT_9);
PANEL_4.setVisible(true);
TEXT_9.setVisible(true);
PANEL_4.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_4.moveComponent(TEXT_11);
PANEL_4.setVisible(true);
TEXT_11.setVisible(true);
PANEL_4.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_4.moveComponent(TEXT_14);
PANEL_4.setVisible(true);
TEXT_14.setVisible(true);
PANEL_4.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_4.moveComponent(TEXT_15);
PANEL_4.setVisible(true);
TEXT_15.setVisible(true);
PANEL_4.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_4.moveComponent(TEXT_16);
PANEL_4.setVisible(true);
TEXT_16.setVisible(true);
PANEL_4.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_4.moveComponent(TEXT_17);
PANEL_4.setVisible(true);
TEXT_17.setVisible(true);
PANEL_4.setCSSClass("CHART_9");
}
} //5 end of the array
else if (index == 6){// 6 array value
if ( element =="1"){
PANEL_11.moveComponent(TEXT_6);
PANEL_11.setVisible(true);
TEXT_6.setVisible(true);
PANEL_11.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_11.moveComponent(TEXT_7);
PANEL_11.setVisible(true);
TEXT_7.setVisible(true);
PANEL_11.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_11.moveComponent(TEXT_8);
PANEL_11.setVisible(true);
TEXT_8.setVisible(true);
PANEL_11.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_11.moveComponent(TEXT_9);
PANEL_11.setVisible(true);
TEXT_9.setVisible(true);
PANEL_11.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_11.moveComponent(TEXT_11);
PANEL_11.setVisible(true);
TEXT_11.setVisible(true);
PANEL_11.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_11.moveComponent(TEXT_14);
PANEL_11.setVisible(true);
TEXT_14.setVisible(true);
PANEL_11.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_11.moveComponent(TEXT_15);
PANEL_11.setVisible(true);
PANEL_11.setCSSClass("CHART_7");
TEXT_15.setVisible(true);
}
else if (element=="8")
{ PANEL_11.moveComponent(TEXT_16);
PANEL_11.setVisible(true);
TEXT_16.setVisible(true);
PANEL_11.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_11.moveComponent(TEXT_17);
PANEL_11.setVisible(true);
TEXT_17.setVisible(true);
PANEL_11.setCSSClass("CHART_9");
}
} //6 end of the array
else if (index == 7){// 7 array value
if ( element =="1"){
PANEL_6.moveComponent(TEXT_6);
PANEL_6.setVisible(true);
TEXT_6.setVisible(true);
PANEL_6.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_6.moveComponent(TEXT_7);
PANEL_6.setVisible(true);
TEXT_7.setVisible(true);
PANEL_6.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_6.moveComponent(TEXT_8);
PANEL_6.setVisible(true);
TEXT_8.setVisible(true);
PANEL_6.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_6.moveComponent(TEXT_9);
PANEL_6.setVisible(true);
TEXT_9.setVisible(true);
PANEL_6.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_6.moveComponent(TEXT_11);
PANEL_6.setVisible(true);
TEXT_11.setVisible(true);
PANEL_6.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_6.moveComponent(TEXT_14);
PANEL_6.setVisible(true);
TEXT_14.setVisible(true);
PANEL_6.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_6.moveComponent(TEXT_15);
PANEL_6.setVisible(true);
TEXT_15.setVisible(true);
PANEL_6.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_6.moveComponent(TEXT_16);
PANEL_6.setVisible(true);
TEXT_16.setVisible(true);
PANEL_6.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_6.moveComponent(TEXT_17);
PANEL_6.setVisible(true);
TEXT_17.setVisible(true);
PANEL_6.setCSSClass("CHART_9");
}
} //7 end of the array
else if (index == 8){// 8 array value
if ( element =="1"){
PANEL_12.moveComponent(TEXT_6);
PANEL_12.setVisible(true);
TEXT_6.setVisible(true);
PANEL_12.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_12.moveComponent(TEXT_7);
PANEL_12.setVisible(true);
TEXT_7.setVisible(true);
PANEL_12.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_12.moveComponent(TEXT_8);
PANEL_12.setVisible(true);
TEXT_8.setVisible(true);
PANEL_12.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_12.moveComponent(TEXT_9);
PANEL_12.setVisible(true);
TEXT_9.setVisible(true);
PANEL_12.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_12.moveComponent(TEXT_11);
PANEL_12.setVisible(true);
TEXT_11.setVisible(true);
PANEL_12.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_12.moveComponent(TEXT_14);
PANEL_12.setVisible(true);
TEXT_14.setVisible(true);
PANEL_12.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_12.moveComponent(TEXT_15);
PANEL_12.setVisible(true);
TEXT_15.setVisible(true);
PANEL_12.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_12.moveComponent(TEXT_16);
PANEL_12.setVisible(true);
TEXT_16.setVisible(true);
PANEL_12.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_12.moveComponent(TEXT_17);
PANEL_12.setVisible(true);
TEXT_17.setVisible(true);
PANEL_12.setCSSClass("CHART_9");
}
} //8 end of the array
}// end of the array with odd
else if (arrlen ==2 || arrlen ==4 || arrlen ==6 || arrlen ==8){// if the array lenth is even
GRID_LAYOUT_9.setVisible(true);
GRID_LAYOUT_1.setVisible(false);
if (index == 0){// 0 array value
if ( element =="1"){
PANEL_7_1.moveComponent(TEXT_6);
PANEL_7_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_7_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_7_1.moveComponent(TEXT_7);
PANEL_7_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_7_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_7_1.moveComponent(TEXT_8);
PANEL_7_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_7_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_7_1.moveComponent(TEXT_9);
PANEL_7_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_7_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_7_1.moveComponent(TEXT_11);
PANEL_7_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_7_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_7_1.moveComponent(TEXT_14);
PANEL_7_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_7_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_7_1.moveComponent(TEXT_15);
PANEL_7_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_7_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_7_1.moveComponent(TEXT_16);
PANEL_7_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_7_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_7_1.moveComponent(TEXT_17);
PANEL_7_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_7_1.setCSSClass("CHART_9");
}
} //0 end of the array
else if (index == 1){// 1 array value
if ( element =="1"){
PANEL_8_1.moveComponent(TEXT_6);
PANEL_8_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_8_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_8_1.moveComponent(TEXT_7);
PANEL_8_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_8_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_8_1.moveComponent(TEXT_8);
PANEL_8_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_8_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_8_1.moveComponent(TEXT_9);
PANEL_8_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_8_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_8_1.moveComponent(TEXT_11);
PANEL_8_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_8_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_8_1.moveComponent(TEXT_14);
PANEL_8_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_8_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_8_1.moveComponent(TEXT_15);
PANEL_8_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_8_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_8_1.moveComponent(TEXT_16);
PANEL_8_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_8_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_8_1.moveComponent(TEXT_17);
PANEL_8_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_8_1.setCSSClass("CHART_9");
}
} //1 end of the array
else if (index == 2){// 2 array value
if ( element =="1"){
PANEL_5_1.moveComponent(TEXT_6);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_1");
TEXT_6.setVisible(true);
}
else if (element=="2")
{ PANEL_5_1.moveComponent(TEXT_7);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_2");
TEXT_7.setVisible(true);
}
else if (element=="3")
{ PANEL_5_1.moveComponent(TEXT_8);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_3");
TEXT_8.setVisible(true);
}
else if (element=="4")
{ PANEL_5_1.moveComponent(TEXT_9);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_4");
TEXT_9.setVisible(true);
}
else if (element=="5")
{ PANEL_5_1.moveComponent(TEXT_11);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_5");
TEXT_11.setVisible(true);
}
else if (element=="6")
{ PANEL_5_1.moveComponent(TEXT_14);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_6");
TEXT_14.setVisible(true);
}
else if (element=="7")
{ PANEL_5_1.moveComponent(TEXT_15);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_7");
TEXT_15.setVisible(true);
}
else if (element=="8")
{ PANEL_5_1.moveComponent(TEXT_16);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_8");
TEXT_16.setVisible(true);
}
else if (element=="9")
{ PANEL_5_1.moveComponent(TEXT_17);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_9");
TEXT_17.setVisible(true);
}
} //2 end of the array
else if (index == 3){// 3 array value
if ( element =="1"){
PANEL_9_1.moveComponent(TEXT_6);
PANEL_9_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_9_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_9_1.moveComponent(TEXT_7);
PANEL_9_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_9_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_9_1.moveComponent(TEXT_8);
PANEL_9_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_9_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_9_1.moveComponent(TEXT_9);
PANEL_9_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_9_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_9_1.moveComponent(TEXT_11);
PANEL_9_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_9_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_9_1.moveComponent(TEXT_14);
PANEL_9_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_9_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_9_1.moveComponent(TEXT_15);
PANEL_9_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_9_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_9_1.moveComponent(TEXT_16);
PANEL_9_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_9_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_9_1.moveComponent(TEXT_17);
PANEL_9_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_9_1.setCSSClass("CHART_9");
}
} //3 end of the array
else if (index == 4){// 4 array value
if ( element =="1"){
PANEL_4_1.moveComponent(TEXT_6);
PANEL_4_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_4_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_4_1.moveComponent(TEXT_7);
PANEL_4_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_4_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_4_1.moveComponent(TEXT_8);
PANEL_4_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_4_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_4_1.moveComponent(TEXT_9);
PANEL_4_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_4_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_4_1.moveComponent(TEXT_11);
PANEL_4_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_4_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_4_1.moveComponent(TEXT_14);
PANEL_4_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_4_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_4_1.moveComponent(TEXT_15);
PANEL_4_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_4_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_4_1.moveComponent(TEXT_16);
PANEL_4_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_4_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_4_1.moveComponent(TEXT_17);
PANEL_4_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_4_1.setCSSClass("CHART_9");
}
} //4 end of the array
else if (index == 5){// 5 array value
if ( element =="1"){
PANEL_10_1.moveComponent(TEXT_6);
PANEL_10_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_10_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_10_1.moveComponent(TEXT_7);
PANEL_10_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_10_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_10_1.moveComponent(TEXT_8);
PANEL_10_1.setVisible(true);
PANEL_10_1.setCSSClass("CHART_3");
TEXT_8.setVisible(true);
}
else if (element=="4")
{ PANEL_10_1.moveComponent(TEXT_9);
PANEL_10_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_10_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_10_1.moveComponent(TEXT_11);
PANEL_10_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_10_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_10_1.moveComponent(TEXT_14);
PANEL_10_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_10_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_10_1.moveComponent(TEXT_15);
PANEL_10_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_10_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_10_1.moveComponent(TEXT_16);
PANEL_10_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_10_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_10_1.moveComponent(TEXT_17);
PANEL_10_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_10_1.setCSSClass("CHART_9");
}
} //5 end of the array
else if (index == 6){// 6 array value
if ( element =="1"){
PANEL_11_1.moveComponent(TEXT_6);
PANEL_11_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_11_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_11_1.moveComponent(TEXT_7);
PANEL_11_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_11_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_11_1.moveComponent(TEXT_8);
PANEL_11_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_11_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_11_1.moveComponent(TEXT_9);
PANEL_11_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_11_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_11_1.moveComponent(TEXT_11);
PANEL_11_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_11_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_11_1.moveComponent(TEXT_14);
PANEL_11_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_11_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_11_1.moveComponent(TEXT_15);
PANEL_11_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_11_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_11_1.moveComponent(TEXT_16);
PANEL_11_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_11_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_11_1.moveComponent(TEXT_17);
PANEL_11_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_11_1.setCSSClass("CHART_9");
}
} //6 end of the array
else if (index == 7){// 7 array value
if ( element =="1"){
PANEL_6_1.moveComponent(TEXT_6);
PANEL_6_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_6_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_6_1.moveComponent(TEXT_7);
PANEL_6_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_6_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_6_1.moveComponent(TEXT_8);
PANEL_6_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_6_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_6_1.moveComponent(TEXT_9);
PANEL_6_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_6_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_6_1.moveComponent(TEXT_11);
PANEL_6_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_6_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_6_1.moveComponent(TEXT_14);
PANEL_6_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_6_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_6_1.moveComponent(TEXT_15);
PANEL_6_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_6_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_6_1.moveComponent(TEXT_16);
PANEL_6_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_6_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_6_1.moveComponent(TEXT_17);
PANEL_6_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_6_1.setCSSClass("CHART_9");
}
} //7 end of the array
}// the end of array with even
});//end of the arrayCSS code is below:
.CHART_1 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #CC9F03;
text-align: center !important;
}
.CHART_2 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #00877D;
text-align: center !important;
}
.CHART_3 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #FFAD72;
text-align: center !important;
}
.CHART_4 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #7C98B3;
text-align: center !important;
}
.CHART_5 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #800000;
text-align: center !important;
}
.CHART_6 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #004080;
text-align: center !important;
}
.CHART_7 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #800080;
text-align: center !important;
}
.CHART_8 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #ffff00;
text-align: center !important;
}
.CHART_9 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #8000ff;
text-align: center !important;
}
Recommend
-
54
Layoutit: A CSS Grid Layout Interface Builder — A...
-
54
CSS3新增布局三剑客之Grid Layout 一、前言 相比较Multi-Columns Layout 和Flexible Box Layout，Grid Layuot更像是两者的结合，当然这里并不是说Grid Layout可以取代二者。 另外Gr
-
80
README.md Fibre Fibre is a WebGL application for visualizing and coding 3d vector fields and...
-
44
CSS Grid is fast (no framework needs to be loaded), powerful (it can be used for almost any layout), responsive (it has eg minmax , fr , repeat(auto-fit) ),...
-
11
At this point in our series, we have the entire C# model of our Tetris game ready. What we're going to do now is create a set of Blazor components to actually display the game grid and a falling tetromino.At the end of this post, we wi...
-
10
Why HTML table cells won’t fit into your CSS baseline grid A baseline grid design is a fancy way of describing a page design laid out like on lined paper sheets. (The lines are not visible, of co...
-
17
OverviewYou can add React JSX components to Scheduler grid cells.You an also use raw HTML and active areas to display custom content in the grid cells.Requires DayPilot Pro for JavaScript 2022....
-
9
Counting with martingales In this post I will provide a gentle introduction to the theory of martingales (also called “fair games”) by wa...
-
8
40,000 coin tosses yield ambiguous evidence for dynamical bias40,000 coin tosses yield ambiguous evidence for dynamical bias Background The 2007 Diaconis - Holmes - Montgomery paper
-
6
Algorithm is able to learn and preserve the conservation laws of dynamical systems by
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK