Google Organizational Chart control

Official Content
This documentation is valid for:

This control shows an organizational chart that support selection.


The user control is really simple, you just need to set one property in order to get the control working: the VisualizationData property.

Show a simple chart to illustrate a hierarchical model of an organization

  • Drag and drop OrganizationalChart.
  • Assign to VisualizationData property a variable based on OrganizationalChart data type (this SDT is automatically imported when dropping the control to the web form).
  • Load the information that will be shown by the chart using the previous mentioned variable.
Sub 'LoadOrganizationalChart'
  &item.Text = "John"
  &item.Tooltip = "Tooltip for John"

  &item = new()
  &item.Text = "Steve"

  &item = new()
  &item.Text = "Paul"

  &item = new()
  &item.Text = "Aaron"
  organizationalChart1.Reload = true


Note: &item is based on OrganizationalChartSDT.OrganizationalChartItem and &list is based on OrganizationalChartSDT (this SDT is also automatically imported when dropping the control to a web form).


Handling events

As we mentioned before, Organizational Chart Control is an interactive chart. That is, when clicking on an item, a GeneXus event wil be fired.

Event organizationalChart1.Selected

Implementation details

Organizational Chart Control is based on Google Organizational Chart.

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.