Click here to Skip to main content
15,867,488 members
Articles / Web Development / ASP.NET
Tip/Trick

Extended CheckBoxList with Selected Item CSS and Vertical Scrolling

Rate me:
Please Sign up or sign in to vote.
4.75/5 (4 votes)
13 Sep 2012CPOL 23.4K   4   4
An extended CheckBoxList with selected item CSS and vertical scrolling

Introduction

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.

untitled.PNG

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
C#
public override RepeatDirection RepeatDirection
{
    get
    {
        return RepeatDirection.Vertical;
    }
}
 
public override RepeatLayout RepeatLayout
{
    get
    {
        return RepeatLayout.Table;
    }
}
 
public override int RepeatColumns
{
    get
    {
        return 0;
    }
}

Add a new property named "SelectedItemCSS".

C#
public string SelectedItemCSS
{
    get
    {
        return ViewState["SelectedItemCSS"] != null ? 
                  ViewState["SelectedItemCSS"].ToString() : String.Empty;
    }
    set
    {
        ViewState["SelectedItemCSS"] = value;
    }
}

On Render, put the control in a scrollable div.

C#
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();
    base.Render(writer);
    writer.Write("</div>");
}

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.
C#
protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
 
    if (SelectedItemCSS == String.Empty)
        return;
    foreach (ListItem itm in this.Items)
    {
        itm.Attributes.Add("onclick", 
             "changeSelectedCss(this,'" + SelectedItemCSS + "');");
 
    }
 
    //Added JS file as WebResources
    Page.ClientScript.RegisterClientScriptInclude("sortableJavaScript",
         Page.ClientScript.GetWebResourceUrl(this.GetType(),
         "ExtendedControls.js.ExtCheckListBox.js"));
 
    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.

C#
//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 = '';
    }
}

License

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


Written By
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.

Comments and Discussions

 
GeneralReason for my vote of 5 Good one!!! Pin
TinTinTiTin23-Feb-12 17:59
TinTinTiTin23-Feb-12 17:59 
GeneralRe: Thanks Sachin Pin
Sanjay K. Gupta23-Feb-12 18:30
professionalSanjay K. Gupta23-Feb-12 18:30 
GeneralReason for my vote of 5 Good one!!! Pin
TinTinTiTin23-Feb-12 17:58
TinTinTiTin23-Feb-12 17:58 
GeneralRe: Reason for my vote of 5Good one!!! Pin
Sanjay K. Gupta1-Aug-12 3:09
professionalSanjay 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.