jQWidgets Forums

Tagged: DropDownList, jqxDropDownList, round Corners

This topic contains 2 replies, has 2 voices, and was last updated by hf 10 years, 8 months ago.

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

Author

roundedCorners dropdownbutton Posts

September 23, 2014 at 10:03 am roundedCorners dropdownbutton #59907

Participant

Hi,

I have a dropdowngrid/dropdownbutton with next to it a button which clears the selection of the grid.

I would like to achieve the same result as in the demo ‘input group’ http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/index.htm?(arctic)#demos/jqxinput/inputgroup.htm. In this demo the input and image seems to be linked together as one control.

So I added roundedCorners: ‘right’ to the button, but it seems the dropdownbutton doesn’t have this property. Is there another way to achieve this?

$("#jqxdropdownbutton1").jqxDropDownButton({ theme: theme, width: '170px', height: '25px' })
 $("#jqxButtonClear").jqxButton({ theme: theme, width: '19px', height: '19px', disabled: true, roundedCorners: 'right' });

September 24, 2014 at 7:00 am roundedCorners dropdownbutton #59962

Nadezhda

Participant

Hello hf,

You can achieve this with css properties. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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>
    <style>
        #dropDownButton {
            -webkit-border-radius-topleft: 25px 50px;
            -moz-border-radius-topleft: 25px 50px;
            border-top-left-radius: 25px 50px;
            -webkit-bottom-radius-bottomleft: 25px 50px;
            -moz-bottom-radius-bottomleft: 25px 50px;
            border-bottom-left-radius: 25px 50px;
        }

        #jqxButtonClear {
            -moz-border-radius-bottomright: 25px 50px;
            -webkit-border-radius-bottomright: 25px 50px;
            border-bottom-right-radius: 25px 50px;
            -webkit-top-radius-topright: 25px 50px;
            -moz-top-radius-topright: 25px 50px;
            border-top-right-radius: 25px 50px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxDropDownButton
            $("#dropDownButton").jqxDropDownButton({ width: 150, height: 25 });
            $("#jqxButtonClear").jqxButton({ theme: theme, width: '60px', height: '27px', disabled: true, roundedCorners: 'right' });
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);

                var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
            });
            $("#jqxTree").jqxTree({ width: 200 });

            $("#checkbox").jqxCheckBox({});
            $("#checkbox").on('change', function (event) {
                $("#dropDownButton").jqxDropDownButton({ autoOpen: event.args.checked });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;' id="dropDownButton">
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>eLearning</li>
                                    <li>Mobile</li>
                                    <li>RIA</li>
                                    <li>Training</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li>PC products</li>
                            <li>Mobile products</li>
                            <li>All products</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <input type="button" value="clear" id="jqxButtonClear" />
        <br />
        <div style='float: left; margin-top: 5px; margin-left: 30px;'>
            <div id='checkbox'>Open on mouse over</div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

September 25, 2014 at 11:52 am roundedCorners dropdownbutton #60048

Participant

Thanks!

Author

Posts

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

You must be logged in to reply to this topic.