Adding properties to composite custom controls - Part 114

Suggested Videos
Part 111 - Navigating to a specific month and an year in an asp.net calendar control
Part 112 - ASP.NET custom server controls
Part 113 - Adding composite custom controls to visual studio tool box

In this video we will discuss about adding custom properties, to composite custom calendar control. Please watch Part 113 of asp.net video series before proceeding with this video.



At the moment, the calendar composite control does not have an image associated with the image button. Let us create "ImageButtonImageUrl" property to associate an image.

Copy and paste the following code in CustomCalendar.cs file.
[Category("Appearance")]
[Description("Sets the image icon for the calendar control")]
public string ImageButtonImageUrl
{
    get
    {
        // This method checks if the child controls are created, if not, 
        // it triggers a call to CreateChildControls() method.
        EnsureChildControls();
        return imageButton.ImageUrl != null ? imageButton.ImageUrl : string.Empty;
    }
    set
    {
        EnsureChildControls();
        imageButton.ImageUrl = value;
    }
}



Rebuild CustomControls project.

Flip to the asp.net web application project, where the CustomCalendar is being tested. Please remove the CustomCalendar control from visual  studio tool boox, and add it again. Drag and drop CustomCalendar control on to the webform. Right click and select properties. Notice that "ImageButtonImageUrl" property is now displayed in the properties window. If you change the properties display mode to "Categorized", then notice that "ImageButtonImageUrl" property is displayed under "Appearance" category. Also, notice that, when the property is selected, the property description is displayed at the bottom of the properties window.

Create a folder with Name=Images in the asp.net web application project. Download Calendar.jpg image from this website. To download the image, simply right click on the image, and select "Save Image as" and save it to the specified location on your computer. Copy the image into the "Images" folder in your asp.net web application project.


Now, in the properties window, set ImageButtonImageUrl="Images/Calendar.jpg". Notice that, at design time, the image is not shown on the image button. Run the project, and notice that, at run time, the image button shows the image as expected. 

To correct the design time problem, override RecreateChildControls() method. This method is called by visual studio designer, to recreate child controls at design time. Copy and paste the following code CustomCalendar.cs file.
protected override void RecreateChildControls()
{
    EnsureChildControls();
}

At this point, re-test the custom calendar. When you set ImageButtonImageUrl="Images/Calendar.jpg", notice that the property change is immediately picked up by the control at design time.

At the moment, another cosmetic issue with this control is that, the "Image Button" and the "TextBox" are not properly alligned. To correct this problem, change the Render() method in CustomCalendar.cs file, as shown below. This method adds, cellpadding attribute, and puts the "textbox" and "calendar" in a table. 
protected override void Render(HtmlTextWriter writer)
{
    AddAttributesToRender(writer);
    writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "1");

    writer.RenderBeginTag(HtmlTextWriterTag.Table);

    writer.RenderBeginTag(HtmlTextWriterTag.Tr);

    writer.RenderBeginTag(HtmlTextWriterTag.Td);
    textBox.RenderControl(writer);
    writer.RenderEndTag();

    writer.RenderBeginTag(HtmlTextWriterTag.Td);
    imageButton.RenderControl(writer);
    writer.RenderEndTag();

    writer.RenderEndTag();
    writer.RenderEndTag();

    calendar.RenderControl(writer);
}

Here is the complete code for CustomCalendar:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControls
{
    [ToolboxData("<{0}:CustomCalendar runat=server></{0}:CustomCalendar>")]
    public class CustomCalendar : CompositeControl
    {
        TextBox textBox;
        ImageButton imageButton;
        Calendar calendar;

        [Category("Appearance")]
        [Description("Sets the image icon for the calendar control")]
        public string ImageButtonImageUrl
        {
            get
            {
                EnsureChildControls();
                return imageButton.ImageUrl != null ? imageButton.ImageUrl : string.Empty;
            }
            set
            {
                EnsureChildControls();
                imageButton.ImageUrl = value;
            }
        }

        protected override void RecreateChildControls()
        {
            EnsureChildControls();
        }

        protected override void CreateChildControls()
        {
            Controls.Clear();

            textBox = new TextBox();
            textBox.ID = "dateTextBox";
            textBox.Width = Unit.Pixel(80);

            imageButton = new ImageButton();
            imageButton.ID = "calendarImageButton";

            calendar = new Calendar();
            calendar.ID = "calendarControl";

            this.Controls.Add(textBox);
            this.Controls.Add(imageButton);
            this.Controls.Add(calendar);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            AddAttributesToRender(writer);
            writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "1");

            writer.RenderBeginTag(HtmlTextWriterTag.Table);

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);

            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            textBox.RenderControl(writer);
            writer.RenderEndTag();

            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            imageButton.RenderControl(writer);
            writer.RenderEndTag();

            writer.RenderEndTag();
            writer.RenderEndTag();

            calendar.RenderControl(writer);
        }
    }
}