Dropdown Tree Functionaly Questions

[Zachary]

I have a 2 level tree.

1) When the tree opens the 2nd level is collapsed. is it possible to open with everything expanded by default?

2) How can I change the formatting of the 1st level parent items

3) How can I prevent the user from selecting a 1st level parent item and only allow the selecting of children items

4) How can I change the filtering to a custom filtering that I would write. Specifically if the person typed in a word that matched the 1st level it would show the first level item and all of it's children.

[Shalini Maragathavel]

Hi Zachary, 

Greetings from Syncfusion support. 

Query#1: When the tree opens the 2nd level is collapsed. is it possible to open with everything expanded by default? 

Based on your query, we suspect that you need to expand all the nodes at the initial rendering of Dropdown Tree. You can achieve your requirement by using the expanded field property of Dropdown Tree as demonstrated in the below code snippet, 

 

export class AppComponent { 

  public hierarchicalData: Object[] = [ 

    { 

      id: '01', 

      name: 'Local Disk (C:)', 

      expanded: true, 

      subChild: [ 

        { 

          id: '01-01', 

          name: 'Program Files', 

          expanded: true, 

          subChild: [ 

            { id: '01-01-01', name: 'Windows NT' }, 

          ], 

        }, 

        { 

          id: '01-02', 

          name: 'Users', 

          expanded: true, 

          subChild: [ 

            { id: '01-02-01', name: 'Smith' }, 

          ], 

        }, 

       

    }, 

  ]; 

  public fields: Object = { 

    dataSource: this.hierarchicalData, 

    value: 'id', 

    text: 'name', 

    child: 'subChild', 

    expanded: 'expanded', 

  }; 

} 

 

API Link: https://ej2.syncfusion.com/documentation/api/drop-down-tree/fieldsModel/#expanded 

Query#2: How can I change the formatting of the 1st level parent items 

Based on your query, we could understand that you need to apply custom styles for the first level node items of the Dropdown Tree. To achieve your requirement, we suggest you to use the below CSS, 

 

app.component.css 

.mytree .e-level-1 > .e-text-content .e-list-text { 

  font-style: italic; 

} 

----------------------------------------------------------------------- 

app.component.html 

  <ejs-dropdowntree  cssClass="mytree"  [fields]="fields"></ejs-dropdowntree> 

Please refer the below documentation for more information, 

Documentation: https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels/ 

Please find the below sample for your reference, 

Sample: https://stackblitz.com/edit/angular-wptu2w?file=app.component.ts 

Query#3: How can I prevent the user from selecting a 1st level parent item and only allow the selecting of children items

We have validated your reported query. Currently we don’t have support to prevent selection of parent node in Dropdown Tree. This requirement had already been considered as a feature and this will be included in any of our upcoming releases. Generally, we will plan any feature implementation based on customer request count, feature rank and Wishlist plan for some feature.    

  

You can track the feature status through the below link,  

  

https://www.syncfusion.com/feedback/21709/provide-option-to-prevent-the-parent-node-selection-in-dropdown-tree 

Query#4: How can I change the filtering to a custom filtering that I would write. Specifically if the person typed in a word that matched the 1st level it would show the first level item and all of it's children. 

We checked your query and would like to let you know that while entering the text to filter the values in the Dropdown Tree, it will return all the nodes(child and parent node) which contains the text. This is the default behavior of Dropdown Tree filtering. However, you can customize the filtering operation as per your requirement by using filtering event of Dropdown Tree.   

API Link: https://ej2.syncfusion.com/documentation/api/drop-down-tree#filtering 

Please let us know if you need any further assistance. 

Regards, 

Shalini M.  

[Zachary]

Hi Shalini,

These all work great, the one area of confusion I have is how to use the filtering event to change the dropdown options.

I'm not quite sure what field to change and what it needs to be updated to. Am I updating fields in the event itself?

-Zack

[Indhumathy Loganathan]

Hi Zach, 

 

Based on your updates, we understood that you want to show all the child nodes of the filtered parent node. As mentioned earlier, the Dropdown Tree component only returns the parent node/child node with matched text. However, currently we are checking the feasibility to achieve your requirement with Dropdown Tree component. We will update you further details on 1^st October, 2021. 

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Zachary]

Thanks for the update Indhumathy!

[Indhumathy Loganathan]

Hi Zach, 

 

Most welcome. 

 

We have prepared an Angular Dropdown Tree sample to show all child nodes of the filtered parent node. As mentioned earlier, we have used the filtering event to perform custom filtering operation by preventing the default operation using preventDefaultAction argument.  

 

Then we have filtered the nodes with matched search string, then retrieve the corresponding parent node for the filtered child node and all child nodes for the filtered parent node. Finally, updated the Dropdown Tree datasource with the filtered nodes. 

 

Refer to the below code snippet. 

 

filtering(args) { 

  let _text = args.text; 

  this.isFilter = true; 

  args.preventDefaultAction = true; 

  let predicats = [], 

    _array = [], 

    _filter = []; 

  if (_text == '') { 

    args.fields.dataSource = this.filterData; 

  } else { 

    let predicate = new Predicate('name', 'startswith', _text, true); 

    let filteredList = new DataManager(this.filterData).executeLocal( 

      new Query().where(predicate) 

    ); 

    for (let j = 0; j < filteredList.length; j++) { 

      _filter.push(filteredList[j]['id']); 

      let filters = this.getFilterItems(filteredList[j], this.filterData); 

      for (let i = 0; i < filters.length; i++) { 

        if (_array.indexOf(filters[i]) == -1 && filters[i] != null) { 

          _array.push(filters[i]); 

          if (filteredList[j].pid == undefined) { 

            predicats.push(new Predicate('pid', 'equal', filters[i], false)); 

          } 

          predicats.push(new Predicate('id', 'equal', filters[i], false)); 

        } 

      } 

    } 

    if (predicats.length == 0) { 

      args.fields.dataSource = []; 

    } else { 

      let query = new Query().where(Predicate.or(predicats)); 

      let newList = new DataManager(this.filterData).executeLocal(query); 

      args.fields.dataSource = newList; 

    } 

  } 

} 

 

//Find the Parent Nodes for corresponding childs and all childs for searched parent. 

public getFilterItems(fList, list) { 

  let nodes = []; 

  nodes.push(fList['id']); 

  let query2 = new Query().where('id', 'equal', fList['pid'], false); 

  let fList1 = new DataManager(list).executeLocal(query2); 

  if (fList1.length != 0) { 

    let pNode = this.getFilterItems(fList1[0], list); 

    for (let i = 0; i < pNode.length; i++) { 

      if (nodes.indexOf(pNode[i]) == -1 && pNode[i] != null) 

        nodes.push(pNode[i]); 

    } 

    return nodes; 

  } else { 

    let predicate = new Predicate('pid', 'equal', fList.id, false); 

    let filteredList = new DataManager(this.filterData).executeLocal( 

      new Query().where(predicate) 

    ); 

    for (let i = 0; i < filteredList.length; i++) { 

      nodes.push(filteredList[i]); 

    } 

  } 

  return nodes; 

} 

 

You can find the sample demonstrating the solution from below link. 

 

https://stackblitz.com/edit/angular-8qfruw-zd8ntd?file=app.component.ts 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L