Flexible and versatile organisational charts for ASP.NET using
Org Chart Component.

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:

  1. Set the CommandBar.Visible and CommandBar.ShowSearch properties to true
  2. Set the SearchSettings.SearchExpresion property to configure the search.  In this for example "name like '%{0}%'"
  3. 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!

Organisation Chart Commands   Find
Tina Smith
Mike Towersey
Andrea Reeth
Belinda Swindon
Daz Bell
Belinda Richmond
Caz Hale
Debra Peterson
Terry Partridge
Sheila Thirsk
Dennis Thomas
Thomas Paradoy
Andrew Downton
Bella Brompton
Bill Gruff
Fran Fluff
Hank Hearty
David George


C# Code

   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}";
   8:          // Configure the search  expression.  OrgChart replaces the {0} with the search text
   9:          MyChart.SearchSettings.SearchExpression = "name like '%{0}%'";

Html Markup

   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="&lt;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>