B4J Tutorial [Web][SithasoDaisy5] Exploring the SDUI5TreeView

Hi Fam

Demo

DaisyUI TreeView is a customizable tree view component that supports features like drag-and-drop, inline editing, multi-selection, and dynamic node management. It allows developers to create interactive and accessible tree structures. The SDUI5TreeView is a new custom component added to SithasoDaisy5. It uses the menu, checkbox and input components. This is now part of SD5. This has been built from the ground-up using Github Copilot as an ES6 component.



Source Code

GitHub - Mashiane/DaisyUI-TreeView: A DaisyUI TreeView Component

A DaisyUI TreeView Component. Contribute to Mashiane/DaisyUI-TreeView development by creating an account on GitHub.

github.com

 

[Mashiane]

Using it with SithadoDaisy5

As this is added to SD5, one is able to use its functionality seamlessly. Here is the code of the example and the events it dispatches and we are able to trap.

'Static code module
Sub Process_Globals
    Private BANano As BANano        'ignore
    Private app As SDUI5App            'ignore
    Private treeView As SDUI5TreeView        'ignore
End Sub

Sub Show(MainApp As SDUI5App)
    app = MainApp
    BANano.Await(app.UsesTreeView)
    BANano.LoadLayout(app.PageView, "treeview")
    pgIndex.UpdateTitle("SDUI5TreeView")
    '
    CreateTree
End Sub

Sub CreateTree
    treeView.clear()
    treeView.addNode("", "i1", "", "1", "")
    treeView.addNode("", "i2", "", "2", "")
    treeView.addNode("i2", "i21", "", "2.1", "")
    treeView.addNode("i2", "i22", "", "2.2", "")
    treeView.addNode("i2", "i23", "", "2.3", "")
    treeView.addNode("i23", "i231", "", "2.3.1", "")
    treeView.addNode("i23", "i232", "", "2.3.2", "")
    treeView.addNode("", "i3", "", "3", "")
    treeView.refresh()
End Sub

Private Sub treeView_nodeDrop (e As BANanoEvent)
    Log("treeView_nodeDrop")
    Log(e.Detail)
End Sub

Private Sub treeView_nodeClick (e As BANanoEvent)
    Log("treeView_nodeClick")
    Log(e.Detail)
End Sub

Private Sub treeView_nodeChecked (e As BANanoEvent)
    Log("treeView_nodeChecked")
    Log(e.Detail)
End Sub

Private Sub treeView_nodeExpanded (e As BANanoEvent)
    Log("treeView_nodeExpanded")
    Log(e.Detail)
End Sub

Private Sub treeView_nodeCollapsed (e As BANanoEvent)
    Log("treeView_nodeCollapsed")
    Log(e.Detail)
End Sub

Private Sub treeView_nodeEdited (e As BANanoEvent)
    Log("treeView_nodeEdited")
    Log(e.Detail)
End Sub

private Sub treeView_nodeEditCancelled (e As BANanoEvent)
    Log("treeView_nodeEditCancelled")
    Log(e.Detail)
End Sub

Private Sub treeView_nodesSelected (e As BANanoEvent)
    Log("treeView_nodesSelected")
    Log(e.Detail)
End Sub