Click here to Skip to main content
15,394,700 members
Articles / Web Development / ASP.NET
Posted 23 Aug 2007


16 bookmarked

ASP.NET TriState CheckBox Made Easy

Rate me:
Please Sign up or sign in to vote.
1.80/5 (4 votes)
23 Aug 2007CPOL2 min read
ASP.NET tri-state checkboxes using C# and JavaScript.


Tri-state checkboxes can be very helpful to implement custom functionality to provide three different options to choose in a single control. For example, you may want to implement a security control panel UI to set permissions for a collection of users, and the possible status for these permissions may be: "Allow", "Denied", "Unset".


A few days ago, I was asked to construct a tristate checkbox Web Control. My first approach was to do it by means of a Web Control class that inherits from the CheckBox class. I found this approach a little boring, so I decided to try another approach, by means of JavaScript and images that represent these three conditions (states). In this article, I will use a simple enough approach, preserving the principle of reusability of code by means of building a Web Control class.

Using the Code

  1. Make a new Web Control class to contain our tri-state checkbox control. You may use Visual Studio 2005 to create the new Class Library of Web Controls. A default "Class1.cs" will appear in the Solution Explorer. Change the name of the class to some other more relevant name. Remember to inherit the WebControl class in your new class. Also add the references needed.
  2. Create the class properties for: DefaultState, DefaultAction, ImagePath, Name, and CheckBoxstyle. Implement the images and state values containers for the three states of the checkbox. I did this part using "span" containers to store state values and <img> tags to allocate the state image.
  3. Implement the JavaScript to handle client the OnClick events of our tri-state checkboxes and embed this script in a C# function called Build().
  4. Write code for rendering the control as an image and two <span> tags: one for the state value and the other for the checkbox custom action.
  5. Write code for the OnLoad event for the Web Control to write the JavaScript we talked about earlier.
  6. Build the Solution.
public class TriStateCheckBox : WebControl
    // Member variables
    string _DefaultState = "1";
    string _DefaultAction = "1";
    string _name = string.Empty;
    string _imagespath = "images/";
    CheckBoxTableStyle _CheckBoxStyle = CheckBoxTableStyle.classic;

    // Public properties
    public string DefaultState
        get { return _DefaultState; }
        set { _DefaultState = value; }

    public string DefaultAction
        get { return _DefaultAction; }
        set { _DefaultAction = value; }

    public string Name
        get { return _name; }
        set { _name = value; }

    public string ImagePath
        get { return _imagespath; }
        set { _imagespath = value; }

    // Behavior
    public enum CheckBoxTableStyle

    public CheckBoxTableStyle CheckBoxStyle
        get { return _CheckBoxStyle; }
        set { _CheckBoxStyle = value; }

    private string Build()
        string script = "<script>";
        script += "function settristate(obj)";
        script += "{";
        script += "var temp='';";
        script += "var _obj=document.getElementById('value_'+obj);";
        script += "temp = _obj.innerHTML;";
        script += "if(temp == '1')";
        script += "{";
        script += "document.getElementById('tristate_'+obj).src = '" + 
                  ImagePath + "2.bmp/';";
        script += "document.getElementById('value_'+obj).innerHTML = '2';";
        script += "}";
        script += "if(temp == '2')";
        script += "{";
        script += "document.getElementById('tristate_'+obj).src = '" + 
                  ImagePath + "3.bmp';";
        script += "document.getElementById('value_'+obj).innerHTML = '3';";
        script += "}";
        script += "if(temp == '3')";
        script += "{";
        script += "document.getElementById('tristate_'+obj).src = '" + 
                  ImagePath + "1.bmp';";
        script += "document.getElementById('value_'+obj).innerHTML = '1';";
        script += "}";
        script += "}";
        script += "function GetValues(obj){var ret = " + 
                  "document.getElementById('value_'+obj).innerHTML;return ret;}";
        script += "function GetActions(obj){var ret = " + 
                  "document.getElementById('accion_'+obj).innerHTML;return ret;}";
        script += "</script>";
        return script;

    // Render tristatecheckbox
    //value_x is the current value of the checkbox "x"
    //action_x is the custom action for checkbox "x"
    protected override void Render(HtmlTextWriter output)
        output.Write("<IMG id='tristate_" + Name + "' onclick=settristate('" + 
                     Name + "') src='" + ImagePath + _DefaultState + ".bmp'>");
        output.Write("<span id='value_" + Name + 
                     "' style='VISIBILITY: hidden' name='value_" + 
                     Name + "'>3</span>");
        output.Write("<span id='accion_" + Name + 
                     "' style='VISIBILITY: hidden' name='accion_" + 
                     Name + "'>" + DefaultAction + "</span>");

    protected override void OnLoad(EventArgs e)

As shown, tri-state checkboxes can be added into any ASPX page.

Screenshot - tristate2.jpg

Use the property tags to set the name of the TriStateCheckBox. Also, you can set (optional) the DefaultState and DefaultAction, and I hope to add in the near future an option to set the checkbox style.

Screenshot - tristate1.jpg


  • First build: August 22, 2007.


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


About the Author

Douglas Sequera
Architect DSC
Spain Spain
10 years experienced software architect.

Comments and Discussions

GeneralMy vote of 1 Pin
CoolVini13-Feb-09 21:57
MemberCoolVini13-Feb-09 21:57 
GeneralDont use visibility:hidden, use display:none Pin
robvon8-May-08 18:19
Memberrobvon8-May-08 18:19 
GeneralImprovement Pin
NinjaCross23-Aug-07 12:38
MemberNinjaCross23-Aug-07 12:38 
GeneralRe: Improvement Pin
Douglas Sequera23-Aug-07 13:28
MemberDouglas Sequera23-Aug-07 13:28 
GeneralImprovement Pin
justin bredenkamp28-Mar-08 2:04
Memberjustin bredenkamp28-Mar-08 2:04 

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.