I've had this on my list for a while - we have been using TreeMenuItem to get a drop-down button that shows a tree structure. However, the number of items in the tree is quite large (in depth) and the number of pop-up canvases that get created when navigating are sub-optimal.
Instead, we wanted to create something like the Dropdown Grid sample but showing a TreeGrid instead of a ListGrid.
It turned out to be quite easy to do (for a Proof-of-Concept anyway), but required a bit of copy & pasting that could be avoided if the concept were to be incorporated into the framework.
Here is what the result of the work looks like:
In order to achieve this I had to:
Hope this helps anyone else trying to achieve the same!
Instead, we wanted to create something like the Dropdown Grid sample but showing a TreeGrid instead of a ListGrid.
It turned out to be quite easy to do (for a Proof-of-Concept anyway), but required a bit of copy & pasting that could be avoided if the concept were to be incorporated into the framework.
Here is what the result of the work looks like:
In order to achieve this I had to:
- Make a copy of 'ScrollingMenu' from ISC_Forms and rename all occurrences of ScrollingMenu within the copy to ScrollingTreeMenu and change the base class of the copy to 'TreeGrid'. I made a copy of all the styles so if another developer does this please take care of case-sensitivity issues when doing a Find+Replace.
- Make a copy of 'PickListMenu' also from ISC_Forms and rename all occurrences of PickListMenu within it it to PickListTreeMenu and change the base class to ScrollingTreeMenu
- Specify pickListConstructor in the DynamicForm SelectItem where you want to use it (see below for example)
Code:
fields: [
{
name:"itemID",
title: "field",
editorType:"select",
width:240,
title:"Item",
optionDataSource:"DynTreeDS",
valueField:"id",
displayField:"fieldId",
[B]pickListConstructor: "PickListTreeMenu"[/B],
pickListWidth:450,
pickListFields: [
{ name: "id" }
,{ name: "fieldId" }
]
}
]
Comment