Edit Data
- 4 minutes to read
Obtain and Set Node Values in Code
You can use the TreeViewControl‘s methods to obtain and change node values.
| Method | Description |
|---|---|
| GetNodeValue(TreeListNode) | Returns the value of the specified node. |
| GetNodeDisplayText(TreeListNode) | Returns the text displayed within the specified node. |
| SetNodeValue(TreeListNode, Object) | Sets the value of the specified node. |
For information on how to obtain nodes, refer to the following help topic: Obtain Nodes and Their Row Handles.
In-place Editors
The TreeViewControl uses the DevExpress Data Editors to edit node values.
To allow users to edit the TreeViewControl, set the AllowEditing property to true.
The TreeViewControl uses an in-place editor based on data type. For example, the TreeViewControl uses the TextEdit to edit text/string values, and the CheckEdit to edit Boolean values.
Use the EditSettings property to manually define the editor.
The following code sample applies a mask that allows users to enter letters, dots, and spaces.
<dxg:TreeViewControl ...
AllowEditing="True">
<dxg:TreeViewControl.EditSettings>
<dxe:TextEditSettings MaskType="Regular" Mask="[A-Za-z. ]*"/>
</dxg:TreeViewControl.EditSettings>
</dxg:TreeViewControl>
Each editor has a helper class responsible for the editor’s functionality.
- BarCodeEditSettings
- CheckEditSettings
- ColorEditSettings
- HyperlinkEditSettings
- ImageEditSettings
- ListBoxEditSettings
- PasswordBoxEditSettings
- RatingEditSettings
- SparklineEditSettings
- TextEditSettings
- CalcEditSettings
- DateEditSettings
- LookUpEditSettingsBase
- MemoEditSettings
- PopupColorEditSettings
- PopupImageEditSettings
- SpinEditSettings
- ToggleSwitchEditSettings
NodeContent Template
The editor’s helper class has a limited number of settings. If these settings are not suitable for your task, you can use the NodeContentTemplate property. In the template, set an editor for the TreeViewControl and specify the editor’s settings.
The following code sample displays wrapped text in the TreeViewControl‘s nodes and in their editors:
<dxg:TreeViewControl ...
AllowEditing="True">
<dxg:TreeViewControl.NodeContentTemplate>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" TextWrapping="Wrap" MaxWidth="100"/>
</DataTemplate>
</dxg:TreeViewControl.NodeContentTemplate>
</dxg:TreeViewControl>
For the DevExpress Data Editors (the BaseEdit class descendants), you can set the editor’s Name property to PART_Editor. In this case, the TreeViewControl adjusts its appearance and synchronizes the editor with the source field specified by the TreeViewFieldName property.
Display and Edit Templates
You can use different in-place editors to display and edit data. The TreeViewControl includes templates that allow you to define editors that display (when the control is in browse mode) and edit (when the control is in edit mode) node values:
| Template | Description |
|---|---|
| NodeContentDisplayTemplate | The template that displays node values. |
| NodeContentEditTemplate | The template that displays an editor used to edit node values. |
The following code sample wraps text in browse mode and adds a delete button in edit mode:
<dxg:TreeViewControl ...
AllowEditing="True">
<dxg:TreeViewControl.NodeContentDisplayTemplate>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" TextWrapping="Wrap" MaxWidth="130"/>
</DataTemplate>
</dxg:TreeViewControl.NodeContentDisplayTemplate>
<dxg:TreeViewControl.NodeContentEditTemplate>
<DataTemplate>
<dxe:ButtonEdit Name="PART_Editor" AllowDefaultButton="False">
<dxe:ButtonEdit.Buttons>
<dxe:DeleteButtonInfo IsDefaultButton="True" />
</dxe:ButtonEdit.Buttons>
</dxe:ButtonEdit>
</DataTemplate>
</dxg:TreeViewControl.NodeContentEditTemplate>
</dxg:TreeViewControl>
For the DevExpress Data Editors (the BaseEdit class descendants), you can set the editor’s Name property to PART_Editor. In this case, the TreeViewControl adjusts its appearance and synchronizes the editor with the source field specified by the TreeViewFieldName property.
Editor Events
The TreeViewControl includes the following events to process user actions:
| Event | Description |
|---|---|
| ShowingEditor | Occurs before a node’s editor is opened. Allows you to prevent the activation of the editor. |
| ShownEditor | Occurs after a node’s editor is opened. |
| HiddenEditor | Occurs after a node’s editor is closed. |
The following code sample prevents the activation of the root node’s editor.
<dxg:TreeViewControl x:Name="treeview"
...
AllowEditing="True"
ShowingEditor="treeview_ShowingEditor"/>
void treeview_ShowingEditor(object sender, DevExpress.Xpf.Grid.TreeList.TreeViewShowingEditorEventArgs e) {
e.Cancel = e.Node.Level == 0;
}
Validate Data
The TreeViewControl allows you to validate data input.
Handle the ValidateNode event.
Use the ValidationEventArgs.Value property to obtain an entered value that should be validated. If a node’s value fails validation, set the ValidationEventArgs.IsValid property to false. In this case, a user cannot move focus to another node until the node’s value is valid. To disable this behavior, set the AllowLeaveInvalidEditor property to true.
Use the ValidationEventArgs.ErrorType and ValidationEventArgs.ErrorContent properties to specify an icon and an error description.
<dxg:TreeViewControl x:Name="treeview"
AllowEditing="True"
ValidateNode="treeview_ValidateNode"
... />
void treeview_ValidateNode(object sender, DevExpress.Xpf.Grid.TreeList.TreeViewNodeValidationEventArgs e) {
e.IsValid = (e.Value != null) && (e.Value.ToString().Length >= 5);
e.ErrorType = DevExpress.XtraEditors.DXErrorProvider.ErrorType.Warning;
e.ErrorContent = "The name must contain at least 5 characters.";
}
The TreeViewControl does not raise the ValidateNode event when you change node values in code. To allow the control to validate these changes, set the AllowLeaveInvalidEditor property to true.