buildesk-tree-select

Description

buildesk-tree-select provide single multiple selection with hierarchy view. buildesk-tree-select is a highly customizable tree-based dropdown component for Angular applications. It supports both single and multiple selections with hierarchical data, making it ideal for use cases like category and nested data structures.

Demo

Stackblitz Demo

Installation

npm i buildesk-tree-select

Usage

import BuildeskTreeSelectModule module in your module file

import { NgModule } from '@angular/core';
import { BuildeskTreeSelectModule } from 'buildesk-tree-select';

@NgModule({
  declarations: [],
  imports: [
    BuildeskTreeSelectModule
  ],
  providers: []
})
export class AbcModule { }

Features

• Single selection in tree view
• Multiple selection in tree view
• Ultimate hierarchy view

Code Example

# Example code snippet
1. customize with properties 
<buildesk-tree-select
    [items]="data"
    [(ngModel)]="selectedUsers"
    [titleCase] = "true"
    [bindLabel] = "'Name'"
    [bindValue] = "'Id'"
    [includeEntireObject] = "true"
    [groupBy] = "'SubManagers'"
    [noDataFoundText] = "'No Managers Found'"
    [placeHolder] = "'Select Sub Manager'"
    [closeOnSelect] = "false"
    [clearable] = "true"
    [clearAllText] = "'Remove All'"
    [dropdownOpen] = "true"
    [readonly] = "false"
    [multiple] = "true"
    [dropdownPosition] = "'auto'"
    [searchable] = "true"
    [expandable] = "true"
    (open)="func('open',$event)"
    (close)="func('close',$event)"
    (change)="func('change',$event)"
    (select)="func('select',$event)"
    (clear)="func('clear',$event)"
    (clearAll)="func('clearAll',$event)"
    (search)="func('search',$event)"
    (scroll)="func('scroll',$event)"
    >
</buildesk-tree-select>

2. customize with config 
<buildesk-tree-select
    [items]="data"
    [config]="config" 
    [(ngModel)]="selectedUsers"
    (open)="func('open',$event)"
    (close)="func('close',$event)"
    (change)="func('change',$event)"
    (select)="func('select',$event)"
    (clear)="func('clear',$event)"
    (clearAll)="func('clearAll',$event)"
    (search)="func('search',$event)"
    (scroll)="func('scroll',$event)"
    >
</buildesk-tree-select>

config = {
  titleCase: true,
  bindLabel: "Name",
  bindValue: "Id",
  includeEntireObject: true,
  groupBy: "SubManagers",
  noDataFoundText: "No Managers Found",
  placeHolder: "Select Sub Manager",
  closeOnSelect: false,
  clearable: true,
  clearAllText: "Remove All",
  dropdownOpen: true,
  readonly: false,
  multiple: true,
  dropdownPosition: "auto",
  searchable: true,
  expandable: true
}

Properties

Inputs

Properties	Description	Values	Default Value
items	Data which you want to bind
titleCase	Convert text to title case	true, false	true
bindLabel	Field name to display		Name
bindValue	Field name to bind		Id
includeEntireObject	Return whole object of selected node	true, false	false
groupBy	Group items by this field		children
noDataFoundText	Text to show when no data found		No Data Found
placeHolder	Placeholder text		Select Data
closeOnSelect	Close dropdown after selection	true, false	true
clearable	Allow clearing selection	true, false	true
clearAllText	Text for clearing all selections		Remove All
dropdownOpen	Open dropdown by default	true, false	false
readonly	Make dropdown read-only	true, false	false
multiple	Allow multiple selections	true, false	false
dropdownPosition	Position of dropdown	auto, top, bottom	auto
searchable	Allow searching elements	true, false	true
clearSearchOnAdd	Allow clear search input text after select	true, false	true
expandable	Allow expand collapse selection	true, false	true
height	Allow to give custom max height	em, rem, px (any unit)	350px
width	Allow to give custom max width	em, rem, px (any unit)	250px

Outputs

events	Description	Value return
open	Fired on modal opened	true
close	Fired on modal closed	true
change	Fired on any element selected or clear	selected element object
select	Fired on any element selected	selected element object
clear	Fired on remove element	removed element object
clearAll	Fired on remove all elements	true
search	Fired on search	searched text, with filtered data
scroll	Fired on scroll	true

Contact

• For any bugs, improvements or queries, contact: [e-mail]