How to bring RadioButton instead of CheckBox in asp:TreeView control

Vishalbedre
Posted by in ASP.NET category on for Advance level | Points: 200 | Views : 10172 red flag
Rating: 5 out of 5  
 2 vote(s)

I had a scenario where I wanted to convert the CheckBoxes of the TreeView to radio buttons and user should be able to select only one radiobutton items for a single parent node. I googled and couldn't find an easy way to do that and after that I came to this code snippet and it really works great.

This article explain u how you can add the radio button in instead of checkbox in TreeView.

Introduction


This article explains, how one can add the radio button instead of checkbox in TreeView ASP.NET server control. It can be used in the scenario where you wants’ your user to select only one item out of group of items.


Using the code


Below is the code for the TreeView control and the code behind.

Treeview Code in ASP.NET page

 <asp:TreeView runat="server" ID="tvAi" Font-Bold="true" ShowLines="true" EnableClientScript="true"
                ShowExpandCollapse="true" ShowCheckBoxes="All"  
                SelectedNodeStyle-ForeColor="Azure" >
 </asp:TreeView>
DataBind Code at server side
 private void BindTreeview()
        {
            var pk = this.GetTreeViewNodes(); // this is simply to get the records to bind into the GridView           
            tvAi.Nodes.Clear();
            int redindex = 1;
            
             foreach (var parentNode in pk)
            {
                TreeNode master = new TreeNode(parentNode.Value.ToString(), parentNode.Key.ToString());
                master.ShowCheckBox = false;
                tvAi.Nodes.Add(master);

                var sk = this.GetSubnodesOfTheParentNodes(parentNode.Key);

                foreach (var chileNode in sk)
                {
                     TreeNode child = new TreeNode(chileNode.Value.ToString(), chileNode.Key.ToString());
                 
                     child.ShowCheckBox = false;
                     child.Text = "<input type='radio' name='rdoC" + redindex.ToString() + "' value ='"+chileNode.Value.ToString()+"' />" + child.Text;

                    master.ChildNodes.Add(child);
                }
                redindex++;
            }
        }
In the above code snippet, we have first retrieved the parent nodes record from  the database and added into the TreeView and then retrieved the child nodes from the TreeView and added against each parent node. Instead of showing CheckBoxes (note that we have set ShowCheckBox to false), we have set the text of the node to the radio button code. Here as the name of the children radio buttons will be similar for a parent node so user will be able to select only radio button item for a single parent.

Interesting !!!!

Conclusion

 
Using the above code now you can convert the checkboxes to radiobuttons. Hope this unique code snippet will help you.
Page copy protected against web site content infringement by Copyscape

About the Author

Vishalbedre
Full Name: vishal bedre
Member Level: Starter
Member Status: Member
Member Since: 9/1/2011 5:06:08 PM
Country: United States



Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)