This is a migrated thread and some comments may be shown as answers.

Custom node update of text

4 Answers 224 Views
Treeview
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 23 Apr 2015, 08:32 AM

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

4 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Apr 2015, 02:24 PM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Thomas
Top achievements
Rank 1
answered on 29 Apr 2015, 12:56 PM
Thanks you Dess!
0
Thomas
Top achievements
Rank 1
answered on 07 May 2015, 07:25 PM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 11 May 2015, 03:13 PM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Treeview
Asked by
Thomas
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Thomas
Top achievements
Rank 1
Share this question
or