Filter treeview with DataManager

[Dave]

Hi,

is it possible to use the DataManager to filter hierarchical data with the structure of:

{

     Id: string

     Name: string,

     Children: []

}

Currently, the data manager is used like this

const predicate = new Predicate("Name", "contains", filterValue, true);

const filteredList = new DataManager(this.fieldValues).executeLocal(new Query().where(predicate)) as any[];

but this only applies on the first level of the tree.

Edit: created my own algorithm to filter the treeview. However, I want the filtered nodes to be expanded. Setting the ":expandedNodes" property with the mapped "Id" property does not work. Why?

ref="treeViewReference"
           :fields="dataFields"
           :showCheckBox="showCheckBox"
           :expandedNodes="expandedNodes"
           @nodeChecked="onNodeChecked">

this.expandedNodes = this.flatten(this.myValues).map(m => m.MyIdProperty); // yields in an array of strings with the mapped IDs

[Indhumathy Loganathan]

Hi Dave, 

 

Thank you for contacting Syncfusion support. 

 

Query 1: Is it possible to use the DataManager to filter hierarchical data 

 

Currently, DataManager only has support for filtering the first level of the tree nodes and doesn’t support filtering of hierarchical data source. 

 

Query 2: "expandedNodes" property with the mapped "Id" property does not work 

 

We have checked your reported issue and expandedNodes is working properly at our end. We have prepared a sample based on this in the link: https://codesandbox.io/s/vue-template-forked-ef56o

We suspect that, the expandedNodes property value may be having wrong value. If you still face the issue, please modify the attached validation sample to replicate your issue. 

 

We also have another method called expandAll which expands all the collapsed nodes. You can call this method to expand all nodes after filtering  

Please refer the below links to know more about TreeView component, 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/treeview/getting-started/ 

 

Demos: https://ej2.syncfusion.com/vue/demos/#/material/treeview/default.html 

 

API References: https://ej2.syncfusion.com/vue/documentation/api/treeview/#treeviewcomponent 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Indhumathy L 

 

[Dave]

Ok somehow it is working now. Thanks for the demo.

Further, I want to set autoCheck to false, but it doesn't to have any effect.

I modified your example a little bit:

Sandbox

My expactation is that whenever I click a parent node, the children are not selected automatically.

Despite of that, is it possible to have a level-wise checkbox? Let's assume I only want to show the checkbox for the leafs or for the second level (getAllCheckedNodes, etc should be correct).

Edit: Databinding also not working for isChecked.

[Indhumathy Loganathan]

Hi Dave, 

 

As per your request, we have prepared a TreeView sample in Vue. In this sample, we have set autoCheck as false to prevent parent node selection while selecting child nodes. 

 

We also enabled the checkbox for the second level node of TreeView by using the below customization. 

 

.mytree .e-level-1 > .e-text-content .e-checkbox-wrapper { 

  display: none; 

} 

 

We have enabled the isChecked property for some TreeView nodes and printed the checked node items in console by using getallcheckednodes method of TreeView and it works fine. 

 

Please find the sample from the below link. 

 

https://codesandbox.io/s/vue-template-forked-dhlq5 

 

You can also refer to our documentation link where we have customized the TreeView nodes based on level. 

 

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

 

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

 

Regards, 

Indhumathy L

[Dave]

Ok, thanks for the example. I think I need to reinspect my application.

When I use autoCheck=true and hide the e-level-3, printing all checked nodes returns an incorrect number. 

I assume that happens because the checkboxes are just hidden but not bind to the tree nodes. 

The sample from me is changed: Sandbox changed (I hope you see the changes)

Currently, 4 nodes are checked: NGA, NG1, NG2, NG3. But it's expected that only NGA is checked as the other ones do not display a checkbox.

Is there a way to do it? I could implement it by myself but this would require a lot of JS/CSS interaction.

[Indhumathy Loganathan]

Hi Dave, 

 

We have validated your reported query. In our previous sample, we have hidden the parent node checkboxes from UI level using CSS but its behaviour and functionalities within TreeView will work in the same way. If you set autoCheck as true, the getAllChekcedNodes will return all the parent and child nodes while we check or uncheck a node.  

 

You can prevent this by setting autoCheck property as false. Please refer to the below sample. 

 

https://codesandbox.io/s/vue-template-forked-dhlq5 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L