Here is how I got it to work if it helps anyone.

css
:root{--text-color:#000;--switcher-color:rgba(0,0,0,.4);--switcher-hover-color:rgba(0,0,0,.65);--checkbox-border-color:#d9d9d9;--checkbox-background-color:#f5f5f5;--checked-color:#1890ff;--disabled-color:rgba(0,0,0,.25);--disabled-border-color:#d9d9d9;--disabled-background-color:#f5f5f5}.treejs{color:var(--text-color)}.treejs .treejs-switcher:before{border-top-color:var(--switcher-color)}.treejs .treejs-switcher:hover:before{border-top-color:var(--switcher-hover-color)}.treejs .treejs-checkbox:before{border-color:var(--checkbox-border-color)}.treejs .treejs-checkbox:hover:before{box-shadow:0 0 2px 1px var(--checked-color)}.treejs .treejs-node__checked>.treejs-checkbox:before{background-color:var(--checked-color);border-color:var(--checked-color)}.treejs .treejs-node__checked>.treejs-checkbox:after{border-color:#fff}.treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--checked-color);border-color:var(--checked-color)}.treejs .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#fff}.treejs .treejs-node__disabled{color:var(--disabled-color)}.treejs .treejs-node__disabled .treejs-checkbox:before{border-color:var(--disabled-border-color)!important;background-color:var(--disabled-background-color)!important}.treejs .treejs-node__disabled .treejs-checkbox:hover:before{box-shadow:none!important}.treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after,.treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{border-color:var(--disabled-border-color);background-color:var(--disabled-background-color)}@media (prefers-color-scheme: dark){:root{--text-color:#fff;--switcher-color:rgba(255,255,255,.4);--switcher-hover-color:rgba(255,255,255,.65);--checkbox-border-color:#555;--checkbox-background-color:#444;--checked-color:#1890ff;--disabled-color:rgba(255,255,255,.25);--disabled-border-color:#555;--disabled-background-color:#444}}

JS in loaded
`
const treeContainer = document.querySelector('.treejs');
const applyDarkMode = (isDarkMode) => {
if (isDarkMode) {
treeContainer.classList.add('treejs-dark');
} else {
treeContainer.classList.remove('treejs-dark');
}
};

            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
            applyDarkMode(darkModeMediaQuery.matches);

            darkModeMediaQuery.addEventListener('change', (event) => {
                applyDarkMode(event.matches);
            });

`

I believe this to be a bug, but if not, please could you explain the correct use?

I get a collection of data (not through jstree ajax) which is in a flat form. Each datum has a Parent ID field which allows me to build a hierarchical structure from the data.

The first think I do, before building this structure is to map my data over into a structure that matches a treejs node stucture, and I also set the checked property based on some condition, ie

{ "id": datum.id, "text": datum.text, "checked": true, "children":[] }

When I do this, only nodes without children are set. Yet, when looking at the data for the nodes, all nodes have 'checked':true.

I can use the values option to set the checked nodes, but it is difficult to set nodes deeper than one level to checked, as i have to figure out the id path to that node first to check it, eg "3-3-6-1"

Any thoughts?

Unfortunately, I need to run it on IE11, but IE11 does not know Object assign method.

Hi, is it possible to remove the checkboxes? just to have a normal tree view behaviour.
Kr

Hi,

If your tree array is as such:

let data = [
  {
    "id": "0",
    "text": "0",
    "checked": true,
    "children": [
      {
        "id": "0-0",
        "text": "0-0",
	"checked": true,
        "children": []
      }
    ]
  }
]

Then no nodes are selected. This is because the checked must be implemented as a toggle of sorts, inverting the previous value, so because the parent is checked, setting checked: true on a child causes the parent to be inverted, unchecking it and seemingly also unchecking the child.

This doesn't make intuitive sense and it took me a good few minutes to figure out what was going on in this case.

Because of this, you either need to set checked: true on the most-parent node that you want all children checked in, or, if you don't want all that parent's children checked, then you need to not have the property on the parent and only on the child nodes you want checked.

checked: true should mean I want that entry checked, regardless of any previous values; there should be no inversion toggling.

All the examples except the Ajax one need the tree data structure to be defined prior to creating the tree object.
We cant use the ajax option as the data returned from the ajax APi needs transformation into the right json format.
We use fetch to get the required data, then format it into the right data structure in the promise, then we need to get the tree to "take" this data at runtime, and display it.

is there any mechanism to dynamically add or change the data structure?

Uncaught TypeError: Cannot convert undefined or null to object
at Function.entries ()
at t.default (tree-1.8.3.min.js:1:9571)
at d.load (tree-1.8.3.min.js:1:3392)
at new d (tree-1.8.3.min.js:1:2846)

I try to load from url but url is not requested at all.

const myTree = new Tree("#WzIndustry", {
    url: "@Url.Action("GetIndustriesWzAsJson", "Data")",
    method: "GET",
    values: null // selected values
});

Is it possible for the tree to use checkboxes to allow for the tree values to be submitted in a form?

Hi,
I want to use treejs in my web-component but the initialisation of tree is done by providing a query selector input( container ). but this query over entire document. If the container input for attaching tree could be a HTMLElement or a string( for query selector input ) then i could attach it in my web component.

Hello,
Strange problems, please see code bellow

`

</title>
<script src="dist/tree.min.js"></script>

let tree = new Tree('.treeContainer', {
    data: [{ id: '-1', text: 'root', children: data }],
    closeDepth: 3,
    loaded: function () {
    },
    onChange: function () {
        console.log(this.values);
    }
})

All nodes are checked by initial data, but 2 nodes "Book Issue" and "Book Return" are not checked, very strange.

Can you check it, please? Thank you.

Is it possible to have the tree use regular checkboxes to allow developers to style the checkboxes with packages like pretty checkbox?

Thank you for this nice and small librairy,
Juste take car that the documentation says "check" while the code is attending "checked" in node object definition.

Thanks !

closeDepth: 1 will help me to only show the first level of the tree with all collapsed.

If I click on an item it will open, but it opens all childrens not only the next level/children. How can I prevent this?

Hi,

Would be great to be able to have a property to define whether a node is open/closed by default similar to the checked property.

Hi,

The event handler for the nodes has the nodeName properties encoded as all capitals.

HTML specification says lowercase; while this seems to work on plain HTML sites, this breaks the event handler for anything using xHTML.

Unfortunately, this is an inconsistency and mis-implementation by browser vendors that has persisted due to compatibility reasons.

The fix would be to either convert all nodeName properties to upper/lowercase before comparison or using the localName property instead, which correctly returns lowercase values in both cases.

I make great use of the library, thanks a lot! Below is more of an idea than issue.
I found that it should be nice to have some hook/callback to expand/close the entire tree.
Logging tree.closeDepth yields undefined, so it can't be manipulated once the tree is instantiated.
Thank you!

hello, i have a error .
I test IE11
Not available on IE?
thanks.

myTree.collapseAll is not a function

const myTree = new Tree(...);

myTree has no definition for collapseAll

Hi

This is awesome, a couple of questions.

Q1. Is it possible to indicate an icon for open/closed state?
Q2. Is is possible to create, update and delete nodes at runtime from the tree?
Q3. Is it possible to find a node by path or particular reference like id?

Thanks.

This tree widgets looks good. It's simple and easy to use. It is a pity that the latest changes that include the onChange event handler are not published to npm. Is it possible to release a new version?

I got a JS-Error when I try to get data via Url:

Uncaught TypeError: can't convert undefined to object

This is the code:

    const myTree = new Tree('#myTree', {
      url: 'http://localhost:8000/treeviewJson',
      method: 'GET',
    });

But this works:

let url = 'http://localhost:8000/treeviewJson';

fetch(url)
.then(res => res.json())
.then(out => {
  
  const myTree = new Tree('#myTree', {
    data: [out],
    })
}
  );

This is the response of the URL

# curl http://localhost:8000/treeviewJson
{"id":"0","text":"Node 0","children":[{"id":1,"text":"Node 0-1"},{"id":2,"text":"Node 0-2"}]}[]

It's generate by PHP:

function treeviewJson(): Response
    {
        $data = [
            'id' => '0',
            'text' => 'Node 0',
            'children' => [
                [
                    'id' => 1,
                    'text' => 'Node 0-1'
                ],
                [
                    'id' => 2,
                    'text' => 'Node 0-2'
                ],
            ]
        ];



        $response = new Response();
        $response->setContent(json_encode($data));
        $response->headers->set('Content-Type', 'application/json');
        return $response;
}

is there a possible way that i can expand just one level of the tree ? so my tree has like 5 levels and i only want to open one level at a time? is there a possible way to do so ?

my tree looks like this:

root
sublevel1
sublevel2

if i click on the root node i just want sublevel 1 to appear, but everytime all nodes appear.

thanks! :)

Hey, I was wondering how to select only the parent node and deselect all of the children?

This component does not appear to work in Internet Explorer 11 under Windows 10.

It requires polyfills for Object.assign/entries/values.

Using tree.js and tree.min.js from the dist/ in this repo results in:

Uncaught SyntaxError: unexpected token: ':'[tree.js:1:11](https://<redacted>/js/tree.js)

Using standard script tag as documented for vanilla usage.

Looking at the object itself, doesn't look right either aside from the apparent syntax error.