jQWidgets Forums

Tagged: checkbox, jqxtree, Tree

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 12 years, 4 months ago.

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

Author

can’t get checkbox checked Posts

January 24, 2013 at 12:13 am can’t get checkbox checked #14123

elessar

Participant

hello, it’s just a small issue but it’s bugging whole day;

how can I check an checkbox in a tree?

the method

$(‘#jqxTree’).jqxTree(‘checkItem’, nextItem, true);

doesn’t seem to be working..

let’s take the example source of checkboxed tree and add a method $(‘#jqxTree’).jqxTree(‘checkAll’); to http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/checkboxes.htm?classic

It doesn’t do anything. What am I doing wrong?

January 24, 2013 at 9:06 am can’t get checkbox checked #14133

Dimitar

Participant

Hello elessar,

The methods work as expected at our side. Here is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, Tree" />
    <meta name="description" content="The jqxTree can display a checkboxes next to its items. You can also enable three-state checkboxes. In this mode, when the user
     checks an item, its sub items also become checked. When there is an unchecked item, the parent item is in indeterminate state." />
    <title id='Description'>The jqxTree can display a checkboxes next to its items. You
        can also enable three-state checkboxes. In this mode, when the user checks an item,
        its sub items also become checked. When there is an unchecked item, the parent item
        is in indeterminate state.</title>
    <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.8.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 () {
            // Create jqxTree 
            var theme = getTheme();
            // create jqxTree
            $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px', theme: theme });
            $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true, theme: theme });
            $('#jqxCheckBox').bind('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTree').jqxTree({ hasThreeStates: checked });
            });
            $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
            $("#checkAll").click(function () {
                $('#jqxTree').jqxTree('checkAll');
            });
            $("#checkHome").click(function () {
                $('#jqxTree').jqxTree('checkItem', $("#home")[0], true);
            });
        });
    </script>
</head>
<body class='default'>
    <button id="checkAll">
        Check all items</button>
    <button id="checkHome">
        Check Home item</button>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTree' style='float: left; margin-left: 20px;'>
                <ul>
                    <li id='home'>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>
            <div style='margin-left: 60px; float: left;'>
                <div style='margin-top: 10px;'>
                    <div id='jqxCheckBox'>
                        Three Check States</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

If the issue persist at your side, please make sure you use the latest version of jQWidgets (as of now, it is 2.6.1).

Best Regards,
Dimitar

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

January 24, 2013 at 7:45 pm can’t get checkbox checked #14178

elessar

Participant

yay, it works, but another question : is 2.6.1 compatible with 2.4.2? I overwrote it and half of page is gone (literally there’s just white space )

January 25, 2013 at 6:51 am can’t get checkbox checked #14191

Dimitar

Participant

Hi elessar,

Please check out the Release History for any breaking changes that may have occured between versions 2.4.2 and 2.6.1. Also note that the API available on our website is valid for the latest versions. The API included in the download package for 2.4.2 is valid for that version.

Best Regards,
Dimitar

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.