A simple custom control, inheriting from BoundField

I wanted to display Boolean data in a Gridview and didn't like that disabled checkbox look. After searching online, I found some people solved this with Javascript, including the MS AJAX extentions toolkit which has an extender - but I didn't want to have a lot of checkboxes in my html that got replaced on the client's side with javascript that had to loop over them all. I just wanted the images.

The quick-and-dirty way to solve this would have been to create a template column for my Gridview with an image control in it and override the Grid's data binding method to set the ImageUrl property.

But that would have to be done everytime, for every Gridview I'd want to use.

So I wrote a simple custom control, inheriting from BoundField (System.Web.UI.WebControls.BoundField) and now I can use it in any website, in any Gridview.

I liked it - hope you do too.

using System;
using System.Data;

using System.Configuration;

using System.Web;

using System.ComponentModel;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace CustomBoundField

{
    ///<summary>

    /// Summary description for BoundCheckImageField

    ///</summary>
    public class BoundCheckImageField : System.Web.UI.WebControls.BoundField
    {
        #region Properties
 

        ///<summary>

        /// Gets or sets the url of the image to display for a 'true' value

        ///</summary>

        [DefaultValue("")]

        public string TrueValueImageUrl

        {

            get

            {

                object val = base.ViewState["TrueValueImageUrl"];

                if (val != null)

                {

                    return (string)val;

                }

                return string.Empty;

            }

            set

            {

                if (!object.Equals(value, base.ViewState["TrueValueImageUrl"]))

                {
                    base.ViewState["TrueValueImageUrl"] = value;
                    this.OnFieldChanged();
                }

            }

        }

 

        ///<summary>

        /// Gets or sets the url of the image to display for a 'false' value

        ///</summary>

        [DefaultValue("")]

        public string FalseValueImageUrl

        {

            get

            {

                object val = base.ViewState["FalseValueImageUrl"];

                if (val != null)

                {

                    return (string)val;

                }

                return string.Empty;

            }

            set

            {

                if (!object.Equals(value, base.ViewState["FalseValueImageUrl"]))

                {
                    base.ViewState["FalseValueImageUrl"] = value;
                    this.OnFieldChanged();
                }

            }

        }

 
        #endregion
 

        protected override void InitializeDataCell(DataControlFieldCell cell, DataControlRowState rowState)

        {

            //base.InitializeDataCell(cell, rowState);

 

            if (!string.IsNullOrEmpty(this.DataField))

            {

                Image img = new Image();

                img.DataBinding += new EventHandler(this.OnImageDataBind);
                cell.Controls.Add(img);

            }

        }

 

        protected void OnImageDataBind(object sender, EventArgs e)

        {

       

            Control control = (Control)sender;

            Control namingContainer = control.NamingContainer;

            object dataValue = this.GetValue(namingContainer);

 

            if (control is Image)

            {

                if ((Boolean)dataValue)

                {

                    (control as Image).ImageUrl = this.TrueValueImageUrl;

                }
                else
                {

                    (control as Image).ImageUrl = this.FalseValueImageUrl;

                }

            }

            else

            {

                base.OnDataBindField(sender, e);

            }

        }

    }
}
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
posted @ Wednesday, July 01, 2009 11:34 AM
Print

Comments on this entry:

# re: A simple custom control, inheriting from BoundField

Left by web development company at 8/27/2009 7:28 PM
Gravatar
Nice post,

um this is much better than using java script and having an unreadable code

Thanks for writing, most people don't bother.

# re: A simple custom control, inheriting from BoundField

Left by Angel Eyes at 8/28/2009 8:41 AM
Gravatar
Thanks for the reply, even the link makes it a little spammed.

# to: emlak ilanları

Left by Angel Eyes at 4/26/2010 1:29 PM
Gravatar
Sure thing, Elmak.

# Re: A simple custom control, inheriting from BoundField

Left by giorgia at 10/15/2010 5:31 PM
Gravatar
I am about to start a course on programming and web design...so I will keep this post which seems useful.
thanks

# to: giorgia

Left by Angel Eyes at 10/16/2010 9:20 PM
Gravatar
Glad it helps

# re: A simple custom control, inheriting from BoundField

Left by Trxbox at 12/11/2010 7:55 PM
Gravatar
Hi, Its really a nice example. Thank you very much

# re: A simple custom control, inheriting from BoundField

Left by Niels at 3/22/2011 5:44 PM
Gravatar
Needed exactly what you did here, thanks for saving me the time for typing it myself!

# re: A simple custom control, inheriting from BoundField

Left by AngelEyes at 3/22/2011 5:56 PM
Gravatar
@Niels: Thanks for letting me know, you're quite welcome.

# re: A simple custom control, inheriting from BoundField

Left by Web Design Qatar at 8/3/2011 1:10 PM
Gravatar
Pretty section! It feels great reading such post like this, very informative and interesting. I've learned. Here's another source that worth a look about this also. Thanks for sharing this info!

Your comment:



(not displayed)


 
 
 
 
 

Live Comment Preview:

 
«February»
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910