• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / OrgChart / API / OrgChartProps / 

OrgChartProps

Represents the props of the KendoReact OrgChart component.

NameTypeDefaultDescription

ariaLabel?

string

Sets custom aria-label to the OrgChart. The default value is "Org Chart"

avatarField?

string

Specifies the field which will provide an avatar representation for the item. Defaults to avatar.

avatarType?

string

Specifies the type of the Avatar that will be rendered for the OrgChart item. Defaults to image.

cardHeight?

number

Specifies the height of the card of the OrgChart.

cardsColors?

string[]

Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.

cardWidth?

number

Specifies the width of the card of the OrgChart.

childrenField?

string

Specifies the name of the field which will provide an array representation of the item children.

className?

string

Sets additional classes to the OrgChart.

data?

any[]

Sets the data of the OrgChart.

expandField?

string

Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to expanded.

groupField?

string

Specifies the field by which the OrgChart data is grouped.

groupSubtitleHeight?

number

Specifies the height of the subtitle of the grouped OrgChart.

groupSubtitleRender?

React.ComponentType<OrgChartGroupSubtitleProps>

Defines the component that will be used for rendering each of the grouped OrgChart subtitle.

groupTitleHeight?

number

Specifies the height of the title of the grouped OrgChart.

groupTitleRender?

React.ComponentType<OrgChartGroupTitleProps>

Defines the component that will be used for rendering each of the grouped OrgChart title.

hasChildrenField?

string

Specifies the name of the field which indicates to the OrgChart that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature. Defaults to undefined.

height?

string | number

Specifies the width the OrgChart.

id?

string

Sets custom id to the OrgChart.

idField?

string

Specifies the name of the field which will provide a id for the item. Defaults to id.

itemRender?

React.ComponentType<OrgChartItemRenderProps>

Defines the component that will be used for rendering each of the OrgChart items.

navigatable?

boolean

Specifies if the OrgChart can be navigatable with keyboard. Defaults to true.

onExpandChange?

(ev: OrgChartExpandChangeEvent) => void

Fires when a node or group is expanded.

onGroupAction?

(ev: OrgChartActionEvent) => void

Triggers the group action event.

onItemAction?

(ev: OrgChartActionEvent) => void

Triggers the item action event.

onItemContextMenu?

(ev: OrgChartActionEvent) => void

Triggers the item contextmenu action event.

onItemDoubleClick?

(ev: OrgChartActionEvent) => void

Triggers the item double click action event.

showAvatar?

boolean

true Specifies if the Avatar inside the OrgChart's cards will be displayed or not.

style?

React.CSSProperties

The styles that are applied to the OrgChart.

subtitleField?

string

Specifies the name of the field which will provide a subtitle representation for the item. Defaults to subtitle.

titleField?

string

Specifies the name of the field which will provide a title representation for the item. Defaults to text.

verticalLine?

number

Specifies the height of the vertical line of the OrgChart.

In this article

Not finding the help you need?

Contact Support