jQuery UI Widgets › Forums › Navigation › Tree › Collapse a tree element using knockout

Tagged: , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Collapse a tree element using knockout Posts
  • November 27, 2015 at 2:51 pm Collapse a tree element using knockout #78629

    DavidBachmann
    Participant

    Hello!

    In our project, we set the source binding of a jqxTree to an observableArray from knockout to fill it with content. The problem is that cannot collapse an element of a tree created that way. When we use an observable property “expanded”, we can expand the node by setting it to true, but cannot collapse it by setting it to false.

    This jsfiddle shows three different methods I tried to use to collapse the tree. None of them work.

    Is there a way to do this?

    Regards,
    David Bachmann

    December 1, 2015 at 6:47 am Collapse a tree element using knockout #78728

    Dimitar
    Participant

    Hello David Bachmann,

    We were not able to run your fiddle, but here is an example that may be helpful to you:

    <!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-3.0.0.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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Define a "Person" class that tracks its own name and children, and has a method to add a new child
            var Person = function (name, items) {
                this.label = name;
                this.items = ko.observableArray(items);
                this.enabled = ko.observable(true);

                this.addItem = function () {
                    if (this.items().length < 4) {
                        this.items.push("New Item");
                    }
                    else if (this.items().length == 4) {
                        this.items.push("Last Item");
                        this.enabled(false);
                    }
                }
            }

            // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
            var viewModel = {
                people: [
                    new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
                    new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
                    new Person("Charles", ["Cayenne", "Cleopatra"])
                ],
                disabled: ko.observable(false)
            };

            ko.applyBindings(viewModel);
            var items = $('#tree').jqxTree('getItems');
            $('#tree').jqxTree('expandItem', items[0]);

            setTimeout(function () {
                $('#tree').jqxTree('collapseItem', items[0]);
            }, 3000);
        });
    </script>
</head>
<body>
    <div data-bind="jqxTree: {source: people, width: 200}" id="tree">
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

    December 4, 2015 at 7:49 am Collapse a tree element using knockout #78888

    DavidBachmann
    Participant

    Hello Dimitar,

    so if I want to collapse specific elements, other than root, I have to scan through the getItems Array and find the item matching the one I want to collapse?

    Also, the jsfiddle has the same problem as every jsfiddle in the “API Reference” section of your Web Demo. You have to enable untrusted sources in the browser, because jsfiddle uses HTTPS and your scripts are delivered using HTTP. You can do this using a shild icon in the address bar in chrome.

    Regards,
    David Bachmann

    December 4, 2015 at 8:34 am Collapse a tree element using knockout #78890

    Dimitar
    Participant

    Hi David Bachmann,

    That is correct, you would have to scan through the getItems array for the item you wish to expand.

    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.