changing radio style or radio label style when radio checked

  1. #1

    changing radio style or radio label style when radio checked

    hi guys, i want to change radio style or radio label style when radio checked , my code is
    radioGrup.Add(new Radio
                        {
                            BoxLabel = sik.Metin,
                            ID = "rd_" + soru.Id + "_" + sik.Id,
                            PaddingSpec = "5 10 5 0",
                            Width = 150,
                            Listeners = { Change = { Handler = "if(this.checked){this.boxLabelCls=test; X.CevapKaydet('" + soru.Id + "','" + sik.Id + "');}" } }
                        });
    the test class is;
    
    <style type="text/css">
            .test {
                background-color: red;
            }
        </style>
    but i am getting test is not defined , how can do this? i
  2. #2
    Hi @azat,

    You should change test to 'test' in the JavaScript code. Otherwise, it is not considered as a string. It is treated as a variable which is not defined.

    Though, I don't think but changing a boxLabelCls on the fly is going to work.

    I would recommend to try with CSS3 selectors. It appears to do the magic in this example.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            input[checked].x-form-radio ~ label {
                background-color: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:RadioGroup runat="server" ColumnsNumber="1">
                <Items>
                    <ext:Radio runat="server" BoxLabel="Radio 1" />
                    <ext:Radio runat="server" BoxLabel="Radio 2" Checked="true" />
                </Items>
            </ext:RadioGroup>
        </form>
    </body>
    </html>
  3. #3
    hi daniil thanks for your reply. i solved this problem this way before your suggestion;
    <style>
            .my-group .x-form-cb-checked .x-form-cb-wrap {
                background-color: yellow;
            }
        </style>
    and i give css class to radio button;
    var radioGrup = new RadioGroup
                    {
                        ID = "rg" + soruNo,
                        Cls = "my-group"
                    };

Similar Threads

  1. [CLOSED] Highlight Checked Radio Button in Radio Button Group
    By rcombis in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 06, 2014, 7:26 PM
  2. Replies: 4
    Last Post: Sep 25, 2012, 9:20 AM
  3. MVC3 with Radio checked
    By zhdl in forum 2.x Help
    Replies: 1
    Last Post: Sep 11, 2012, 2:01 PM
  4. Retrieve checked radio from Radio Group
    By ttharaka2002 in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2010, 2:15 AM
  5. [CLOSED] Dynamic Creation of Radio Buttons within Radio Group
    By Steve in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 04, 2009, 1:13 PM

Posting Permissions