https://github.com/mendixlabs/mendix-tree-view
Show a Tree structure in a Tree View in Mendix
https://github.com/mendixlabs/mendix-tree-view
ant-design mendix mendix-widget react treeview
Last synced: 7 months ago
JSON representation
Show a Tree structure in a Tree View in Mendix
- Host: GitHub
- URL: https://github.com/mendixlabs/mendix-tree-view
- Owner: mendixlabs
- License: other
- Created: 2020-02-03T03:33:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T09:59:15.000Z (about 3 years ago)
- Last Synced: 2024-04-13T17:55:38.163Z (almost 2 years ago)
- Topics: ant-design, mendix, mendix-widget, react, treeview
- Language: TypeScript
- Homepage: https://appstore.home.mendix.com/link/app/112707/
- Size: 2.66 MB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://www.apache.org/licenses/LICENSE-2.0)
[-orange.svg)](https://docs.mendix.com/developerportal/app-store/app-store-content-support)
[](https://appstore.home.mendix.com/link/modeler/)
[](https://github.com/JelteMX/mendix-tree-view/releases/latest)
[](https://github.com/JelteMX/mendix-tree-view/issues)
[](https://github.com/JelteMX/widget-test-projects)
# Tree View for Mendix
Mendix Tree View widget using [Ant Design Table](https://ant.design/components/table/) (MIT License).
Show a Tree structure in your Mendix project
> See test-project [https://treeview-react-sandbox.mxapps.io/](https://treeview-react-sandbox.mxapps.io/) for a live demo! The test-project itself can be downloaded [here](https://github.com/JelteMX/widget-test-projects#tree-view)
> Missing features? See TODO at the bottom to see which items are still on the TODO list. If you find other bugs, please report this as an issue [here](https://github.com/JelteMX/mendix-tree-table/issues)
## Features
- Display a tree structure in a tree view
- Data Sources: XPath, Microflow, Nanoflow
- Load a complete tree structure
- Two patterns: Node-Parent or Node-Children
- Load children over reference, xpath or nanoflow
- On Click events
- Drag & Drop (Node-Parent)
- State management (keep treestructure expansion in browser storage)
-
- **Experimental** Client side search (Only on loading a complete tree)
> This widget is about 300Kb uncompressed, so in your cloud deployment this widget should take about 83 Kb of network resources
Tested:
- IE11 & Edge
- Chrome
- Firefox
- Safari
## Basic Configuration
### 1. Data Source
### 2. Data
- You can choose to load a complete tree, or partial
- The rest of the settings are self-explanatory
### 3. Relation
### 4. UI
- Note: You can now also set the class name of a node with an attribute
### 5. Drag & Drop
- Drag & Drop is only enabled for objects with a parent relation
- The widget will do the changes on the object by itself
### 6. Search (experimental)
- This feature is highly experimental and might be subject to change in future releases
- It requires another helper entity, which will be used in calling a Nanoflow
- The helper entity has a reference set of all the objects that are loaded, and the search query. It is up to you to create a Nanoflow that returns a list of objects to be shown (act as a filter)
### 7. Misc
- This deals with state management and exposing an external method to select an item
### 8. Events
## Demo project
[https://treeview-react-sandbox.mxapps.io/](https://treeview-react-sandbox.mxapps.io/)
### Domain model
- This is an example of the domain model used in our test-project
- **Note: Only use one type of relation! Either Node-Parent or Node-Children!** This domain model features both, as cwe reate two types of sets of nodes to show all capabilities
## Issues, suggestions and feature requests
Please report your issues [here](https://github.com/JelteMX/mendix-tree-view/issues)
## TODO
These are action items on the list for future releases
- WebModeler preview
- Draggable NodeChildren
- On DragChange mf/nf
- Automated unit tests & CI/CD pipeline
## License
Apache 2