Version

Editing (xamDataTree)

The xamDataTree™ control allows your end users to edit data in the tree’s nodes. You can enable editing on the xamDataTree control by setting the TreeEditingSettings object’s AllowEditing property to True. You can also enable or disable editing on different node levels by setting the TreeEditingSettingsOverride object’s properties. The TreeEditingSettingsOverride object takes precedence over the TreeEditingSettings object.

The following code demonstrates how to enable editing on xamDataTree and how to disable it on the Products level.

In XAML:

<ig:XamDataTree x:Name="MyTree">
   <ig:XamDataTree.EditingSettings>
      <ig:TreeEditingSettings AllowEditing="True"/>
   </ig:XamDataTree.EditingSettings>
   <ig:XamDataTree.GlobalNodeLayouts>
      <ig:NodeLayout Key="CategoryLayout" TargetTypeName="Category"
                     DisplayMemberPath="CategoryName"/>
      <ig:NodeLayout Key="ProductLayout" TargetTypeName="Product"
                     DisplayMemberPath="ProductName">
         <ig:NodeLayout.EditingSettings>
            <ig:TreeEditingSettingsOverride AllowEditing="False" />
         </ig:NodeLayout.EditingSettings>
      </ig:NodeLayout>
   </ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>

In Visual Basic:

MyTree.EditingSettings.AllowEditing = True
MyTree.GlobalNodeLayouts(1).EditingSettings.AllowEditing = False

In C#:

MyTree.EditingSettings.AllowEditing = true;
MyTree.GlobalNodeLayouts[1].EditingSettings.AllowEditing = false;

There are several different ways in which your end user can enter edit mode. These can be determined by setting the following TreeEditingSettings and TreeEditingSettingsOverride objects properties:

IsF2EditingEnabled – this property specifies if a node should enter edit mode when your end user presses the F2 key.

IsEnterKeyEditingEnabled – this property specifies if a node should enter edit mode when your end user presses the Enter key.

IsOnNodeActiveEditingEnabled – this property specifies if a node should automatically enter edit mode.

IsMouseActionEditingEnabled – this property must be set to one of the following TreeMouseEditingAction enumeration values:

  • DoubleClick – this value specifies if a node should enter edit mode when your end user double-clicks it.

  • SingleClick – this value specifies if a node should enter edit mode when your end user clicks it.

  • None – this value specifies that when your end user clicks on a node, it will not enter edit mode.

Note
Note:

Pressing the ESC key cancels out of edit mode. Pressing the ENTER key or clicking the mouse outside of the editor area will confirm the edited value.

Events

There are four events associated with xamDataTree, as described in the following list. These events allow you to perform some custom logic during the editing lifecycle.

Note
Note:

All of the “ing” events such as NodeEnteringEditMode are cancellable.

Editor Templates

A TextBox is the default editor for nodes in edit mode and it only allows you to edit the value set in the XamDataTree or NodeLayouts object’s DisplayMemberPath property. When your end user clicks away from the node, it will then be updated.

However, you can also set up your own templates for editing. This can be achieved by setting the XamDataTree or NodeLayouts object’s EditorTemplate property to an instance of a data template. The DataContext of this custom editor specified with the DataTemplate is XamDataTreeNodeDataContext. With this custom template implemented your end user can edit multiple values on the item.

When binding to the value being edited, the Binding object must have the UpdateSourceTrigger property set to Explicit in order to be able to cancel editing.

The following code snippet demonstrates how to achieve this.

In XAML:

<ig:NodeLayout Key="ChapterLayout" TargetTypeName="Book" DisplayMemberPath="Title">
   <ig:NodeLayout.EditorTemplate>
      <DataTemplate>
         <Grid>
            <Grid.RowDefinitions>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <TextBox Background="Red" Grid.Row="0" Text="{Binding Data.Title, Mode=TwoWay,UpdateSourceTrigger=Explicit}"></TextBox>
            <TextBox Background="Yellow" Grid.Row="1" Text="{Binding Data.Author, Mode=TwoWay,UpdateSourceTrigger=Explicit}"></TextBox>
         </Grid>
      </DataTemplate>
   </ig:NodeLayout.EditorTemplate>
</ig:NodeLayout>

Deleting Nodes

You can also delete nodes from the xamDataTree control. You can allow your end users to delete nodes by setting the TreeEditingSettings object’s AllowDeletion property, as demonstrated in the following code snippet. Once deletion is enabled, your end users can delete nodes using the DELETE key.

In XAML:

<ig:XamDataTree.EditingSettings>
   <ig:TreeEditingSettings AllowEditing="True"
                           AllowDeletion="True"/>
</ig:XamDataTree.EditingSettings>

In Visual Basic:

MyTree.EditingSettings.AllowDeletion = True

In C#:

MyTree.EditingSettings.AllowDeletion = true;

Related Topics

Activation (xamDataTree)

Configuring Active Data Item (xamDataTree)

Configuring Check Boxes Visibility (xamDataTree)

Configuring Expanded/Collapsed Node State (xamDataTree)

Configuring Drag and Drop (xamDataTree)

Configuring Node Connectors Visibility (xamDataTree)

Configuring Node Layouts (xamDataTree)

Selection (xamDataTree)