Custom node update of text

[Thomas]

Hi,

I'm using a custom node to display a button for some of the nodes in my treeview. The custom node consists of just a textElement and a buttonElement, they are placed in a StackLayoutElement.

When updating the nodes text property in the editor it afterwards appears two times. See the attached file(to make it more it clear I've set textElement.StretchVertically = false so that it can clearly be seen). It's like both the node text and the virtual text element is visible. Pointers to how I resolve this would be much appreciated :D.

 

/Thomas

[Dess | Tech Support Engineer, Principal]

Hello Thomas,

Thank you for writing.

Depending on the TreeViewElement.EditMode, when editing a certain node either the RadTreeNode.Text or RadTreeNode.Value will be updated. In order to avoid duplicate text when using custom nodes, you should set the TreeNodeContentElement.Text property to empty string in the TreeNodeContentElement.Synchronize method. Here is a sample code snippet:

public Form1()
{
    InitializeComponent();
    this.radTreeView1.CreateNodeElement += radTreeView1_CreateNodeElement;

    for (int i = 0; i < 5; i++)
    {
        RadTreeNode node = new RadTreeNode();
        node.Text = "Parent" + i;
        for (int j = 0; j < 3; j++)
        {
            RadTreeNode childNode = new RadTreeNode();
            childNode.Text = "Child" + i;
            node.Nodes.Add(childNode);
        }
        this.radTreeView1.Nodes.Add(node);
    }

    this.radTreeView1.ExpandAll();
    this.radTreeView1.AllowEdit = true;

    this.radTreeView1.TreeViewElement.EditMode = TreeNodeEditMode.Text;
}

private void radTreeView1_CreateNodeElement(object sender, Telerik.WinControls.UI.CreateTreeNodeElementEventArgs e)
{
    if (e.Node.Level > 0)
    {
        e.NodeElement = new ChildTreeNodeElement();
    }
    else
    {
        e.NodeElement = new ParentTreeNodeElement();
    }
}

public class ParentTreeNodeElement : TreeNodeElement
{
    protected override TreeNodeContentElement CreateContentElement()
    {
        return new TreeNodeContentElement();
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(TreeNodeElement);
        }
    }

    public override bool IsCompatible(RadTreeNode data, object context)
    {
        return data.Level == 0;
    }
}

public class ChildTreeNodeElement : TreeNodeElement
{
    protected override TreeNodeContentElement CreateContentElement()
    {
        return new ChildContentElement();
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(TreeNodeElement);
        }
    }

    public override bool IsCompatible(RadTreeNode data, object context)
    {
        return data.Level > 1;
    }
}

class ChildContentElement : TreeNodeContentElement
{
    StackLayoutElement nodeContentContainer;
    LightVisualElement textElement;
    RadButtonElement buttonElement;

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(TreeNodeContentElement);
        }
    }

    public override void Synchronize()
    {
        TreeNodeElement treeNodeElement = this.NodeElement;
        RadTreeNode node = treeNodeElement.Data;
        this.buttonElement.Text = node.Text;
        this.textElement.Text = node.Text;
        this.Text = string.Empty;
    }

    protected override void CreateChildElements()
    {
        nodeContentContainer = new StackLayoutElement();
        nodeContentContainer.Orientation = Orientation.Horizontal;
        nodeContentContainer.StretchHorizontally = true;
        nodeContentContainer.StretchVertically = false;

        textElement = new LightVisualElement();
        textElement.ShouldHandleMouseInput = false;
        textElement.NotifyParentOnMouseInput = true;
        textElement.StretchVertically = false;
        this.nodeContentContainer.Children.Add(textElement);

        buttonElement = new RadButtonElement();

        buttonElement.Click += buttonElement_Click;
        buttonElement.StretchVertically = false;
        this.nodeContentContainer.Children.Add(buttonElement);

        this.Children.Add(nodeContentContainer);
    }

    private void buttonElement_Click(object sender, EventArgs e)
    {
        RadMessageBox.Show("Clicked");
    }
}

I hope this information helps. Should you have further questions, I would be glad to help.

 

Regards,
Dess
Telerik

 

 

[Thomas]

Thanks you Dess!

[Thomas]

Hi again,

In the provided example when clicking the button on an already selected node, the node enters edit mode. How can that be avoided?

I've tried with

buttonElement.NotifyParentOnMouseInput = false;

Any help would be much appreciated.

/Thomas

[Dess | Tech Support Engineer, Principal]

Hello Thomas,

Thank you for writing back.

In order to avoid entering edit mode when it is not necessary according to your requirement, you can use the RadTreeView.Editing event and cancel it by setting the TreeNodeEditingEventArgs.Cancel argument to true.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik