jQWidgets Forums

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

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

Author

jqxTree with checkboxes using KnockoutJS Posts

January 23, 2013 at 10:27 pm 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

January 23, 2013 at 10:44 pm 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

January 23, 2013 at 10:49 pm 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…

January 23, 2013 at 10:56 pm 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

January 24, 2013 at 10:07 am 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…

January 24, 2013 at 12:40 pm 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

January 24, 2013 at 7:43 pm 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.

March 15, 2013 at 7:55 am jqxTree with checkboxes using KnockoutJS #17118

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

Author

Posts

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

You must be logged in to reply to this topic.