How to custom checkbox for RadTreeView

[thuy]

Hi all

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

[-]  >A

[-]    >B

[-]         >C

 

[Dimitar]

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

[thuy]

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

[-] > A  red()

[-]      >B  white()

[Dimitar]

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

[thuy]

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

 

[Dimitar]

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

[thuy]

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.

[thuy]

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

[Dess | Tech Support Engineer, Principal]

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

[thuy]

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 

[thuy]

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);
        }

[Dimitar]

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