Click here to Skip to main content
12,509,612 members (55,111 online)
Click here to Skip to main content
Add your own
alternative version

Stats

15.8K views
240 downloads
4 bookmarked
Posted

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

You may also be interested in...

Pro
Pro

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