jQWidgets Forums

Tagged: checkbox, disable, disableItem, item, jqxtree, remove, Tree

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

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

Author

Can I remove the checkbox for a specific item Posts

September 18, 2013 at 5:17 am Can I remove the checkbox for a specific item #29155

itbird

Participant

So, the item whose checkbox has been removed ,will be look like a group label for the items below

Thank you.

September 18, 2013 at 5:19 am Can I remove the checkbox for a specific item #29156

itbird

Participant

Such as the item id is: lblID000

I have tried: $(“#jqxTree”).jqxTree(‘disableItem’, $(“#lblID000”)[0]);

But it doesn’t work.

The ID is specified in a Ajax txt file:　 and the format like {“label”: “Folder 5”, “id”:”oid000″ },

The ID is assigned to the item successfully.

September 18, 2013 at 11:19 am Can I remove the checkbox for a specific item #29171

Dimitar

Participant

Hello itbird,

Here is an example, based on the demo Checkboxes, that shows how to remove the checkbox in front of a particular tree item:

<!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.10.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 = "";
            // 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').on('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTree').jqxTree({ hasThreeStates: checked });
            });
            $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
            $("#jqxTree .jqx-checkbox:eq(1)").css("display", "none");
            $('#jqxTree').jqxTree('disableItem', $("#solutions")[0]);
        });
    </script>
</head>
<body class='default'>
    <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 id="solutions">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>

The example also shows how to disable an item using the method disableItem. If you, however, load the tree from Ajax, you may have to disable the item in on the initialized event.

Best Regards,
Dimitar

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

September 19, 2013 at 12:25 am Can I remove the checkbox for a specific item #29193

itbird

Participant

Thank you Dimitar, your code is very helpful. :), and it works on my hard code menu tree.

Just have two questions regarding the code above:

1. Can I use a specific ID to assign css rather than a sequence number?

$(“#jqxTree .jqx-checkbox:eq(1)”).css(“display”, “none”);

jqx-checkbox:eq(1) Means the second checkbox will be invisible, can I use a ID instead? As normally, it is a little bit hard to calculate the sequence id.

2. When I try appling the code during an ajax call, we always use the following code (function bind with expand method) to retrieve nodes information.

tree.bind(‘expand’, function(event) {

$.each(children, function() {
var item = tree.jqxTree(‘getItem’, this);
if (item && item.label == ‘Loading…’) {
loaderItem = item;
loader = true;
return false
};
});
if (loader) {
$.ajax({
url: loaderItem.value,
success: function(data, status, xhr) {
var items = jQuery.parseJSON(data);
tree.jqxTree(‘addTo’, items, $element[0]);
tree.jqxTree(‘removeItem’, loaderItem.element);
}
});
}
}

And I have programmed the following Initialized event:
$(‘#jqxTree’).on(‘initialized’, function(event) {
// Some code here.
$(“#jqxTree .jqx-checkbox:eq(3)”).css(“display”, “none”);
});

But no matter I added this event within the expand function, or outside, they are all not working.

Can you give me some help.

Thank you very much.

September 19, 2013 at 6:31 am Can I remove the checkbox for a specific item #29204

Dimitar

Participant

Hello itbird,

Yes, it is possible to get the checkbox by the adjacent item’s id. E.g.:

$("#mainSolutions .jqx-checkbox:eq(0)").css("display", "none");

<li item-checked='true' item-expanded='true' id="mainSolutions">Solutions

The .eq(0) method is needed to specify that you are selecting the checkbox of the item with the given id and not any of its subitems’.

As for the Ajax call, try disabling the checkbox in the success callback function.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.