Extended CheckBoxList with Selected Item CSS and Vertical Scrolling

• Download source code - 34.4 KB

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.

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