Recently we had a requirement to have ImageCheckbox instead of the traditional checkboxes provided by ASP.NET where in it was required to be able to configure the images representing the different states of Checkbox such as checked and enabled,unchecked and enabled,checked and disabled,unchecked and disabled .
So,we built an ImageCheckbox custom control that would display images instead of normal checkboxes for the checked and unchecked states.Different images can also be provided for enabled and disabled states of checkbox.
Following demonstrates how to use the Custom control in the ASPX page.
<%@ Register TagPrefix=”custom” Namespace=”CustomControls” Assembly=”CustomControls” %>
<custom:ImageCheckBox id=”chkUserEnabled” runat=”server” Enabled=”false”
ImageChecked=”../img/common/checked_enabled.gif”
ImageUnchecked=”../img/common/unchecked_enabled.gif”
DisabledImageChecked=”../img/common/checked_disabled.gif”
DisabledImageUnchecked=”../img/common/unchecked_disabled.gif” ShowCheckBox=”false”/>
Following is the source code of how to achieve the functionality.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CustomControls
{
public class ImageCheckBox : CheckBox
{
// Methods
public ImageCheckBox()
{
base.Init += new EventHandler(this.ImageCheckBox_Init);
}
private void ImageCheckBox_Init(object sender, EventArgs e)
{
if (!this.Page.ClientScript.IsClientScriptBlockRegistered(“ImageCheckBox”))
{
string script = “function createImageCheckbox(c, iC, iU){\r\n var cO=document.getElementById(c);var iO = document.getElementById(c+ ‘_Image’);if (cO.checked) { cO.checked=false; iO.src = iU;} else {cO.checked=true; iO.src = iC;}}\r\nfunction toggleImageCheckbox(c,iC, iU){var cO=document.getElementById(c);var iO = document.getElementById(c+ ‘_Image’);\r\nif (cO.checked) {iO.src = iC;} else {iO.src = iU;}}”;
this.Page.ClientScript.RegisterClientScriptBlock(typeof(ImageCheckBox), “ImageCheckBox”, script, true);
}
}
protected override void Render(HtmlTextWriter output)
{
string str = “”;
string str2 = “createImageCheckbox(‘” + this.ClientID + “‘,’” + this.ImageChecked + “‘,’” + this.ImageUnchecked + “‘);”;
string str3 = “toggleImageCheckbox(‘” + this.ClientID + “‘,’” + this.ImageChecked + “‘,’” + this.ImageUnchecked + “‘);”;
if (this.AutoPostBack)
{
str = @”setTimeout(‘__doPostBack(\’” + this.ClientID + @”\’,\’\')’, 0);”;
}
else
{
base.Attributes.Add(“onclick”, str3);
}
Image image = new Image();
image.ID = this.ClientID + “_Image”;
if (!this.ShowCheckBox)
{
base.Style.Add(“display”, “none”);
}
if (this.Enabled)
{
image.Attributes.Add(“onclick”, “javascript:” + str2 + str);
if (this.Checked)
{
image.ImageUrl = this.ImageChecked;
}
else
{
image.ImageUrl = this.ImageUnchecked;
}
}
else
{
//if disabled
if (this.Checked)
{
image.ImageUrl = this.DisabledImageChecked;
}
else
{
image.ImageUrl = this.DisabledImageUnchecked;
}
}
image.RenderControl(output);
base.Render(output);
}
// Properties
[Bindable(true), DefaultValue(0), Description("Specifies Image for the Checked Image"), Category("Appearance")]
public string ImageChecked
{
get
{
string str = (string)this.ViewState["ImageChecked"];
if (str == null)
{
return “images/checked.gif”;
}
return str;
}
set
{
this.ViewState["ImageChecked"] = value;
}
}
[Category("Appearance"), Description("Specifies Image for the Unchecked Image"), Bindable(true), DefaultValue(0)]
public string ImageUnchecked
{
get
{
string str = (string)this.ViewState["ImageUnchecked"];
if (str == null)
{
return “images/unchecked.gif”;
}
return str;
}
set
{
this.ViewState["ImageUnchecked"] = value;
}
}
[Bindable(true), DefaultValue(0), Description("Specifies Image for the Disabled Checked Image"), Category("Appearance")]
public string DisabledImageChecked
{
get
{
string str = (string)this.ViewState["DisabledImageChecked"];
if (str == null)
{
return “images/checked.gif”;
}
return str;
}
set
{
this.ViewState["DisabledImageChecked"] = value;
}
}
[Category("Appearance"), Description("Specifies Image for the Disabled Unchecked Image"), Bindable(true), DefaultValue(0)]
public string DisabledImageUnchecked
{
get
{
string str = (string)this.ViewState["DisabledImageUnchecked"];
if (str == null)
{
return “images/unchecked.gif”;
}
return str;
}
set
{
this.ViewState["DisabledImageUnchecked"] = value;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(0), Description("Show or hide the checkbox")]
public bool ShowCheckBox
{
get
{
if (this.ViewState["ShowCheckBox"] == null)
{
return false;
}
return (bool)this.ViewState["ShowCheckBox"];
}
set
{
this.ViewState["ShowCheckBox"] = value;
}
}
}
}
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CustomControls
{
public class ImageCheckBox : CheckBox
{
// Methods
public ImageCheckBox()
{
base.Init += new EventHandler(this.ImageCheckBox_Init);
}
private void ImageCheckBox_Init(object sender, EventArgs e)
{
if (!this.Page.ClientScript.IsClientScriptBlockRegistered(“ImageCheckBox”))
{
string script = “function createImageCheckbox(c, iC, iU){\r\n var cO=document.getElementById(c);var iO = document.getElementById(c+ ‘_Image’);if (cO.checked) { cO.checked=false; iO.src = iU;} else {cO.checked=true; iO.src = iC;}}\r\nfunction toggleImageCheckbox(c,iC, iU){var cO=document.getElementById(c);var iO = document.getElementById(c+ ‘_Image’);\r\nif (cO.checked) {iO.src = iC;} else {iO.src = iU;}}”;
this.Page.ClientScript.RegisterClientScriptBlock(typeof(ImageCheckBox), “ImageCheckBox”, script, true);
}
}
protected override void Render(HtmlTextWriter output)
{
string str = “”;
string str2 = “createImageCheckbox(‘” + this.ClientID + “‘,’” + this.ImageChecked + “‘,’” + this.ImageUnchecked + “‘);”;
string str3 = “toggleImageCheckbox(‘” + this.ClientID + “‘,’” + this.ImageChecked + “‘,’” + this.ImageUnchecked + “‘);”;
if (this.AutoPostBack)
{
str = @”setTimeout(‘__doPostBack(\’” + this.ClientID + @”\’,\’\')’, 0);”;
}
else
{
base.Attributes.Add(“onclick”, str3);
}
Image image = new Image();
image.ID = this.ClientID + “_Image”;
if (!this.ShowCheckBox)
{
base.Style.Add(“display”, “none”);
}
if (this.Enabled)
{
image.Attributes.Add(“onclick”, “javascript:” + str2 + str);
if (this.Checked)
{
image.ImageUrl = this.ImageChecked;
}
else
{
image.ImageUrl = this.ImageUnchecked;
}
}
else
{
//if disabled
if (this.Checked)
{
image.ImageUrl = this.DisabledImageChecked;
}
else
{
image.ImageUrl = this.DisabledImageUnchecked;
}
}
image.RenderControl(output);
base.Render(output);
}
// Properties
[Bindable(true), DefaultValue(0), Description("Specifies Image for the Checked Image"), Category("Appearance")]
public string ImageChecked
{
get
{
string str = (string)this.ViewState["ImageChecked"];
if (str == null)
{
return “images/checked.gif”;
}
return str;
}
set
{
this.ViewState["ImageChecked"] = value;
}
}
[Category("Appearance"), Description("Specifies Image for the Unchecked Image"), Bindable(true), DefaultValue(0)]
public string ImageUnchecked
{
get
{
string str = (string)this.ViewState["ImageUnchecked"];
if (str == null)
{
return “images/unchecked.gif”;
}
return str;
}
set
{
this.ViewState["ImageUnchecked"] = value;
}
}
[Bindable(true), DefaultValue(0), Description("Specifies Image for the Disabled Checked Image"), Category("Appearance")]
public string DisabledImageChecked
{
get
{
string str = (string)this.ViewState["DisabledImageChecked"];
if (str == null)
{
return “images/checked.gif”;
}
return str;
}
set
{
this.ViewState["DisabledImageChecked"] = value;
}
}
[Category("Appearance"), Description("Specifies Image for the Disabled Unchecked Image"), Bindable(true), DefaultValue(0)]
public string DisabledImageUnchecked
{
get
{
string str = (string)this.ViewState["DisabledImageUnchecked"];
if (str == null)
{
return “images/unchecked.gif”;
}
return str;
}
set
{
this.ViewState["DisabledImageUnchecked"] = value;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(0), Description("Show or hide the checkbox")]
public bool ShowCheckBox
{
get
{
if (this.ViewState["ShowCheckBox"] == null)
{
return false;
}
return (bool)this.ViewState["ShowCheckBox"];
}
set
{
this.ViewState["ShowCheckBox"] = value;
}
}
}
}