Topic: Can treeview take a complex object, parse and build the tree?
I was wondering if MDBootstrap's treeview component has a prop that takes an object, of the form
{
"forceType": 1, "rootEntity": {
"name": "112 BN",
"parent": {},
"children": ["__vue_devtool_undefined__", {
"name": "A COY",
"parent": {},
"children": ["__vue_devtool_undefined__", {
"name": "1 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.2387, "longitude": 6.0192},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "111000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "2 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.3984, "longitude": 6.8926},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "112000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "3 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 10.0231, "longitude": 7.0192},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "113000000000000",
"uniqueDesignation": "",
"isAggregate": false
}],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.0421, "longitude": 7.6354},
"elevation": 0,
"sidc": "10031000151211000000",
"id": "110000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "B COY",
"parent": {},
"children": ["__vue_devtool_undefined__", {
"name": "4 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.4562, "longitude": 7.0349},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "121000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "6 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 10.4223, "longitude": 5.8992},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "122000000000000",
"uniqueDesignation": "",
"isAggregate": false
}],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.7846, "longitude": 6.4256},
"elevation": 0,
"sidc": "10031000151211000000",
"id": "120000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "C COY",
"parent": {},
"children": ["__vue_devtool_undefined__", {
"name": "7 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.0891, "longitude": 5.3495},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "131000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "8 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 8.7421, "longitude": 7.0192},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "132000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, {
"name": "9 PL",
"parent": {},
"children": [],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.8764, "longitude": 7.6573},
"elevation": 0,
"sidc": "10031000141211000000",
"id": "133000000000000",
"uniqueDesignation": "",
"isAggregate": false
}],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 10.0421, "longitude": 7.9292},
"elevation": 0,
"sidc": "10031000151211000000",
"id": "130000000000000",
"uniqueDesignation": "",
"isAggregate": false
}],
"isMobile": false,
"speed": 0,
"direction": 0,
"position": {"latitude": 9.8717, "longitude": 8.1837},
"elevation": 0,
"sidc": "10031000161211000000",
"id": "100000000000000",
"uniqueDesignation": "",
"isAggregate": false
}, "assemblyArea": [2.5, 4, 2.7, 4.2]
}
And build the treeview out of that. Manually building the tree may not be feasible all the time in dynamic situations. Quasar framework already has support for this, outlined here.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.8.2
- Device: Laptop
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: Yes
imyke free commented 5 years ago
Is there a way around this?
Magdalena Dembna staff commented 5 years ago
No, there is no such property. You can use
v-forto iterate through your data and display astreeview-itemsbut you would need to determine whether the current object is a parent to the next one. I don't believe there is an easy shortcut in this case. Kind regards, Magdalenaimyke free commented 5 years ago
Ouch! I suppose I'll just embed a q-tree in that case. Thank you.
Magdalena Dembna staff commented 5 years ago
I will pin this suggestion to our idea board - maybe we will consider introducing it in the future. Kind regards, Magdalena
imyke free commented 5 years ago
Alright, thanks.
londoh pro commented 4 years ago
sorry to raise an old thread but its relevant because I'm just looking at the tree view component. Am I correct to think that this suggestion is still pinned to the ideas board?
Magdalena Dembna staff commented 4 years ago
Yes, we haven't added this feature yet. Best regards, Magdalena
londoh pro commented 4 years ago
Thank you very much your reply. However, altho I didnt specifically ask, I kinda thought the next question was implicit in my first question.
But anyway I'll ask it directly: Will you add this feature please?
Obviously it would need a clearly defined data structure (likely with parents and children) and logic to move thru levels.
I would say that it in the majority of use cases a tree view will be dynamic. So without such a capability your tree view isnt really very useful.
You make the point that I can code it myself - and indeed I can, but then whats the point of paying for a framework?
Regardsl.
Magdalena Dembna staff commented 4 years ago
We are planning on developing a new treeview plugin in the future and it'll certainly work with data structures (you can even preview it here, in different technology: https://mdbootstrap.com/docs/standard/plugins/tree-view/#section-basic-example-javascript). As for now, we need to ask you for your patience - this issue will be on our minds (and task list). Best regards, Magdalena