OrgChartProps

Premium

Represents the props of the KendoReact OrgChart component.

Name	Type	Default	Description
ariaLabel?	string		Sets custom aria-label to the OrgChart. The default value is "Org Chart"
avatarField?	string	"avatar"	Sets the field which provides an avatar representation for the item.
avatarType?	string	"image"	Sets the type of the Avatar that renders for the OrgChart item.
cardHeight?	number		Sets the height of the card of the OrgChart.
cardsColors?	string[]		Sets a string array with the colors for the items. By default the colors come from the current Kendo Theme.
cardWidth?	number		Sets the width of the card of the OrgChart.
childrenField?	string		Sets the name of the field which provides 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	"expanded"	Sets the name of the field which provides a Boolean representation for the expanded state of the item.
groupField?	string		Sets the field by which the OrgChart data is grouped.
groupSubtitleHeight?	number		Sets the height of the subtitle of the grouped OrgChart.
groupSubtitleRender?	React.ComponentType<OrgChartGroupSubtitleProps>		Sets the component that renders each of the grouped OrgChart subtitle.
groupTitleHeight?	number		Sets the height of the title of the grouped OrgChart.
groupTitleRender?	React.ComponentType<OrgChartGroupTitleProps>		Sets the component that renders each of the grouped OrgChart title.
hasChildrenField?	string	undefined	Sets 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.
height?	string | number		Sets the height of the OrgChart.
id?	string		Sets custom id to the OrgChart.
idField?	string	"id"	Sets the name of the field which provides an id for the item.
itemRender?	React.ComponentType<OrgChartItemRenderProps>		Sets the component that renders each of the OrgChart items.
navigatable?	boolean	true	Sets if the OrgChart can be navigated with the keyboard. jsx <OrgChart navigatable={false} />
onExpandChange?	(ev: OrgChartExpandChangeEvent) => void		Fires when a node or group is expanded. jsx <OrgChart onExpandChange={(ev) => console.log('Expanded:', ev)} />
onGroupAction?	(ev: OrgChartActionEvent) => void		Triggers the group action event. jsx <OrgChart onGroupAction={(ev) => console.log('Group action:', ev)} />
onItemAction?	(ev: OrgChartActionEvent) => void		Triggers the item action event. jsx <OrgChart onItemAction={(ev) => console.log('Item action:', ev)} />
onItemContextMenu?	(ev: OrgChartActionEvent) => void		Triggers the item context menu action event. jsx <OrgChart onItemContextMenu={(ev) => console.log('Context menu:', ev)} />
onItemDoubleClick?	(ev: OrgChartActionEvent) => void		Triggers the item double-click action event. jsx <OrgChart onItemDoubleClick={(ev) => console.log('Item double-clicked:', ev)} />
showAvatar?	boolean	true	Sets if the Avatar inside the OrgChart's cards is displayed.
style?	React.CSSProperties		Sets additional CSS styles to the OrgChart.
subtitleField?	string	"subtitle"	Sets the name of the field which provides a subtitle representation for the item.
titleField?	string	"text"	Sets the name of the field which provides a title representation for the item.
verticalLine?	number		Sets the height of the vertical line of the OrgChart.