Google Organizational Chart control

Official Content
This documentation is valid for:

This control shows an organizational chart that support selection.

Example

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"
  &list.Add(&item)

  &item = new()
  &item.Text = "Steve"
  &list.Item(1).Children.Add(&item)

  &item = new()
  &item.Text = "Paul"
  &list.Item(1).Children.Item(1).Children.Add(&item)

  &item = new()
  &item.Text = "Aaron"
  &list.Item(1).Children.Item(1).Children.Add(&item)
  organizationalChart1.Reload = true
EndSub

 

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).

OrganizationalChart-runtime

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
    msg(organizationalChart1.SelectedItem)
EndEvent

Implementation details

Organizational Chart Control is based on Google Organizational Chart.