Ability to filter by node so that user can see its parent and its child nodes only.

[Sandip]

Hello,

I am using this diagram control to show org chart , it works quite nice, this is the sample i am using.

ASP.NET Core Diagram Overview Panel Example - Syncfusion Demos

Now what i want is ability to filter by parent node

here is my cshtml code

    <ejs-diagram id="diagram" width="100%" height="100%" setNodeTemplate="@ViewBag.setNodeTemplate" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="Test.organisationalChart.diagramCreated">

        <e-diagram-datasourcesettings id="EMPLOYEE_ID" parentId="SUPERVISOR_ID" dataSource="new DataManager(){ Data = (List<Fishawack.SuiteTools.Web.Models.PoC.OrganisationalChartViewModel>)Model}"></e-diagram-datasourcesettings>

        <e-diagram-layout type="OrganizationalChart" horizontalSpacing="15" verticalSpacing="50"></e-diagram-layout>

        <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>

        <e-diagram-scrollsettings scrollLimit="Diagram" currentZoom="0.75" ></e-diagram-scrollsettings>

    </ejs-diagram>

Below is the screen shot how i would like to implemet

[Gowtham Gunashekar]

Hi Sandip,  

 

Please refer to the following sample for how to filter a particular parent and its children in the organizational chart. In the sample we have added the drop-down button with parent and based on the parent selection in the drop down we display the select parent and its children alone in the diagram. In the sample when change the value in the drop down, we made all the nodes and connector visibility as false and show only the selected node and its children.  

 

First, we can get the node of the selected name in the drop-down and loop through the outEdges property of the node which contains the out connect connectors and using this connector’s targetID we can get the children nodes of the parent, by recursively get the parent and its child and its grandchild and make those nodes and its dependent connector visible we can achieve you requirement.  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/teamChartFilter-855744024.zip 

 

Regards 

 

Gowtham