jQWidgets Forums

Tagged: javascript treeview, jQuery TreeView, treeview control

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 9 months ago.

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

Author

Tree with checkbox disabled Posts

August 7, 2012 at 4:41 pm Tree with checkbox disabled #6666

Participant

Hello,

I using a Tree with checkbox and I set some items are disabled, but the checkbox are enabled. How can I define checkbox disabled for items disabled ?

August 8, 2012 at 8:30 pm Tree with checkbox disabled #6687

Peter Stoev

Keymaster

Hi rdatilio,

You can use this workaround to disable an item and its checkbox:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px' });
            $('#jqxTree').jqxTree('disableItem', $("#home")[0]);
            var item = $('#jqxTree').jqxTree('getItem', $("#home")[0]);
            $(item.checkBoxElement).jqxCheckBox('disable');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTree' style='float: left; margin-left: 20px;'>
        <ul>
            <li id='home' item-selected='true'>Home</li>
            <li item-checked='true' item-expanded='true'>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li>Government</li>
                    <li item-checked='false'>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
            <li>Products
                <ul>
                    <li>PC products</li>
                    <li>Mobile products</li>
                    <li>All products</li>
                </ul>
            </li>
            <li>Support
                <ul>
                    <li>Support home</li>
                    <li>Customer Service</li>
                    <li>Knowledge base</li>
                    <li>Books</li>
                    <li>Training and certification</li>
                    <li>Support programs</li>
                    <li>Forums</li>
                    <li>Documentation</li>
                    <li>Updates</li>
                </ul>
            </li>
            <li>Communities
                <ul>
                    <li>Designers</li>
                    <li>Developers</li>
                    <li>Educators and students</li>
                    <li>Partners</li>
                    <li>By resource
                        <ul>
                            <li>Labs</li>
                            <li>TV</li>
                            <li>Forums</li>
                            <li>Exchange</li>
                            <li>Blogs</li>
                            <li>Experience Design</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Company
                <ul>
                    <li>About Us</li>
                    <li>Press</li>
                    <li>Investor Relations</li>
                    <li>Corporate Affairs</li>
                    <li>Careers</li>
                    <li>Showcase</li>
                    <li>Events</li>
                    <li>Contact Us</li>
                    <li>Become an affiliate</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 9, 2012 at 6:35 pm Tree with checkbox disabled #6709

rdatilio

Participant

Hello Peter,

I using your code to test and the checkbox are disabled (gray), but still can click on it… When I do that the event “checkChange” is triggered.

August 9, 2012 at 9:00 pm Tree with checkbox disabled #6715

Peter Stoev

Keymaster

That’s true. Disabling the tree item does not disable its checkbox which is an issue in jqxTree. If you have some logic in the ‘checkChange’ handler and you want it to run only for enabled items, do this:

$('#jqxTree').bind('checkChange', function (event) {
    var isDisabled = $("#jqxTree").jqxTree('getItem', event.args.element).disabled;
    if (!isDisabled) {
        // do something
    }
});

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.