jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › jqxTree with checkboxes using KnockoutJS
Tagged: checkboxes, jqxtree, knockoutjs
This topic contains 7 replies, has 3 voices, and was last updated by Makla 12 years ago.
-
Author
-
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
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 StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter, for a normal jqxTree this works. but for one that is connected to knockout the checkboxes are not shown…
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 StoevjQWidgets Team
http://www.jqwidgets.comThanks 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…
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 StoevjQWidgets Team
http://www.jqwidgets.comIs there a quick & dirty solution I can do? or does this need some major development…? My tree will only have 2 levels.
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
-
AuthorPosts
You must be logged in to reply to this topic.