[mbeasley183Member]

Here’s my code (I’m using jQueryUI dialog boxes as the container for the tree):

$dialog = $('<div><div id="jqx"></div></div>');
                    $dialog.dialog({
                        autoOpen: false,
                        hide: "fade",
                        resizable: false,
                        height: 450,
                        width: 350,
                        modal: true,
                        title: title,
                        closeOnEscape: false,
                        draggable: true,
                        open: function() {
                            $('#jqx').jqxTree({
                                source: criteriaList,
                                checkboxes: true,
                                //hasThreeStates: true,
                                toggleMode: 'click',
                                height: 275,
                                width: 300,
                                animationShowDuration: 200,
                                animationHideDuration: 200
                            });
                        },
                        close: function() {
                            $dialog.remove();
                        },
                        buttons: {
                            'Submit': function() {
                                $(this).dialog("close");
                                // get all items.
                                var items = $("#jqx").jqxTree('getItems');
                                // save all checked items in checkedItems array.
                                var checkedItems = new Array();
                                $.each(items, function() {
                                    if (this.checked) {
                                        checkedItems[checkedItems.length] = this.value;
                                    }
                                });
                                console.log(checkedItems); // here is where I would submit the checkedItem codes
                            },
                            'Cancel': function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    $dialog.dialog('open');

[mbeasley183Member]

As far as the line wrapping with , I’m loading my content dynamically with the source option. So I might have to find a way to calculate the width taking into consideration font size, etc. and then determine whether it needs to be split… I’ll work on that.

As for the width option, I have tried setting the width to a pixel value, to a percent value and not setting it at all. No matter which way that I do it, I get cut off items like this:

[mbeasley183Member]

Short turn around from my previous question, but a good solution to setting and retrieving the “value” for a tree when using the source method:

In your JSON object, specify a “value” field for each item. Then when submitting the form you can return an array of the codes of all checked items:

                                // get all items.
                                var items = $("#jqx").jqxTree('getItems');
                                // save all checked items in checkedItems array.
                                var checkedItems = new Array();
                                $.each(items, function() {
                                    if (this.checked) {
                                        checkedItems[checkedItems.length] = this.value;
                                    }
                                });
                                return(checkedItems);

Very easy!

[mbeasley183Member]

Is there anyway to set and retrieve “values” (not labels) when using the source method? My situation is that I have a form based tree with checkboxes. The items are brought in from a database, serialized into a JSON object, passed to the page via AJAX and then loaded into the treeview. Some of the strings that I use for labels are quite long and I’d prefer, when I submit this form, to be able to simply store a coded value for each item (rather than the label) and the item’s checkstate. Any thoughts?

[Author]

Posts