Treeview button on every node align on the right side

3 Answers 51 Views
Treeview
Kevin
Top achievements
Rank 1
Iron
Kevin asked on 16 Dec 2021, 02:34 AM

Hello,

I followed this thread to add a button on every node of my treeview (https://www.telerik.com/forums/how-to-add-button-in-every-node)
Now, I would like to know if it's possible to stick those buttons on the right side of the tree view.
I tried to use the alignment property of the button but no luck... Any solutions?

Thank you in advance for your help.

3 Answers, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 20 Dec 2021, 10:38 AM

Hello Kevin,

Thank you for your interest in our RadTreeView control for WinForms.

If I have correctly understood your question, you want to move the buttons to the most right side of the RadTreeView control. In this case, if we used the approach in the mentioned article, you can set the StretchHorizontally property of the RadHostItem to true. Then set the same property to the RadButton element to false. The last step is to set the Alignment property of the button to right. The following code snippet demonstrates what I have in mind.

internal class CustomTreeNodeElement : TreeNodeElement
{
	. . . . . .
	protected override void CreateChildElements()
	{
		base.CreateChildElements();

		RadButton button = new RadButton();
		button.ButtonElement.Alignment = ContentAlignment.MiddleRight;
		button.ButtonElement.StretchHorizontally = false;
		button.Size = new Size(65, 15);
		
		button.Text = "Add Node";
		RadHostItem host = new RadHostItem(button);
		host.StretchHorizontally = true;
		host.StretchVertically = true;

		this.Children.Add(host);
	}
}

Give this approach a try and let me know how it goes. 

Regards,
Dinko
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Kevin
Top achievements
Rank 1
Iron
answered on 21 Dec 2021, 06:44 AM

Hello Dinko,

Thank you very much for your reply.

I tried your solution and it's working well but when I change the button to be a dropdown button I have some issue with the menu.
But I managed to find another solution, let me share it here in case other people are wondering.

protected override void CreateChildElements()
        {
            base.CreateChildElements();

            // Create the layout element to place the dropdown button to the right
            StackLayoutElement nodeContentContainer = new StackLayoutElement();
            nodeContentContainer.Orientation = Orientation.Vertical;
            nodeContentContainer.StretchHorizontally = true;
            nodeContentContainer.StretchVertically = false;

            // Create the dropdown button
            RadDropDownButtonElement ddBtnControls = new RadDropDownButtonElement();
            ddBtnControls.Text = "Controls";
            ddBtnControls.Size = new Size(50, 25);
            ddBtnControls.StretchHorizontally = false;
            
            // Create the menu of the dropdown
            RadMenuItem menu1= new RadMenuItem("menu1");
            ddBtnControls.Items.Add(menu1);
            RadMenuItem menu2 = new RadMenuItem("menu2");
            ddBtnControls.Items.Add(menu2);
            RadMenuItem menu3 = new RadMenuItem("menu3");
            ddBtnControls.Items.Add(menu3);

            // Add the layout and the dropdown button
            this.Children.Add(nodeContentContainer);
            this.Children.Add(ddBtnControls);
        }

But I'm stepping upon another issue right now, when the node text is too long the button will go all the way to the right with a horizontal scrollbar. Does the treeview have some way to have some ellipsis or wrapping?

Thank you again.
Best regards.

Dinko
Telerik team
commented on 23 Dec 2021, 02:54 PM

Thank you for the additional details. Due to the custom implementation, the build-in text wrap is not working. At this moment I wasn't able to make this work using this custom code. I will need more time to try a way to make it work. I will contact you again tomorrow with further details regarding your scenario.
Dinko
Telerik team
commented on 24 Dec 2021, 09:07 AM

Thank you for your patience.

I have reviewed your case and looking at your last code snippet it seems that you are not using LightVisualElement to show the text as demonstrated in the mentioned forum post. If you are using LightVisualElement you can set its AutoEllipsis property to true and set a specific size to the Size property. 

protected override void CreateChildElements()
{
    _container = new DockLayoutPanel();
    _container.StretchHorizontally = true;
    _container.StretchVertically = false;

    _labelElement = new LightVisualElement();
    _labelElement.ShouldHandleMouseInput = false;
    _labelElement.NotifyParentOnMouseInput = true;
    _labelElement.StretchVertically = false;
    _labelElement.AutoEllipsis = true;
    _labelElement.AutoSize = false;
    _labelElement.Size = new Size(50, 20);
. . . . . . .

Kevin
Top achievements
Rank 1
Iron
commented on 03 Jan 2022, 05:55 AM | edited

Hello Dinko,

Happy new year, sorry for the late reply here.
Is it possible to share with me the complete code?

I tried like this but I lose the alignment on the right and the ellipsis is not working.

protected override void CreateChildElements() { base.CreateChildElements(); DockLayoutPanel container = new DockLayoutPanel(); container.StretchHorizontally = true; container.StretchVertically = false; LightVisualElement labelElement = new LightVisualElement(); labelElement.ShouldHandleMouseInput = false; labelElement.NotifyParentOnMouseInput = true; labelElement.StretchVertically = false; labelElement.AutoEllipsis = true; labelElement.AutoSize = false; labelElement.Size = new Size(50, 20); container.Children.Add(labelElement); RadDropDownButtonElement ddBtnControls = new RadDropDownButtonElement();
ddBtnControls.Text = "Controls";
ddBtnControls.Size = new Size(50, 25);
ddBtnControls.StretchHorizontally = false;
RadMenuItem menu1 = new RadMenuItem("menu1");
ddBtnControls.Items.Add(menu1);
RadMenuItem menu2 = new RadMenuItem("menu2");
ddBtnControls.Items.Add(menu2);
RadMenuItem menu3 = new RadMenuItem("menu3");
ddBtnControls.Items.Add(menu3); container.Children.Add(ddBtnControls); Children.Add(container); }

Thank you.
Best regards.
0
Dinko
Telerik team
answered on 03 Jan 2022, 09:41 AM

Hi Kevin,

I am attaching the sample project which I used to test your scenario. Can you check it out and let me know what I am missing in the sample project to mimic your implementation? 

Regards,
Dinko
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Treeview
Asked by
Kevin
Top achievements
Rank 1
Iron
Answers by
Dinko
Telerik team
Kevin
Top achievements
Rank 1
Iron
Share this question
or