jQWidgets Forums

Tagged: jqxDropDownButton, jqxRadioButton

This topic contains 6 replies, has 4 voices, and was last updated by Adarsha 10 years, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Dynamic Radio Button Group Posts

June 21, 2013 at 7:25 am Dynamic Radio Button Group #23547

Spectator

Hi,

For jqxDropDownList, there is a way to populate the values from actual selectbox to custom jqxDropdownlist using the following property.

$(".dispRows_select").jqxDropDownList('loadFromSelect', 'dispRows_selectBox');

Here, I have a situation where radio buttons are generated using JSP.

<s:radio name="dateFormat" id="dateFmt" list="#{'1':#dateFormat1,'2':#dateFormat2}" value="userPreference.dateFormat" />

From the above example, I will get two radio buttons but it is a generic radio button so it differs from jqx theme.

How do I create jqxRadioButton alike jqxDropdownList?

Can someone please help?

Thanks & Cheers,
\_rssb

June 21, 2013 at 8:14 am Dynamic Radio Button Group #23557

Mariya

Participant

Hi rskbuvan,

You can not have radio buttons in the jqxDropDownList. But if you want to have a widget with a similar look you can create a jqxDropDownButton and have jqxRadioButton in it. Take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
       <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTooltip
            var theme = getDemoTheme();
            $("#dropDownButton").jqxDropDownButton({ width: 150, height: 25, theme: theme});
            $("#dropDownButton").jqxDropDownButton ("open");
            $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            '<br/>'
            $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25, theme: theme });
            $("#jqxRadioButton3").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            $("#jqxRadioButton4").jqxRadioButton({ width: 250, height: 25, theme: theme });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;' id="dropDownButton">
           
          <div style='margin-top: 10px;' id='jqxRadioButton'>
            12 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton2'>
            <span>6 Months Contract</span>        </div>
     
             <div style='margin-top: 10px;' id='jqxRadioButton3'>
            3 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton4'>
            <span>9 Months Contract</span>
        </div>
       </div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 9:02 am Dynamic Radio Button Group #23561

rskbuvan

Spectator

Hi Mariya,

I think, you don’t get my point clear.

Alike “loadFromSelect”, is there a way I can create a jqxRadioButton from generated by server-side script.

Please suggest me a solution.

Thanks & Cheers,
\_rssb

June 21, 2013 at 9:17 am Dynamic Radio Button Group #23564

support

Participant

Hi rskbuvan,

The ‘loadFromSelect’ method is used when you want to load items from a select tag and the parameter that you should use is the id of the select tag.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 9:37 am Dynamic Radio Button Group #23567

rskbuvan

Spectator

Hi Mariya,

I’ll explain you clearly.

Using the server-side code, I’ll get two generic radio buttons. I pasted the code for your reference.

From the below rendered input radio buttons, I want to convert that into custom jqxRadioButton. Because using the below radio button, I’m out of jqWidget theme.

<input type="radio" value="1" id="dateFmt1" name="dateFormat"><label for="dateFmt1">dd.mm.yyyy</label>
<input type="radio" value="2" checked="checked" id="dateFmt2" name="dateFormat"><label for="dateFmt2">mm.dd.yyyy</label>

From the server-side I can get only two input type radio buttons hence in order to maintain consistency of jqWidget theme, I want the generic radio buttons to be converted in to jqxRadiobutton. So please suggest me the solution.

Note: This should happen during the document ready.

I hope now you understand my requirement.

Thanks & Cheers,
\_rssb

June 21, 2013 at 10:02 am Dynamic Radio Button Group #23569

support

Participant

Hi rskbuvan,

It is not possible to convert a radiobutton input tag into jqxRadioButton.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

August 25, 2014 at 2:33 pm Dynamic Radio Button Group #58739

Adarsha

Participant

gettheme.js is not available in the download. can you share this please.

thanks !

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.