jQWidgets Forums

Tagged: html5 treeview, jQuery TreeView, jQuery UI, jqwidgets, jqxtree

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years ago.

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

Author

how to put checkboxes in tree with knockoutJS? Posts

May 7, 2013 at 11:03 am how to put checkboxes in tree with knockoutJS? #20669

yonysun

Member

how to put checkboxes in tree with knockoutJS?

I found however I write my code,I can’t made the checkbox display in tree

<script type="text/javascript" defer="defer">
        $(document).ready(function () {
            var theme = 'darkblue';
         // 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 = {
                theme:theme,
                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);$('#tree').jqxTree({ checkboxes: true }); 
            $("#tree").jqxTree('expandAll');
            $('.btn').jqxButton({ theme: theme, width: '100px' });
            $("#treePanel").jqxPanel({width:'600',height:'500',theme:theme});
        });
    </script>
	</head>
	<body>
<div id="institExpander" style="width:100%;height:100%;overflow: hidden;position: absolute;">     
	<div style="width:100%;height:100%;overflow: hidden;">       
		<div class="jqx-widget-header jqx-widget-header-darkblue jqx-expander-header-disabled jqx-expander-header-disabled-darkblue jqx-expander-header jqx-expander-header-darkblue"><img style="margin-left:10px;padding-right:5px;" src="images/tree.png"/>组织机构管理</div>
		<div>
			<div id="treePanel" style="float: left;">
				<div data-bind="jqxTree: {source: people, theme: theme}" id="tree"></div>
			</div>
			<div id="buttons"  style="float: left;width:200px;">
				<button class="btn" >添加新节点</button>
				<button class="btn" >删除部门</button>
				<button class="btn">修改名称</button>
			</div>
		</div>
	</div>
</div>

I also overwrited my jqxknockout.js

var v = new ko.jqwidgets.knockout({
            name: "jqxTree",
            source: null,
            disabled: false,
            checkboxes:false,
            reset: function() {
                this.disabled = false;
                this.source = null
            },
            getProperty: function(y, z, x) {},
            setProperty: function(x, y, z, A) {
                if (y == "source") {
                    if (this.source != A) {
                        this.source = A;
                        x.host.jqxTree({
                            source: A
                        })
                    }
                }
                if (y == "disabled") {
                    if (A != this.disabled) {
                        this.disabled = A;
                        x.host.jqxTree({
                            disabled: A
                        })
                    }
                }
                if (y == "checkboxes") {
                    if (A != this.checkboxes) {
                        this.checkboxes = A;
                        x.host.jqxTree({
                            checkboxes: A
                        })
                    }
                }
            }
        });

who can help me?

May 7, 2013 at 4:34 pm how to put checkboxes in tree with knockoutJS? #20687

Peter Stoev

Keymaster

Hi,

1. To use jqxTree with Checkboxes you should include jqxcheckbox.js in your project and set the “checkboxes” property of jqxTree to true.
2. Please, take a look at the EULA before making any changes in the source code.

Best regards,
Peter Stoev

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

May 8, 2013 at 1:25 am how to put checkboxes in tree with knockoutJS? #20708

yonysun

Member

Thanks Peter.

It works fine now.

And I have to say sorry to overwrite the sound code without permission,

I will notice the EULA and Follow the agreement.

May 8, 2013 at 4:50 am how to put checkboxes in tree with knockoutJS? #20724

Peter Stoev

Keymaster