I want to use my custom filter and not the one in the ngxTreeView

Question

The tree view items were display as it expected but I want to use my own filter and not the filter in ngx-treeview(please see the link below).

https://leovo2708.github.io/ngx-treeview/#/advanced

I have already mapped the items in tree view display. The next thing I want is to put these treeview items into our reusable dropdown. In this reusable dropdown we have filter text box.

What is the behavior of this dropdown?

Initially when this dropdown was opened, it has filter textbox and some suggested items (not in treeview display).
when we type something on the filter box, the treeview will appear and do some smart search from parent to last child nodes. (just like the behavior from the link I provided)
when I erase the words that I typed on the filter box, it will again display the initial suggested item(from no. 1).
also when the caret is clicked in this tree view it will perform API call wherein it will return data for the child nodes.
I also have difficulty to display the caret even if it has no child nodes. Because in our app, it will only have child nodes if the caret was clicked (Do API call)

I'm thinking to use the filter from the ngx treeview but I am having difficulty to replicate the behavior that I have mentioned(from number 1 to 5) and placed it to our reusable dropdown

at html `

  <ng-template #defaultHeaderTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand"  let-onCheckedChange="onCheckedChange" let-onFilterTextChange="onFilterTextChange">       
      <div *ngIf="config.hasFilter" class="row row-filter">       
        <div class="col-12">           
          <input class="form-control" type="text" [placeholder]="i18n.getFilterPlaceholder()" [(ngModel)]="filterText"   (ngModelChange)="onFilterTextChange($event)" />         
         </div>      
      </div>        

      <div *ngIf="hasFilterItems">         
        <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row row-all">          
          <div class="col-12">              <div class="form-check form-check-inline" *ngIf="config.hasAllCheckBox">            
            <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()"   [indeterminate]="item.indeterminate" />              
            <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">               
            {{i18n.getAllCheckboxText()}}             
            </label>             
          </div>             
            <label *ngIf="config.hasCollapseExpand" class="pull-right form-check-label" (click)="onCollapseExpand()">              
                <i [title]="i18n.getTooltipCollapseExpandText(item.collapsed)" aria-hidden="true" class="fa"   [class.fa-expand]="item.collapsed" [class.fa-compress]="! item.collapsed"></i>          
           </label>           
          </div>                            
      </div>      

      <div *ngIf="config.hasDivider" class="dropdown-divider"></div>   
      </div>  
    </ng-template>`

Reusable dropdown

  <button              
    id="dropdown-button"
    dropdownToggle
    type="button"
    class="btn btn-primary dropdown-toggle text-left dropdown-button-fe" >
    {{dropdownLabel.value}}<span class="caret float-right"></span>
  </button>
  <div class="menu">
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li role="menuitem">


        <input           
          #searchInput
          type="text"
          class="form-control"
          placeholder="search.." 
          (keyup) = "treeViewFilter($event)"
          />

      </li>   
      <li class="dropdown-item disabled list-box-title-fe" aria-disabled="true">suggested items</li>

      <div *ngIf="isFullHierarchy">
      <li>

          <ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
              <div class="form-inline row-item">
                <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
                  [class.fa-caret-down]="!item.collapsed"></i>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [disabled]="item.disabled"
                    [indeterminate]="item.indeterminate" />
                  <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">
                    {{item.text}}
                  </label>
                 </div>
              </div>
            </ng-template>
      </li>
    </div>


      <hr class="divider-browse-fe" />
      <li class="dropdown-item disabled">
        <input type="button" class="btn btn-link link-browse-fe" value="Display the Tree view"></li>
    </ul>
  </div>
</div>

The expected result:

the tree view items is displayed in the dropdown(this is done)

2.1 The filter text (from the link) is displayed initially and under it are suggested items. When we start to type words in the filter the treeview appears

2.2 Or used a custom filter but will behave just like the filter in the link (I prefer but having difficulty to implement it)

when the filter is empty, the items present were the suggested items.

HAVING DIFFICULTY TO IMPLEMENT IT

Caret will also appear even if there is no child nodes displayed.
Child nodes will appear if the caret is clicked

Actual result:

the tree view is separate from the reusable component
when I used the filter from reusable it will not search in the treeview

I want to use my custom filter and not the one in the ngxTreeView

0 Answers0