Click here to Skip to main content
12,254,453 members (67,040 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked

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

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


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">
         <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 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>

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;

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 :;
        var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "radio");
        if (isChkBoxClick) {

    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;

In code

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


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

You may also be interested in...

Comments and Discussions

QuestionSo lovely Pin
Member 257669410-Jun-15 23:01
memberMember 257669410-Jun-15 23:01 
QuestionFails in IE 10 Pin
Member 1021909621-Aug-13 9:08
memberMember 1021909621-Aug-13 9:08 
AnswerRe: Fails in IE 10 Pin
Member 1021909622-Aug-13 3:04
memberMember 1021909622-Aug-13 3:04 
QuestionGreat Pin
_Thomas29-Jul-13 4:12
member_Thomas29-Jul-13 4:12 
AnswerRe: Great Pin
Lovely M29-Jul-13 19:43
memberLovely M29-Jul-13 19:43 
GeneralMy vote of 4 Pin
Amir Mohammad Nasrollahi27-Jul-13 22:12
professionalAmir Mohammad Nasrollahi27-Jul-13 22:12 
GeneralRe: My vote of 4 Pin
Lovely M29-Jul-13 19:45
memberLovely M29-Jul-13 19:45 
GeneralMy vote of 5 Pin
Amogh Natu8-Jul-13 2:33
professionalAmogh Natu8-Jul-13 2:33 
GeneralRe: My vote of 5 Pin
Lovely M9-Jul-13 18:12
memberLovely M9-Jul-13 18:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.160426.1 | Last Updated 8 Jul 2013
Article Copyright 2013 by Lovely M
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid