Checkbox within node template issues

[Edwin]

Hello,

I have a tree with node templates that are added programmatically in the code-behind. The tree is set up to display checkboxes (Checkboxes="true") and the template includes a label and checkbox.  I want to set up the tree so that when checking the node's checkbox will also set the template's checkbox to the opposite value and viceversa (checking the template's checkbox will set the node's checkbox).  I have tried different approaches but I just can't get this to work.  Can anybody point me in the right direction.  Here's the code for the .aspx page:

<style type="text/css">
    .RedBoldFont
    {
        color: red;
        font-weight:bold;
    }
    .RedBoldItalicFont
    {
        color: red;
        font-weight:bold;
        font-style:italic;
    }
</style>

<telerik:RadTreeView ID="attributesTree2" runat="server" OnNodeDataBound="attributesTree2_NodeDataBound" CheckBoxes="true" TriStateCheckBoxes="true" OnNodeCheck="attributesTree2_NodeCheck">

</telerik:RadTreeView>


 and for the code-behind:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace DDW
{
    public partial class TestingForDAR : System.Web.UI.UserControl
    {


        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                
                ///////////////////////////////

                attributesTree2.DataSource = GetAttributes();

                attributesTree2.DataFieldID = "ID";
                attributesTree2.DataFieldParentID = "ParentID";
                attributesTree2.DataBind();


            }

            TreeNodeTemplate template = new TreeNodeTemplate();

            foreach (RadTreeNode node in attributesTree2.GetAllNodes())
            {                
                template.InstantiateIn(node);
            }

            //attributesTree2.DataBind();


        }

        public List<Attribute> GetAttributes()
        {
            List<Attribute> attributesList = new List<Attribute>();

            attributesList.Add(new Attribute(1, null, "Attribute A", "Description for Attribute A", true, false, false));
            attributesList.Add(new Attribute(2, 1, "Attribute A1", "Description for Attribute A1", true, false, false));
            attributesList.Add(new Attribute(3, 1, "Attribute A2", "Description for Attribute A2", false, false, false));
            attributesList.Add(new Attribute(4, 1, "Attribute A3", "Description for Attribute A3", false, false, false));
            attributesList.Add(new Attribute(5, null, "Attribute B", "Description for Attribute B", true, false, true));
            attributesList.Add(new Attribute(6, 5, "Attribute B1", "Description for Attribute B1", true, false, true));
            attributesList.Add(new Attribute(7, 5, "Attribute B2", "Description for Attribute B2", false, false, false));
            attributesList.Add(new Attribute(8, null, "Attribute C", "Description for Attribute C", false, false, false));
            attributesList.Add(new Attribute(9, 8, "Attribute C1", "Description for Attribute C1", false, false, false));
            attributesList.Add(new Attribute(10, 8, "Attribute C2", "Description for Attribute C2", false, false, false));

            //attributesList.Add(new Attribute(11, 10, "Attribute C21", "Description for Attribute C21", false, false, false));
            //attributesList.Add(new Attribute(12, 10, "Attribute C22", "Description for Attribute C22", false, false, false));
            //attributesList.Add(new Attribute(13, 12, "Attribute C22a", "Description for Attribute C22a", false, false, false));
            //attributesList.Add(new Attribute(14, 12, "Attribute C22b", "Description for Attribute C22b", false, false, false));
            //attributesList.Add(new Attribute(15, 12, "Attribute C22b", "Description for Attribute C22c", false, false, false));



            return attributesList;

        }

        protected void attributesTree2_NodeDataBound(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
        {
            Attribute nodeData = (Attribute)e.Node.DataItem;

            if (nodeData.Default)
            {
                //e.Node.ForeColor = Color.Red;
                e.Node.CssClass = "RedBoldFont";
                if (nodeData.Exclude)
                {
                    e.Node.CssClass = "RedBoldItalicFont";
                }

            }

            e.Node.Attributes.Add("Name", nodeData.Name);
            string exclude = nodeData.Exclude ? "true" : "false";
            e.Node.Attributes.Add("Exclude", exclude);
            e.Node.Attributes.Add("Description", nodeData.Description);


        }

        protected void attributesTree2_NodeCheck(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
        {
            e.Node.Attributes["Exclude"] = e.Node.Checked ? "false" : "true";

            attributesTree2.DataBind();
        }

    }


    public class Attribute
    {
        public int ID { get; set; }
        public int? ParentID { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public bool Include { get; set; }
        public bool Exclude { get; set; }
        public bool Default { get; set; }

        public Attribute()
        {

        }

        public Attribute(int id, int? parentID, string name, string description, bool def, bool include, bool exclude)
        {
            ID = id;
            ParentID = parentID;
            Name = name;
            Description = description;
            Default = def;
            Include = include;
            Exclude = exclude;
        }

    }

    ////////////////////////////////////////////////////////////////////////////////////////////////

    class TreeNodeTemplate : ITemplate
    {

        public event CommandEventHandler Command;

        private void OnCommand(CommandEventArgs e)
        {

            if (Command != null)
            {
                Command(this, e);
            }
        }

        public void InstantiateIn(Control container)
        {
            //...  

            Label lblAttrName = new Label();
            lblAttrName.ID = "lblAttrName";
            lblAttrName.DataBinding += new EventHandler(lblAttrName_DataBinding);
            container.Controls.Add(lblAttrName);

            CheckBox chkExclude = new CheckBox();
            chkExclude.ID = "ckExclude";
            chkExclude.AutoPostBack = true;
            chkExclude.DataBinding += new EventHandler(chkExclude_DataBinding);
            chkExclude.CheckedChanged += new EventHandler(chkExclude_CheckedChanged);
            container.Controls.Add(chkExclude);

            //Button saveButton = new Button();
            //saveButton.ID = "saveButton1";
            //saveButton.Text = "save";

            ////set properties  
            //saveButton.Command += saveButton_Command;
            ////data binding event handler  
            ////add to controls collection  
            //container.Controls.Add(saveButton);
            //...  
        }

        private void lblAttrName_DataBinding(object sender, EventArgs e)
        {
            Label target = (Label)sender;
            RadTreeNode node = (RadTreeNode)target.BindingContainer;

            target.Text = node.Attributes["Name"];
            target.ToolTip = node.Attributes["Description"];
        }

        private void chkExclude_DataBinding(object sender, EventArgs e)
        {
            CheckBox chkExclude = (CheckBox)sender; 
            RadTreeNode node = (RadTreeNode)chkExclude.BindingContainer;

            chkExclude.Checked = Convert.ToBoolean(node.Attributes["Exclude"]);
            node.Checked = !chkExclude.Checked;


        }

        private void chkExclude_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox target = (CheckBox)sender;
            RadTreeNode node = (RadTreeNode)target.Parent;

            Attribute data = (Attribute)node.DataItem;
            node.Checked = !data.Exclude;

        }

    }




}


 

[Plamen]

Hello Exwin,

In such scenario we would rather recommend checking the nodes on the client side as in the code below:

<script type="text/javascript">
         function pageLoad() {
             var $ = $telerik.$;
             $(".RadTreeView").find(".rtTemplate").find(":checkbox").change(checkTemplateCheckBox)
         }

         function checkTemplateCheckBox() {
             var treeView = $find("<%=attributesTree2.ClientID %>");

             var node = treeView._extractNodeFromDomElement(this)
             node.set_checked(!this.checked);
         }


         function OnClientNodeChecked(sendetr, args) {
             var $ = $telerik.$;
             var checked = args.get_node().get_checked();
             var tempalteCheckBox = $(args.get_node().get_element()).find(".rtTemplate").first().find(":checkbox")[0];
             tempalteCheckBox.checked = !checked;
         }

     </script>

 <telerik:RadTreeView ID="attributesTree2" runat="server" OnNodeDataBound="attributesTree2_NodeDataBound"
     CheckBoxes="true" TriStateCheckBoxes="true" _OnNodeCheck="attributesTree2_NodeCheck" OnClientNodeChecked="OnClientNodeChecked">

If you have some requirement to do it on the server side please share it so we could think of an appropriate solution.


Regards,
Plamen
Telerik