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

How to custom checkbox for RadTreeView

11 Answers 79 Views
Treeview
This is a migrated thread and some comments may be shown as answers.
thuy
Top achievements
Rank 1
thuy asked on 23 May 2018, 02:49 AM

Hi all

I need custom position checkbox the same in picture. All Checkbox at Left.

[-]  >A

[-]    >B

[-]         >C

 

11 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 23 May 2018, 08:45 AM
Hi Thuy,

You need to create a custom node and change the position of the existing checkbox. Here is the code:
public class CustomTreeNodeElement : TreeNodeElement
{
 
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
    }
    protected override void SynchronizeToggleElement()
    {
        base.SynchronizeToggleElement();
        this.Children.Remove(this.ToggleElement);
        this.Children.Insert(0, this.ToggleElement);
    }
 
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(TreeNodeElement);
        }
    }
}

Please note that you need to enable the default checkboxes as well:
radTreeView1.CheckBoxes = true;

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
thuy
Top achievements
Rank 1
answered on 23 May 2018, 10:28 AM

Hi. Thanks you. I solved it. But i need red circle symbol at left. Can you help me?

[-] > A  red()

[-]      >B  white()

0
Dimitar
Telerik team
answered on 23 May 2018, 11:58 AM
Hi Thuy,

You can achieve this without adding an additional element. Just set the image of the content element in the NodeFormatting event handler. Here is an example:
private void RadTreeView1_NodeFormatting(object sender, TreeNodeFormattingEventArgs e)
{
    var contentElement = e.NodeElement.ContentElement;
    contentElement.Image = img;
    contentElement.TextImageRelation = TextImageRelation.TextBeforeImage;
    contentElement.ImageLayout = ImageLayout.None;
    contentElement.ImageAlignment = ContentAlignment.MiddleRight;
    contentElement.StretchHorizontally = true;
}

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
thuy
Top achievements
Rank 1
answered on 24 May 2018, 07:21 AM

I have a issue.Checkbox is not checked when I Choose a row. Please help me

 

0
Dimitar
Telerik team
answered on 24 May 2018, 11:04 AM
Hello Thuy,

If I understand correctly you want to check the selected node. This can be achieved by using the SelectedNodeChanged event. For example:
private void RadTreeView1_SelectedNodeChanged(object sender, RadTreeViewEventArgs e)
{
    e.Node.Checked = true;
}

Should you have any other questions do not hesitate to ask.
 
Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
thuy
Top achievements
Rank 1
answered on 29 May 2018, 07:51 AM

It's not correct.

When i check a checkbox then i check again. Its not work.=> checkbox is not uncheck

When i selected a row, i check a checkbox.Is not work => Its not check.

0
thuy
Top achievements
Rank 1
answered on 29 May 2018, 08:52 AM
I have a issue. AutoCheckChildNodes = true. I do not know event auto checkbox and user manual check becasue NodeCheckedChanged is occur. I need get selected node event when user manually check
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 29 May 2018, 09:08 AM
Hello, Thuy,    

I have prepared a sample code snippet how to toggle the check box state when you click directly the checkbox and check the element when you click the text part only. The attached gif file illustrates the achieved behavior:

public RadForm1()
{
    InitializeComponent();
    this.radTreeView1.MouseDown += radTreeView1_MouseDown;
}
 
private void radTreeView1_MouseDown(object sender, MouseEventArgs e)
{
    RadCheckBoxElement element = this.radTreeView1.ElementTree.GetElementAtPoint(e.Location) as RadCheckBoxElement;
    TreeNodeElement nodeElemenet = this.radTreeView1.ElementTree.GetElementAtPoint(e.Location) as TreeNodeElement;
    if (nodeElemenet != null)
    {
        nodeElemenet.Data.Checked = true;
    }
}
 
private void radTreeView1_CreateNodeElement(object sender, Telerik.WinControls.UI.CreateTreeNodeElementEventArgs e)
{
    e.NodeElement = new CustomTreeNodeElement();
}
 
public class CustomTreeNodeElement : TreeNodeElement
{
    RadCheckBoxElement checkBox = new RadCheckBoxElement();
 
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        this.Children.Insert(0, checkBox);
        checkBox.StretchHorizontally = false;
        checkBox.CheckStateChanged += checkBox_CheckStateChanged;
    }
 
    private void checkBox_CheckStateChanged(object sender, EventArgs e)
    {
        this.Data.Checked = checkBox.Checked;
    }
 
    protected override void SynchronizeToggleElement()
    {
        base.SynchronizeToggleElement();
        this.ToggleElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        checkBox.CheckStateChanged -= checkBox_CheckStateChanged;
        checkBox.Checked = this.Data.Checked;
        checkBox.CheckStateChanged += checkBox_CheckStateChanged;
    }
 
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(TreeNodeElement);
        }
    }
}

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

Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
thuy
Top achievements
Rank 1
answered on 29 May 2018, 09:42 AM

But i need AutoCheckChildNodes = true with 3 stage. Can you help me handal Checkbox parrent and child.

If the parent group is checked, all its children are checked and vice versa 
If all the children groups are checked, the direct parent group will be checked and vice versa 
Under a group, there are some checked children groups and some are unchecked, its checkbox will be in indeterminate status 

0
thuy
Top achievements
Rank 1
answered on 29 May 2018, 09:53 AM

I resolved =>When i check a checkbox then i check again. Its not work.=> checkbox is not uncheck
When i selected a row, i check a checkbox.Is not work => Its not check. 

I have a issue I do not know event auto checkbox and user manual check 

protected override void SynchronizeToggleElement()
        {
            base.SynchronizeToggleElement();
            
            this.Children.Move(this.Children.IndexOf(this.ToggleElement),0);
      //      this.Children.Insert(0, this.ToggleElement);
        }

0
Dimitar
Telerik team
answered on 30 May 2018, 06:37 AM
Hi Thuy,

I do not understand the exact scenario that does not work in this case. Could you please elaborate? In addition, what is your exact requirement for this case? Selecting a node should check or uncheck it? 

I am looking forward to your reply.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Treeview
Asked by
thuy
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
thuy
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or