Click here to Skip to main content
Click here to Skip to main content

TreeView with Radio/Option Buttons - Select One at a Time - Using JavaScript

, 8 Jul 2013
Rate this:
Please Sign up or sign in to vote.
TreeView with radio/option buttons.

Introduction 

This article helps you to have radio buttons or option buttons with tree view. Normally treeview controls with ASP.NET allows to have checkboxes. By using a simple JavaScript it is possible to convert check boxes to radio buttons. Also, another small JavaScript allows only one node be selected at a time. While selecting a node it will uncheck/unselect all other nodes.

Using the code

Tree View in source

<asp:TreeView ID="TreeView1" runat="server" 
         ShowLines="True" ShowCheckBoxes="All">
    <Nodes>
         <asp:TreeNode Text="Root" Value="Root">
         	<asp:TreeNode Text="Parent 1" Value="New Node">
                      <asp:TreeNode Text="Leaf 1" Value="New Node"></asp:TreeNode>
                      <asp:TreeNode Text="Leaf 2" Value="New Node"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="Parent 2" Value="New Node">
                      <asp:TreeNode Text="Leaf 3" Value="New Node"></asp:TreeNode>
                      <asp:TreeNode Text="Leaf 4" Value="New Node"></asp:TreeNode>
                </asp:TreeNode>
         </asp:TreeNode>
    </Nodes>
</asp:TreeView>  

JavaScript to convert checkboxes to Radio Buttons 

<script type="text/javascript">

    function MakeRadio() {
        var tv = document.getElementById("<%= TreeView1.ClientID %>");
        var chkArray = tv.getElementsByTagName("input");

        for (i = 0; i <= chkArray.length - 1; i++) {
            if (chkArray[i].type == 'checkbox') {
                chkArray[i].type = 'radio';
            }
        }
    }

    window.onload = MakeRadio;
    
</script>  

JavaScript to convert Select single Radio Button at a time 

<script type="text/javascript">

    function OnTreeClick(evt) {
        var src = window.event != window.undefined ? window.event.srcElement : evt.target;
        var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "radio");
        if (isChkBoxClick) {
            SelectOne(src.id);
        }
    }


    function SelectOne(objId) {
        var tv = document.getElementById("<%= TreeView1.ClientID %>");
        var chkArray = tv.getElementsByTagName("input");

        for (i = 0; i <= chkArray.length - 1; i++) {
            if (chkArray[i].type == 'radio') {
                if (chkArray[i].id != objId) {
                    chkArray[i].checked = false;
                }
            }
        }
    }
</script>

In code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        TreeView1.Attributes.Add("onclick", "OnTreeClick(event)");
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Lovely M
Software Developer (Senior) Santhisoft Technologies
India India

Comments and Discussions

 
QuestionFails in IE 10 PinmemberMember 1021909621-Aug-13 9:08 
AnswerRe: Fails in IE 10 PinmemberMember 1021909622-Aug-13 3:04 
QuestionGreat Pinmember_Thomas29-Jul-13 4:12 
AnswerRe: Great PinmemberLovely M29-Jul-13 19:43 
GeneralMy vote of 4 PinprofessionalAmir Mohammad Nasrollahi27-Jul-13 22:12 
GeneralRe: My vote of 4 PinmemberLovely M29-Jul-13 19:45 
GeneralMy vote of 5 PinprofessionalAmogh Natu8-Jul-13 2:33 
GeneralRe: My vote of 5 PinmemberLovely M9-Jul-13 18:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 8 Jul 2013
Article Copyright 2013 by Lovely M
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid