Change RadioButtonList style from JS

[Omar]

Hi,

I would like to be able to change the RadioButtonList border color depending on certain conditions from JS.

Here I am looping through all the Rad radio controls and on certain conditions I would like to change the border style for the RadioButtonList.

  var allRadControls = $telerik.radControls;
            var Found = false;       
            for (var i = 0; i < allRadControls.length; i++) {
                var element = allRadControls[i];
                //text Radio
                if (Telerik.Web.UI.RadRadioButtonList && Telerik.Web.UI.RadRadioButtonList.isInstanceOfType(element)) {
                    var items = element.get_items();
                    var x = element.get_element().parentElement;
                  
                  //  alert(pageview.findControl(element).get_id());

                    if (element.get_toolTip() == 'y' &&
                        x.id == pageview.get_id() &&
                        element.get_selectedIndex() <= 0) {
                        element.style.color = 'white';
                        
                        return 'y'
                    }
                    else {
                        Found= 'n'
                    }
                 
                }
            }
            return Found;

I appreciate the help.

Thanks,.

Omar

 

 

 

[Vasko]

Hello Omar,

To change the border color of the RadRadioButtonList, you can try using the following JS approach, which changes the color based on some condition: 

<script>
    function pageLoadHandler() {
        var radioButtonList = $find("<%= RadRadioButtonList1.ClientID %>");
        var radioButtonListElement = radioButtonList.get_element()

        if (someCondition()) {
            radioButtonListElement.style.border = "3px solid red";
        } else {
            radioButtonListElement.style.border = "3px solid blue";
        } 
    }
    Sys.Application.add_load(pageLoadHandler);  

    function someCondition() {
        return Math.random() > 0.5; 
    }
</script>

I hope this method is useful to you.

Kind regards,
Vasko
Progress Telerik

[Omar]

It worked.

Thanks Vasko.