Forum | Appery.io

I am trying to create a 9 box grid where the color of each grid is different based on its value.

I have the grid using checkboxes using Appery. Now I need to apply background color to each checkbox. I have tried all kinds of code, but none seem to work. I am putting the code in the page Load event. The checkboxes are inside a sliding panel that shows up when the user clicks on a button.

The numbers are all of the same black color

Hi,

Please try running code on Page Show event.

Here is the code I am trying to run. for now just trying to change the color of the box of each radio button. None work.

Appery('rdogrp').find("input").each(function() {
// $(this).addClass('riskRed'); // not work
// $(this).css({backgroundColor: '#E7F009'}); // not work
$(this).next('label').children('span').css('background-color', 'red'); //not work
$(this).checkboxradio("refresh");
});

Hi ,

Could you provide us with more details? (screenshots where do you have grid, and where do you have a checkboxes, and what are you going to colorize)

Here is a snapshot. Basically it is a radio button group with 9 items. I have been able to use the margins to make it look like a grid. The users can choose any one of the values and the group will return that.

I would like to change the color of each box according to the value that they have as shown in the mockup in the first post.

I am trying to see if I can change the background-color for each radio group item according to their value. So if value = 5 or 6, bgcolor is red, yellow for 3, 4 and blue if 2.

I used the element inspector and saw this CSS that is associated with the div for the radio button. I added the last item below (background-color: red) and it changed the item to red. Exactly how I would like it. Now how can I add that to the element.style item thru appery interface. I am surprised that by adding an extra "more property" it would not work.

element.style {
pointer-events: none;
position: fixed;
display: block;
z-index: 11;
height: 44px;
width: 42px;
top: 49px;
left: 117px;
background-color: red;
}

Please try this code:

pre
code
//Get radioGroup component. You should use your component right name instead of "mobileradiogroup_15"
var radioGroup = Appery("mobileradiogroup_15");

//Get radioButtons components.
var radioButtons = radioGroup.find(".ui-btn");

for(var i = 0; i < radioButtons&#46;length; i++){
&#47;&#47;Change background color for each button&#46;
jQuery(radioButtons)&#46;css({background: "#ff0"});
};

/code/pre

It works. However, the radio group lost its selected ability. No button is "selected" when clicked on. or Maybe it keeps on changing it to the same color #ff0

Here is the code in Page Show event:

var radioGroup = Appery("rdogrp_riskFactor");
//Get radioButtons components.
var radioButtons = radioGroup.find(".ui-btn");

for(var i = 0; i < radioButtons.length; i++){
//Change background color for each button.
switch (i) {
case 0:
case 4:
case 8:
jQuery(radioButtons).css({background: "#E7F009"}); // Yellow
break;
case 1:
case 2:
case 5:
jQuery(radioButtons).css({background: "#F00909"}); // Red
break;

     case 3: 
     case 7: 
     case 6: 
jQuery(radioButtons[i]).css({background: "#0066CC"}); // Blue 
         break; 

         default: 
         break; 

 } 

}

It achieves the purpose, but the radio button is loosing its capability to change the color of the selected item. So user will not be getting any feedback what they selected.