Class TreeDropdownComponent

Base class for all Angular components in the MemberJunction system.

Hierarchy (View Summary)

BaseAngularComponent
- TreeDropdownComponent

Implements

OnInit
OnDestroy
AfterViewInit

Index

Constructors

constructor

Accessors

ProviderToUse RunQueryToUse RunReportToUse RunViewToUse Value

Constructors

constructor

new TreeDropdownComponent(
cdr: ChangeDetectorRef,
renderer: Renderer2,
): TreeDropdownComponent
Parameters
- cdr: ChangeDetectorRef
- renderer: Renderer2
Returns TreeDropdownComponent
Overrides BaseAngularComponent.constructor
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:263

Properties

AfterDataLoad

AfterDataLoad: EventEmitter<AfterDataLoadEventArgs> = ...

AfterDropdownClose

AfterDropdownClose: EventEmitter<AfterDropdownCloseEventArgs> = ...

AfterDropdownOpen

AfterDropdownOpen: EventEmitter<AfterDropdownOpenEventArgs> = ...

AfterNodeSelect

AfterNodeSelect: EventEmitter<AfterNodeSelectEventArgs> = ...

AfterSearch

AfterSearch: EventEmitter<AfterSearchEventArgs> = ...

AutoLoad

AutoLoad: boolean = true

Auto-load data on init

BeforeDataLoad

BeforeDataLoad: EventEmitter<BeforeDataLoadEventArgs> = ...

BeforeDropdownClose

BeforeDropdownClose: EventEmitter<BeforeDropdownCloseEventArgs> = ...

BeforeDropdownOpen

BeforeDropdownOpen: EventEmitter<BeforeDropdownOpenEventArgs> = ...

BeforeNodeSelect

BeforeNodeSelect: EventEmitter<BeforeNodeSelectEventArgs> = ...

BeforeSearch

BeforeSearch: EventEmitter<BeforeSearchEventArgs> = ...

BranchConfig

BranchConfig: TreeBranchConfig

Branch (category) entity configuration - REQUIRED

Clearable

Clearable: boolean = true

Show clear button

DefaultExpansion

DefaultExpansion: "none" | "first-level" | "all" = 'first-level'

Initial expansion for the inner tree when it first loads (see TreeComponent.DefaultExpansion).

Disabled

Disabled: boolean = false

Disabled state

DropdownConfig

DropdownConfig: TreeDropdownConfig = {}

Dropdown configuration

dropdownPanel

dropdownPanel: ElementRef<HTMLElement>

EnableSearch

EnableSearch: boolean = true

Enable search filtering

IsLoaded

IsLoaded: boolean = false

Has data loaded

IsLoading

IsLoading: boolean = false

Is tree loading

IsOpen

IsOpen: boolean = false

Is dropdown open

`Optional`LeafConfig

LeafConfig?: TreeLeafConfig

Optional leaf entity configuration

Placeholder

Placeholder: string = 'Select...'

Placeholder text when nothing selected

Position

Position: DropdownPosition | null = null

Dropdown position

Provider

Provider: IMetadataProvider | null

If specified, this provider will be used for communication and for all metadata purposes. By default, if not provided, the Metadata and RunView classes are used for this and the default GraphQLDataProvider is used which is connected to the same back-end MJAPI instance as the Metadata and RunView classes. If you want to have this component connect to a different MJAPI back-end, create an instance of a ProviderBase sub-class like GraphQLDataProvider/etc, and configure it as appropriate to connect to the MJAPI back-end you want to use, and then pass it in here.

SearchConfig

SearchConfig: TreeSearchConfig = {}

Search configuration

searchInput

searchInput: ElementRef<HTMLInputElement>

SearchText

SearchText: string = ''

Search text

SelectableTypes

SelectableTypes: TreeSelectableTypes = 'both'

What types can be selected: 'branch', 'leaf', or 'both'

SelectedNodes

SelectedNodes: TreeNode[] = []

Selected nodes (for display)

SelectionChange

SelectionChange: EventEmitter<TreeNode | TreeNode[] | null> = ...

Emitted with full node(s) when selection changes

SelectionMode

SelectionMode: TreeSelectionMode = 'single'

Selection mode: 'single' or 'multiple'

ShowIconInDisplay

ShowIconInDisplay: boolean = true

Show node icons in display

ShowLoadingInTrigger

ShowLoadingInTrigger: boolean = true

Show loading in trigger

StyleConfig

StyleConfig: TreeStyleConfig = {}

Style configuration

treeComponent

treeComponent: TreeComponent

triggerElement

triggerElement: ElementRef<HTMLElement>

ValueChange

ValueChange: EventEmitter<CompositeKey | CompositeKey[] | null> = ...

Emitted when value changes

`Static`ɵdir

"ɵdir": unknown

`Static`ɵfac

"ɵfac": unknown

Accessors

ProviderToUse

get ProviderToUse(): IMetadataProvider
Returns either the default Metadata provider or the one specified in the Provider property, if it was specified

Returns IMetadataProvider
Inherited from BaseAngularComponent.ProviderToUse
- Defined in base-types/dist/base-angular-component.d.ts:17

RunQueryToUse

get RunQueryToUse(): IRunQueryProvider
Returns either the default RunQuery provider or the one specified in the Provider property, if it was specified

Returns IRunQueryProvider
Inherited from BaseAngularComponent.RunQueryToUse
- Defined in base-types/dist/base-angular-component.d.ts:25

RunReportToUse

get RunReportToUse(): IRunReportProvider
Returns either the default RunReport provider or the one specified in the Provider property, if it was specified

Returns IRunReportProvider
Inherited from BaseAngularComponent.RunReportToUse
- Defined in base-types/dist/base-angular-component.d.ts:29

RunViewToUse

get RunViewToUse(): IRunViewProvider
Returns either the default RunView provider or the one specified in the Provider property, if it was specified

Returns IRunViewProvider
Inherited from BaseAngularComponent.RunViewToUse
- Defined in base-types/dist/base-angular-component.d.ts:21

Value

get Value(): CompositeKey | CompositeKey[] | null
Returns CompositeKey | CompositeKey[] | null
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:144
set Value(val: CompositeKey | CompositeKey[] | null): void
The selected value as a CompositeKey (single select) or array of CompositeKeys (multi-select). CompositeKey supports both simple single-field primary keys and composite primary keys.
Parameters
- val: CompositeKey | CompositeKey[] | null
Returns void
Example: Single select with simple ID:
```
dropdown.Value = CompositeKey.FromID('some-guid');
```
Example: Single select with composite key:
```
dropdown.Value = new CompositeKey([
  { FieldName: 'Field1', Value: 'value1' },
  { FieldName: 'Field2', Value: 'value2' }
]);
```
Example: Multi-select:
```
dropdown.Value = [
  CompositeKey.FromID('guid1'),
  CompositeKey.FromID('guid2')
];
```
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:132

Methods

Clear

Clear(event?: MouseEvent): void
Clear selection
Parameters
- Optionalevent: MouseEvent
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:407

Close

Close(reason?: "selection" | "escape" | "outsideClick" | "programmatic"): void
Close the dropdown
Parameters
- reason: "selection" | "escape" | "outsideClick" | "programmatic" = 'programmatic'
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:368

getDisplayColor

getDisplayColor(): string | null
Get display color for single selection

Returns string | null
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1189

getDisplayIcon

getDisplayIcon(): string | null
Get display icon for single selection

Returns string | null
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1179

getDisplayText

getDisplayText(): string
Get display text for selected value(s)

Returns string
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1153

getDropdownStyles

getDropdownStyles(): Record<string, string>
Get dropdown panel styles

Returns Record<string, string>
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1206

getSelectedIDsArray

getSelectedIDsArray(): string[]
Get selected IDs as a string array for passing to tree component. Extracts the first key value from each CompositeKey (typically the ID field).

Returns string[]
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1236

getTriggerClasses

getTriggerClasses(): Record<string, boolean>
Get trigger classes

Returns Record<string, boolean>
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1222

hasSelection

hasSelection(): boolean
Check if has selection

Returns boolean
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:1199

ngAfterViewInit

ngAfterViewInit(): void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:283

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:291

ngOnInit

ngOnInit(): void
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns void
Implementation of OnInit.ngOnInit
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:272

onClearSearch

onClearSearch(): void
Handle clear search

Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:527

onSearchInput

onSearchInput(event: Event): void
Handle search input
Parameters
- event: Event
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:475

onSearchKeyDown

onSearchKeyDown(event: KeyboardEvent): void
Handle search keydown — provides full keyboard navigation while search input retains focus. The tree's own keyboard handler doesn't fire because the search input has DOM focus, so all navigation is handled here by manipulating the tree's FocusedNode visual state.
Parameters
- event: KeyboardEvent
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:486

onTreeAfterDataLoad

onTreeAfterDataLoad(event: AfterDataLoadEventArgs): void
Parameters
- event: AfterDataLoadEventArgs
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:577

onTreeAfterNodeSelect

onTreeAfterNodeSelect(event: AfterNodeSelectEventArgs): void
Parameters
- event: AfterNodeSelectEventArgs
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:612

onTreeBeforeDataLoad

onTreeBeforeDataLoad(event: BeforeDataLoadEventArgs): void
Handle tree data load events
Parameters
- event: BeforeDataLoadEventArgs
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:570

onTreeBeforeNodeSelect

onTreeBeforeNodeSelect(event: BeforeNodeSelectEventArgs): void
Bubble tree events
Parameters
- event: BeforeNodeSelectEventArgs
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:608

onTreeSelectionChange

onTreeSelectionChange(nodes: TreeNode[]): void
Handle tree selection change
Parameters
- nodes: TreeNode[]
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:538

onTriggerClick

onTriggerClick(): void
Handle trigger click

Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:441

onTriggerKeyDown

onTriggerKeyDown(event: KeyboardEvent): void
Handle trigger keydown
Parameters
- event: KeyboardEvent
Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:451

Open

Open(): void
Open the dropdown

Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:334

Refresh

Refresh(): Promise<void>
Refresh tree data

Returns Promise<void>
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:428

Toggle

Toggle(): void
Toggle dropdown

Returns void
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:396

WaitForDataLoad

WaitForDataLoad(): Promise<void>
Returns a promise that resolves when the tree data has finished loading. If data is already loaded, the promise resolves immediately.

Use this method when you need to perform operations that depend on the tree being fully loaded, such as programmatically selecting nodes or accessing the tree structure.

Note: For setting initial values, you typically don't need this method - just set the Value input and the component will automatically display the correct text by looking up the record name via Metadata.

Returns Promise<void>
A promise that resolves when the tree data is loaded
Example
```
// Wait for tree to load before accessing tree structure
await treeDropdown.WaitForDataLoad();
const nodes = treeDropdown.treeComponent.Nodes;
```
- Defined in trees/src/lib/tree-dropdown/tree-dropdown.component.ts:322

Class TreeDropdownComponent

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns TreeDropdownComponent

Properties

AfterDataLoad

AfterDropdownClose

AfterDropdownOpen

AfterNodeSelect

AfterSearch

AutoLoad

BeforeDataLoad

BeforeDropdownClose

BeforeDropdownOpen

BeforeNodeSelect

BeforeSearch

BranchConfig

Clearable

DefaultExpansion

Disabled

DropdownConfig

dropdownPanel

EnableSearch

IsLoaded

IsLoading

IsOpen

OptionalLeafConfig

Placeholder

Position

Provider

SearchConfig

searchInput

SearchText

SelectableTypes

SelectedNodes

SelectionChange

SelectionMode

ShowIconInDisplay

ShowLoadingInTrigger

StyleConfig

treeComponent

triggerElement

ValueChange

Staticɵdir

Staticɵfac

Accessors

ProviderToUse

Returns IMetadataProvider

RunQueryToUse

Returns IRunQueryProvider

RunReportToUse

Returns IRunReportProvider

RunViewToUse

Returns IRunViewProvider

Value

Returns CompositeKey | CompositeKey[] | null

Parameters

Returns void

Example: Single select with simple ID:

Example: Single select with composite key:

Example: Multi-select:

Methods

Clear

Parameters

Returns void

Close

Parameters

Returns void

getDisplayColor

Returns string | null

getDisplayIcon

Returns string | null

`Optional`LeafConfig

`Static`ɵdir

`Static`ɵfac