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

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

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

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.

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

//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)

Share

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 5+ years of software development career, he has worked on various technologies.
Follow on   Twitter

Comments and Discussions

 
GeneralReason for my vote of 5 Good one!!! PinmemberSachin_coder23-Feb-12 18:59 
GeneralRe: Thanks Sachin PinmemberSanjay K. Gupta23-Feb-12 19:30 
GeneralReason for my vote of 5 Good one!!! PinmemberSachin_coder23-Feb-12 18:58 
GeneralRe: Reason for my vote of 5Good one!!! PinmemberSanjay K. Gupta1-Aug-12 4:09 

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 | Terms of Use | Mobile
Web02 | 2.8.150301.1 | Last Updated 13 Sep 2012
Article Copyright 2012 by Sanjay K. Gupta
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid