jQuery UI Widgets Forums Navigation Tree jqxTree with checkboxes using KnockoutJS

This topic contains 7 replies, has 3 voices, and was last updated by  Makla 11 years, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • jqxTree with checkboxes using KnockoutJS #14113

    lepa
    Member

    Hi all, I’m trying to create a jqxTree with checkboxes that is databound using KnockoutJS but I can’t get the checkboxes shown. Can you provide a quick example like the one in the demos? Thanks

    jqxTree with checkboxes using KnockoutJS #14116

    Peter Stoev
    Keymaster

    Hi lepa,

    To show checkboxes in jqxTree, you should set its “checkboxes” property to true and also to include the jqxcheckbox.js file into your page.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTree with checkboxes using KnockoutJS #14117

    lepa
    Member

    Thanks Peter, for a normal jqxTree this works. but for one that is connected to knockout the checkboxes are not shown…

    jqxTree with checkboxes using KnockoutJS #14118

    Peter Stoev
    Keymaster

    Hi lepa,

    Here’s a sample:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id="Description">Integration of jqxTree with Knockout</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.1.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/gettheme.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)
    };
    $("#tree").jqxTree({ checkboxes: true });
    ko.applyBindings(viewModel);
    $("#tree").jqxTree('expandAll');
    });
    </script>
    </head>
    <body style='font-size: 13px; font-family: Verdana;' class='default'>
    <div>
    <div style="float: left;">
    <ul data-bind="foreach: people">
    <li>
    <div>
    <span data-bind="text: label"></span><a href='#' data-bind='click: addItem, visible: enabled'> Add Item</a>
    </div>
    <ul data-bind="foreach: items">
    <li><span data-bind="text: $data"></span></li>
    </ul>
    </li>
    </ul>
    </div>
    <div style="float: left; margin-left: 50px;">
    <div data-bind="jqxTree: {source: people, disabled: disabled, theme: getDemoTheme()}" id="tree">
    </div>
    <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTree with checkboxes using KnockoutJS #14150

    lepa
    Member

    Thanks Peter,

    your code is working 🙂 However would it be possible to add a new property in Person like:

    this.checked = ko.observable(true);

    and then use it to get the value of the corresponding checkbox?

    I’ve tried it but when I try to retrieve the value it is always false…

    jqxTree with checkboxes using KnockoutJS #14164

    Peter Stoev
    Keymaster

    Hi lepa,

    That will not be possible at present. We will consider updating this in the future versions. Thanks for the feature request.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxTree with checkboxes using KnockoutJS #14176

    lepa
    Member

    Is there a quick & dirty solution I can do? or does this need some major development…? My tree will only have 2 levels.

    • This reply was modified 11 years, 4 months ago by  lepa.

    Makla
    Participant

    your code is working However would it be possible to add a new property in Person like:

    this.checked = ko.observable(true);

    and then use it to get the value of the corresponding checkbox?

    This would be a really nice feature. +1 vote

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

You must be logged in to reply to this topic.