jqxmenu RTL issue - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: item, jqxMenu, level, Menu, right to left, RTL, setItemOpenDirection, submenu

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

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

Author

jqxmenu RTL issue Posts

July 23, 2014 at 7:24 am jqxmenu RTL issue #57601

raj

Participant

Hi all,

Here last menu has sub items, i need rtl options for lastmenu only, not for all the menu items. How we can achieve this, consider the following code to resolve my issue.

<!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>
    <title></title>
    <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    <link href="../Assets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="../Assets/Styles/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#menu").jqxMenu({ width: '125px', mode: 'vertical', autoCloseOnClick: false });
        });

    </script>
</head>
<body>
    <div id="menu" style="float:right;">
        <ul style="padding-right: 4px; padding-left: 4px; cursor: pointer">
            <li><span>First</span></li>
            <li><span>Second</span></li>
            <li><span>Third</span></li>
            <li><span>Fourth</span></li>
            <li><span>Fifth</span>
                <ul id="columnfield" style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                    <li><span>
                        <input type="checkbox" id="checkbox1" />First </span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox2" />Second</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox3" />Third</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox4" />Fourth</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox5" />Fifth</span></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

July 23, 2014 at 7:59 am jqxmenu RTL issue #57604

Dimitar

Participant

Hello raj,

Right-to-left can only be applied to the whole menu. However, you may use the method setItemOpenDirection to change the open direction of some item’s pop-up (example).

Best Regards,
Dimitar

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

July 23, 2014 at 8:56 am jqxmenu RTL issue #57608

raj

Participant

Hi Dimitar,
Thanks for your quick support, I can achieved what i excepted, but It is possible to change the arrow position to left side. please refer the code

<!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>
    <title></title>
    <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
    <link href="../Assets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="../Assets/Styles/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#menu").jqxMenu({ width: '125px', mode: 'vertical', autoCloseOnClick: false });
            $("#menu").jqxMenu('setItemOpenDirection', 'Home', 'left', 'down');

            // create checkboxes
            //            $("#checkbox1").jqxCheckBox({ checked: true });
            //            $("#checkbox2").jqxCheckBox({});
            //            $("#checkbox3").jqxCheckBox({});
            //            $("#checkbox4").jqxCheckBox({});
            //            $("#checkbox5").jqxCheckBox({});

            $("#lblcreategroup").click(function () {
                $("#btnsave").show();
                $(this).hide();
                $(txtgroup).show();
            })

            var temp = "<li><i class=\"fa fa-html5\"></i><span style=\"\">Export HTML</span></li><li><i class=\"fa fa-file-pdf-o fa-fw\" style=\"margin-left: -3px;\"></i><span style=\"padding-left: 5px;\">Export PDF</span></li>";
            $("#grouphorizontalline").append('<li><span id="currentgroup" style="padding-left: 3px; font-style: italic;" onclick="setcurrentgroup()">Current Group</span> </li>');

        });
    </script>
</head>
<body>
    <div id="menu" style="float:right;">
        <ul style="padding-right: 4px; padding-left: 4px; cursor: pointer">
            <li><span>First</span></li>
            <li><span>Second</span></li>
            <li><span>Third</span></li>
            <li><span>Fourth</span></li>
            <li id="Home"><span>Fifth</span>
                <ul id="columnfield" style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                    <li><span>
                        <input type="checkbox" id="checkbox1" />First </span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox2" />Second</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox3" />Third</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox4" />Fourth</span></li>
                    <li><span>
                        <input type="checkbox" id="checkbox5" />Fifth</span></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

July 23, 2014 at 2:59 pm jqxmenu RTL issue #57632

Dimitar

Participant

Hi raj,

Unfortunately, the arrow direction can only be changed by setting rtl to true, but, as I stated, this would affect the whole menu.

Best Regards,
Dimitar

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

July 25, 2014 at 10:29 am jqxmenu RTL issue #57700

raj

Participant

Hi Dimitar

Thanks for your kind support.

Best Regards,
Raj

Author

Posts

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

You must be logged in to reply to this topic.