Treeview control using python

Good evening,

I just want to share an example of integrating a library called Fancytree with anvil.
Jul-18-2024 23-41-30

The implementation is very neat. One need to add these two lines to Native Libraries

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/jquery.fancytree-all-deps.js"></script>

Then the rest of the code is python in combination with a little bit of jquery.

       ...
       self.tree_data = [
            {"title": "Node1", "key": "Node1", "folder": True},
            {"title": "Node2", "key": "Node2", "folder": False},
            {"title": "Node3", "folder": False, "children": [
                {"title": "Node3Child1", "checkbox": True, "folder": False},
                {"title": "Node3Child2", "folder": False},
                {"title": "Node3Child3", "folder": False}
            ]}
        ]

    def form_show(self, **event_args):
        # Get the DOM node for the Anvil spacer component where you want to initialize the Fancytree
        tree_dom_node = anvil.js.get_dom_node(self.tree_spacer)

        # Initialize the Fancytree on the DOM node using jQuery
        jQuery(tree_dom_node).fancytree({
            "checkbox": True,
            "selectMode": 3,
            "source": self.tree_data,
            "activate": lambda event, data: self.update_status_label(data.node)
        })

Feel free to try it out :slight_smile:

Link to live project:

Link to Fancytree:

Link to project:

11 Likes

This is really neat! Thanks for sharing :slightly_smiling_face:

1 Like

This is how Tabulator started :slight_smile:

3 Likes