Click here to Skip to main content
12,554,623 members (56,895 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked

Extended CheckBoxList with Selected Item CSS and Vertical Scrolling

, 13 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
An extended CheckBoxList with selected item CSS and vertical scrolling


The ASP.NET Framework comes with the CheckListBox, a feature-rich ASP.NET server control to display list with checkboxes. Sometimes I need to change CSS of selected items.


To achieve that, I have decided to extend the CheckListBox control and want to share so that it can be useful to me and others.

Using the Code

To achieve this, I have disabled the following properties:

  • RepeatDirection
  • RepeatLayout
  • RepeatColumns
public override RepeatDirection RepeatDirection
        return RepeatDirection.Vertical;
public override RepeatLayout RepeatLayout
        return RepeatLayout.Table;
public override int RepeatColumns
        return 0;

Add a new property named "SelectedItemCSS".

public string SelectedItemCSS
        return ViewState["SelectedItemCSS"] != null ? 
                  ViewState["SelectedItemCSS"].ToString() : String.Empty;
        ViewState["SelectedItemCSS"] = value;

On Render, put the control in a scrollable div.

protected override void Render(HtmlTextWriter writer)
    writer.Write("<div style='overflow-X:hidden;overflow-Y:auto;{0}'>",
                (this.Width != null ? "width:" + this.Width.ToString() : String.Empty) +
                (this.Height != null ? ";height:" + this.Height.ToString() : String.Empty));
    this.Height = new Unit();

On Prerender:

  1. Registered two method to change CSS of selected item
  2. Added client-side onclick event to all checkboxlist items
  3. Changed the CSS of selected items on every page load through JavaScript.
protected override void OnPreRender(EventArgs e)
    if (SelectedItemCSS == String.Empty)
    foreach (ListItem itm in this.Items)
             "changeSelectedCss(this,'" + SelectedItemCSS + "');");
    //Added JS file as WebResources
    Page.ClientScript.RegisterStartupScript(this.GetType(), this.ID, 
         "<script>setSelectedCss('" + this.ID + "','" + 
         this.SelectedItemCSS + "');</script>");

The ExtendedControls.js has two methods for setting CSS of selected item.

//For changing CSS of Checked ListItem on item click
function changeSelectedCss(Obj, selectedCss) {
    if (Obj.checked == true) Obj.parentNode.className = selectedCss;
    else Obj.parentNode.className = '';
//For set/remove the CSS of Checked ListItem
//This should be called at page load
function setSelectedCss(id, selectedCss) {
    var theList = document.getElementById(id);
    for (j = 0; j < theList.rows.length; j++) {
        if (theList.rows[j].cells[0].children[0].checked == true)
            theList.rows[j].cells[0].className = selectedCss;
        else theList.rows[j].cells[0].className = '';


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


About the Author

Sanjay K. Gupta
Technical Lead
India India
Sanjay K. Gupta is a Web/Software Developer Currently working with .Net Technologies. Although he knows VB language but, he mainly use C# language for programming. he is also interested in JavaScript and jQuery library. In his free time, he prefer to learn new technologies and write custom control libraries for ASP.NET.

In his 7+ years of software development career, he has worked on various technologies.

You may also be interested in...


Comments and Discussions

GeneralReason for my vote of 5 Good one!!! Pin
Sachin_coder23-Feb-12 17:59
memberSachin_coder23-Feb-12 17:59 
GeneralRe: Thanks Sachin Pin
Sanjay K. Gupta23-Feb-12 18:30
memberSanjay K. Gupta23-Feb-12 18:30 
GeneralReason for my vote of 5 Good one!!! Pin
Sachin_coder23-Feb-12 17:58
memberSachin_coder23-Feb-12 17:58 
GeneralRe: Reason for my vote of 5Good one!!! Pin
Sanjay K. Gupta1-Aug-12 3:09
memberSanjay K. Gupta1-Aug-12 3:09 

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.161021.1 | Last Updated 13 Sep 2012
Article Copyright 2012 by Sanjay K. Gupta
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid