DxTreeList

The DxTreeList component is used for displaying the data in the form of multi-column tree view.

info

For more details, refer to DxTreeList page.

Props

Attribute	Description	Type	Default
dataSource	Binds the IU component to data	array
activeStateEnabled	Specifies whether the UI component changes its visual state as a result of user interaction.	boolean	false
allowColumnReordering	Defines whatever the user can reorder columns	boolean	false
cacheEnabled	Specifies whether data should be cached.	boolean	true
cellHintEnabled	Enables a hint when the user hovers the mouse over the cell with truncated content	boolean	false
columnAutoWidth	Defines whether columns should adjust their width to content	boolean	true
columnMinWidth	Specifies the minimum width of the columns	number
columnWidth	Specifies the width of the columns	string
columnResingMode	Specifies how the user resize columns. Activated only if the allowColumnResizing is true.	string
columnHidingEnabled	Defines whatever the IU component should hide components to adept to the container size or to the screen. Does not work if allowColumnResizing is true and columnResizingMode is 'widget'.	boolean	false
dateSerializationFormat	Specifies the format in which date-time values should be sent to the server.	string	undefined
disabled	Specifies if the current component is disabled or not	boolean	false
headerFilter	Adds header filter feature	Object	false
highlightChanges	Specifies whether to highlight rows and cells with edited data. To activate it repaintChangesOnly should be true.	boolean	false
focusedRowEnabled	Specifies whether the focused row feature is enabled.	boolean	false
noDataText	Defines the text string when there is no data shown in the treelist.	string
repaintChangesOnly	Specifies whether to repaint only those cells whose data changed.	boolean	false
rowAlternationEnabled	Defines whether the rows should be shaded differently.	boolean	false
showborders	Specifies whether the outer borders of the UI component are visible.	boolean	false
showColumnHeaders	Defines if the columns header should be visible or not.	boolean	false
showColumnLines	Specifies if the lines between columns are visible or not.	boolean	true
showRowLines	Specifies if the horizontal lines between rows are visible or not.	boolean	true
wordWrapEnabled	Specifies whether text does not fit into a column should be wrapped.	boolean	false
rootValue	Defines the root node's identifier.	any	'0'
expandedRowKeys	Expands specifies rows and specifies keys of expanded rows.	array
keyExpr	Defines the key property that provides key values to access each data items.	string	'id'
datastructure	Notifies the UI component of the used data structure.	string	'plain'
itemsExpr	Specifies which data field contains nested structure.	string
parentIdExpr	Specifies which data field provides parent key.	string	'hid'
visible	Visibility of DxTreeList component	boolean	true

Events

Attribute	Description
onEditorPrepared(No Parameter)	Executed after editor is created.
onSelectionChanged(selected)	Executed after selecting a row.
onRowClick(e)	Executed when a row is clicked or tapped.
onCellClick(e)	Executed when a cell is clicked or tapped
onOptionChanged(event)	Executed after UI component property is changed.

Samples Component

DxTreeList Bar Usage

You can manage some properties with this bar:

DxSearchPanel

DxFilterRow

DxHeaderFilter

DxSelection

DxColumnChooser

DxTreelist Column Background Change Sample

You can set the color of the column with cssClass.

DxTreeList Color Sample:

dxTreeList-color

DxTreelist Edit Sample

In the DxTreelist component we can edit the data. To edit the data, the component must have DxEditing. After adding that user can customize it using Mode property which have 'batch' , 'cell' , 'row' ,'form' , 'popup' options. According to these options users can update their data. To correctly use it the allowUpdating property must be true.

DxTreeList Edit Sample:

dxTreelist-editing

DxTreelist Column Reorder Sample

DxTreeList Column Reorder Sample:

dxTreelist-columnreodering

DxTreelist External Filter Sample

DxTreeList Extarnel Filter Sample:

dxTreelist-extarnelfiltre

DxTreelist Array Store Live Connection Sample

DxTreeList Array Store Live Sample:

DxTreeListArrStoreLiveCon