The Folder icon should be highlight in the Menu items.

1 Answer 101 Views
Treeview
Dev
Top achievements
Rank 1
Veteran
Dev asked on 13 Jul 2021, 10:51 AM

Hi Team,

          In our application we are using the RadTreeView control to add the Menu items. 
While clicking or mouse over on the Menu items (Form Name) the folder icon should be highlight. Please do the needful. Video link mentioned below for your reference.

Video link : https://ttprivatenew.s3.amazonaws.com/pulse/suganya-gmail/attachments/17438074/TinyTake13-07-2021-04-01-27.mp4

Screenshot : https://prnt.sc/1aruj97

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 15 Jul 2021, 12:46 PM
Hello, Rick,


In order to achieve the demonstrated custom design and functionality, it would be necessary to construct a custom node element that contains a toggle button. A sample approach for creating custom nodes is demonstrated here: 
https://docs.telerik.com/devtools/winforms/controls/treeview/working-with-nodes/custom-nodes

I have prepared a sample code snippet for your reference which result is illustrated in the attached gif file. Please have in mind that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your requirements best:

public RadForm1() { InitializeComponent(); this.radTreeView1.HotTracking = false; this.radTreeView1.CreateNodeElement+=radTreeView1_CreateNodeElement; this.radTreeView1.DisplayMember = "name"; this.radTreeView1.ParentMember = "pid"; this.radTreeView1.ChildMember = "id"; this.radTreeView1.DataSource = this.GetSampleData(); } private void radTreeView1_CreateNodeElement(object sender, CreateTreeNodeElementEventArgs e) { e.NodeElement = new CustomTreeNodeElement(); } private DataTable GetSampleData() { DataTable dt = new DataTable(); DataColumn dc = new DataColumn(); dc.ColumnName = "id"; dc.DataType = typeof(int); dt.Columns.Add(dc); DataColumn dc1 = new DataColumn(); dc1.ColumnName = "name"; dc1.DataType = typeof(string); dt.Columns.Add(dc1); DataColumn dc2 = new DataColumn(); dc2.ColumnName = "pid"; dc2.DataType = typeof(int); dt.Columns.Add(dc2); DataRow dr = dt.NewRow(); dr[0] = 0; dr[1] = "My Computer"; dr[2] = DBNull.Value; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 1; dr[1] = @"C:\"; dr[2] = 0; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 2; dr[1] = @"D:\"; dr[2] = 0; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 3; dr[1] = "Program Files"; dr[2] = 1; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 4; dr[1] = "Microsoft"; dr[2] = 3; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 5; dr[1] = "Telerik"; dr[2] = 3; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 6; dr[1] = "WINDOWS"; dr[2] = 1; dt.Rows.Add(dr); return dt; } classCustomContentElement : TreeNodeContentElement { StackLayoutElement stack = new StackLayoutElement(); RadToggleButtonElement button = new RadToggleButtonElement(); LightVisualElement text = new LightVisualElement(); protectedoverride Type ThemeEffectiveType { get { returntypeof(TreeNodeContentElement); } } protected override void CreateChildElements() { base.CreateChildElements(); stack.Orientation = Orientation.Horizontal; stack.StretchHorizontally = true; stack.Children.Add(button); stack.Children.Add(text); button.ToggleStateChanged+=button_ToggleStateChanged; button.MaxSize= button.MinSize = new System.Drawing.Size(30, 0); text.StretchHorizontally = true; this.Children.Add(stack); } private void button_ToggleStateChanged(object sender, StateChangedEventArgs args) { this.NodeElement.Data.Tag = args.ToggleState; } public override void Synchronize() { base.Synchronize(); button.Image = Properties.Resources.InboxFolder; button.ImageAlignment = ContentAlignment.MiddleCenter; this.DrawText = false; text.Text = this.NodeElement.Data.Text; button.ToggleStateChanged-=button_ToggleStateChanged;

button.ToggleState = ToggleState.Off;

if (this.NodeElement.Data.Tag !=null ) { button.ToggleState = (ToggleState)this.NodeElement.Data.Tag; } button.ToggleStateChanged+=button_ToggleStateChanged; } } publicclassCustomTreeNodeElement : TreeNodeElement { protected override TreeNodeContentElement CreateContentElement() { returnnew CustomContentElement(); } protectedoverride Type ThemeEffectiveType { get { returntypeof(TreeNodeElement); } } }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

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