How to custom checkbox for RadTreeView

12 posts, 0 answers
  1. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 22 May 2018 Link to this post

    Hi all

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

    [-]  >A

    [-]    >B

    [-]         >C

     

  2. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 23 May 2018 Link to this post

    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.
  3. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 23 May 2018 in reply to Dimitar Link to this post

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

    [-] > A  red()

    [-]      >B  white()

  4. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 23 May 2018 Link to this post

    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.
  5. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 24 May 2018 in reply to Dimitar Link to this post

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

     

  6. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 24 May 2018 Link to this post

    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.
  7. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 29 May 2018 Link to this post

    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.

  8. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 29 May 2018 in reply to Dimitar Link to this post

    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
  9. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3957 posts

    Posted 29 May 2018 Link to this post

    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.
  10. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 29 May 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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 

  11. thuy
    thuy avatar
    28 posts
    Member since:
    Nov 2013

    Posted 29 May 2018 in reply to thuy Link to this post

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

  12. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 30 May 2018 Link to this post

    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.
Back to Top