ASP.NET Org Chart Component - Searching The Org Chart
In a traditional large organisation navigating the org chart can be difficult
and it takes some time to locate a specific person or department.
The OrgChart Component overcomes this by providing an in built search capability
to allow the end-users to search, find and then navigate to an item in the
organisation chart with the minimum of effort.
To configure the OrgChartComponent search facility the page developer simply
needs to:
- Set the CommandBar.Visible and
CommandBar.ShowSearch properties to
true
- Set the SearchSettings.SearchExpresion property to
configure the search. In this for example "name like '%{0}%'"
- Set the SearchSettings.DropDownResults property
to display more
than one search result . In this example : "{Last_Name}, {First_Name}"
And thats it! Now the end users will be able to enter their search into
the search box in the CommandBar and hit the search
link!
Code:
1:
2: // First display the search option
3: MyChart.CommandBarSettings.Visible = true;
4: MyChart.CommandBarSettings.ShowSearch = true;
5: // configure the drop down list used when multiple results are found
6: MyChart.SearchSettings.DropDownResults = "{Last_Name}, {First_Name}";
7:
8: // Configure the search expression. OrgChart replaces the {0} with the search text
9: MyChart.SearchSettings.SearchExpression = "name like '%{0}%'";
1: <cc1:DataBoundOrganisationChart ID="MyChart" runat="server"
2: DataSourceID="SqlDataSource1" LineColour="Blue" PrimaryKey="EmployeeId"
3: MaximumDepth="3" Width="100%" >
4: <SearchSettings SearchExpression="name like '%{0}%'" SearchLinkText="Find" DropDownResults="{Last_Name}, {First_Name}"/>
5: <ChartItem HtmlTemplate="<div>{First_Name} {Last_Name}</div>"></ChartItem>
6: <StackItem Colour="Yellow" HtmlTemplate="{First_Name} {Last_Name}" StackDepth="3" Enabled="True">
7: </StackItem>
8: <CommandBarSettings ShowSearch="True" Visible="True" ShowMaxDepth="false"/>
9: <NavigationBarSettings Visible="True" ShowHidePeersButton="false"/>
10: </cc1:DataBoundOrganisationChart>