Solving the problems of asp.net composite custom calendar control

Suggested Videos
Part 112 - ASP.NET custom server controls
Part 113 - Adding composite custom controls to visual studio tool box
Part 114 - Adding properties to composite custom controls

In Parts 112 to 114  in asp.net video series, we discussed about the basics of composite custom controls in asp.net. Please watch Parts 112 to 114, before proceeding with this video. Click here to access asp.net video tutorial



In this video we will discuss about
1. Hiding the calendar control, when the CustomCalendar control is first loaded
2. Displaying and hiding the calendar, when the image button is clicked
3. Populating the textbox control, with a date that is selected from the calendar
4. Retrieving the selected date from the CustomCalendar control on a webform.



Hiding the calendar control, when the CustomCalendar control is first loaded:
To hide the calendar set calendar.Visible = false in CreateChildControls() method in CustomCalendar.cs file

Displaying and hiding the calendar, when the image button is clicked:
To toggle the visibility of the calendar object, first register an event handler method, with the click event of the image button in CreateChildControls() method as shown below.
imageButton.Click += new ImageClickEventHandler(imageButton_Click);

Provide the implementation for imageButton_Click() event handler method as shown below:
void imageButton_Click(object sender, ImageClickEventArgs e)
{
    // If the calendar is visible, make it invisible
    if (calendar.Visible)
    {
        calendar.Visible = false;
    }
    // If the calendar is invisible, make it visible
    else
    {
        calendar.Visible = true;
        // if the user has not already selected a date, then set
        // set the VisibleDate of the calendar to today's date
        if (string.IsNullOrEmpty(textBox.Text))
        {
            calendar.VisibleDate = DateTime.Today;
        }
        // if the user has already selected a date, then set
        // set the VisibleDate of the calendar to the selected date
        // by retrieving it from the textbox
        else
        {
            DateTime output = DateTime.Today;
            bool isDateTimeConverionSuccessful = DateTime.TryParse(textBox.Text, out output);
            calendar.VisibleDate = output;
        }
    }
}

Populating the textbox control, with a date that is selected from the calendar:
First register an event handler method, with the "SelectionChanged" event of the calendar in CreateChildControls() method as shown below.
calendar.SelectionChanged += new EventHandler(calendar_SelectionChanged);

Provde the implementation for calendar_SelectionChanged() event handler method as shown below.
void calendar_SelectionChanged(object sender, EventArgs e)
{
    // Populate the text box wit the selected date
    textBox.Text = calendar.SelectedDate.ToShortDateString();
    // Make the calendar invisible
    calendar.Visible = false;
}

Retrieving the selected date from the CustomCalendar control on a webform:
To retrieve the selected date from the CustomCalendar control, add SelectedDate property to the CustomCalendar class as shown below.
[Category("Appearance")]
[Description("Gets or sets the selected date of custom calendar control")]
public DateTime SelectedDate
{
    get
    {
        EnsureChildControls();
        return string.IsNullOrEmpty(textBox.Text) ? DateTime.MinValue : Convert.ToDateTime(textBox.Text);
    }

    set
    {
        if (value != null)
        {
            EnsureChildControls();
            textBox.Text = value.ToShortDateString();
        }
        else
        {
            EnsureChildControls();
            textBox.Text = "";
        }
    }
}

Here is the complete code for CustomCalendar control so far:
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;

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

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

            imageButton = new ImageButton();
            imageButton.ID = "calendarImageButton";
            imageButton.Click += new ImageClickEventHandler(imageButton_Click);

            calendar = new Calendar();
            calendar.ID = "calendarControl";
            calendar.SelectionChanged += new EventHandler(calendar_SelectionChanged);
            calendar.Visible = false;

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

        void calendar_SelectionChanged(object sender, EventArgs e)
        {
            textBox.Text = calendar.SelectedDate.ToShortDateString();
            calendar.Visible = false;
        }

        void imageButton_Click(object sender, ImageClickEventArgs e)
        {
            if (calendar.Visible)
            {
                calendar.Visible = false;
            }
            else
            {
                calendar.Visible = true;
                if (string.IsNullOrEmpty(textBox.Text))
                {
                    calendar.VisibleDate = DateTime.Today;
                }
                else
                {
                    DateTime output = DateTime.Today;
                    bool isDateTimeConverionSuccessful = DateTime.TryParse(textBox.Text, out output);
                    calendar.VisibleDate = output;
                }
            }
        }

        [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;
            }
        }

        [Category("Appearance")]
        [Description("Gets or sets the selected date of custom calendar control")]
        public DateTime SelectedDate
        {
            get
            {
                EnsureChildControls();
                return string.IsNullOrEmpty(textBox.Text) ? DateTime.MinValue : Convert.ToDateTime(textBox.Text);
            }

            set
            {
                if (value != null)
                {
                    EnsureChildControls();
                    textBox.Text = value.ToShortDateString();
                }
                else
                {
                    EnsureChildControls();
                    textBox.Text = "";
                }
            }
        }

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

        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);
        }
    }
}

Please build CustomControls project, and add a reference to CustomCalendar in asp.net web application for testing. Drag and drop the CustomCalendar control and a button onto the webform. 

Double click the button control to generate the click event handler.
protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write(CustomCalendar1.SelectedDate.ToShortDateString());
}

Run the web application and select a date from the calendar control. Notice that the textbox is populated with the selected date. Now click the button. The selected date should be printed on the web form.

No comments