Hello all
I am having a problem with a composite control. When I have the control setup with the code below, and I put multiple controls on the same page everything works as I expect it to (each sub-control is given a unique ClientID). However, when I add the control to a datagrid, each of the sub-controls is given the exact same ClientID.
I have been playing around with it some and if I remove the INamingContainer from the composite control, it will render correctly in the datagrid(I am assuming that the INamingContainer of the datagrid is taking over and making sure that each control has a unique ClientID.) However, when I do this, on a page that has multiple instances of the control(not in a datagrid), I get the message "Multiple controls with the same ID 'txtDate' were found. FindControl requires that controls have unique IDs."
Any help would be appriciated!
Here is the code for the control:
public class PopUpCalendar : System.Web.UI.WebControls.WebControl, INamingContainer
{
protected TextBox txtDate = new TextBox();
protected Image imgCal = new Image();
protected Image imgClear = new Image();
private System.Resources.ResourceManager m_objRes = new System.Resources.ResourceManager("Calendar.CalScript", typeof(PopUpCalendar).Assembly); // 'used to retrieve client side javascript
#region "Properties"
private string p_sDateFormat = "MM/dd/yyyy";
private string p_sCalImage = "Images/cal.gif";
private string p_sClearImage = "Images/icon_goback.gif";
private bool p_bShowCalImage = true;
private bool p_bShowClearImage = true;
private string p_sJavaFunction = "";
private string p_sSelectedDate = "";
private int p_iTextBoxWidth = 75;
public string DateText
{
get
{
return txtDate.Text;
}
}
[Bindable(true),
Category("Appearance"),
Description("Initial value for the control"),
DefaultValue("")]
public string SelectedDate
{
get
{
return p_sSelectedDate;
}
set
{
this.p_sSelectedDate = value;
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Description("String to format the selected date"),
DefaultValue("MM/dd/yyyy")]
public string DateFormat
{
get
{
return this.p_sDateFormat;
}
set
{
if(value.Trim()=="")
{
this.p_sDateFormat = "MM/dd/yyyy";
}
else
{
this.p_sDateFormat = value;
}
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Description("Javascript function to run after the date has been selected"),
DefaultValue("")]
public string JavaScriptToRunAfterDateSelection
{
get
{
return this.p_sJavaFunction;
}
set
{
this.p_sJavaFunction = value;
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Editor("System.Web.UI.Design.ImageUrlEditor, System.Design", typeof(UITypeEditor)),
Description("Path to the image for the calendar image"),
DefaultValue("Images/cal.gif")]
public string CalendarImage
{
get
{
return this.p_sCalImage;
}
set
{
this.p_sCalImage = value;
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Editor("System.Web.UI.Design.ImageUrlEditor, System.Design", typeof(UITypeEditor)),
Description("Path to the image for the clear date image"),
DefaultValue("Images/icon_goback.gif")]
public string ClearImage
{
get
{
return this.p_sClearImage;
}
set
{
this.p_sClearImage = value;
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Description("Show the calandar image"),
DefaultValue(true)]
public bool ShowCalendarIcon
{
get
{
return this.p_bShowCalImage;
}
set
{
this.p_bShowCalImage = value;
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Description("Show the clear date image"),
DefaultValue(true)]
public bool ShowClearIcon
{
get
{
return this.p_bShowClearImage;
}
set
{
this.p_bShowClearImage = value;
EnsureChildControls();
}
}
[Bindable(true),
Category("Appearance"),
Description("Width of the textbox control"),
DefaultValue("")]
public int TextBoxWidth
{
get
{
return p_iTextBoxWidth;
}
set
{
this.p_iTextBoxWidth = value;
EnsureChildControls();
}
}
#endregion
protected override void CreateChildControls()
{
this.Controls.Clear();
txtDate.Width = TextBoxWidth;
txtDate.ID = "txtDate";
txtDate.ReadOnly = true;
if(SelectedDate!="" && SelectedDate!=null)
{
txtDate.Text = string.Format("{0:" + DateFormat + "}", Convert.ToDateTime(SelectedDate));
}
this.Controls.Add(txtDate);
imgCal.AlternateText = "Show Calendar";
imgCal.ImageUrl = CalendarImage;
imgClear.AlternateText = "Clear Date";
imgClear.ImageUrl = ClearImage;
if(ShowCalendarIcon)
{
this.Controls.Add(imgCal);
}
if(ShowClearIcon)
{
this.Controls.Add(imgClear);
}
}
protected override void OnPreRender(System.EventArgs e)
{
string sScript;
sScript = m_objRes.GetString("calendar");
Page.RegisterClientScriptBlock("PopUpCal", "<script language=javascript>\n" + sScript + "</script>");
}
protected override void Render(HtmlTextWriter writer)
{
this.EnsureChildControls();
if(JavaScriptToRunAfterDateSelection!="")
{
txtDate.Attributes.Add("onclick", "javascript:popUpCalendar(this, '" + txtDate.ClientID + "', '" + DateFormat.ToLower() + "', '" + JavaScriptToRunAfterDateSelection + "(\"" + txtDate.ClientID + "\");');");
}
else
{
txtDate.Attributes.Add("onclick", "javascript:popUpCalendar(this, '" + txtDate.ClientID + "', '" + DateFormat.ToLower() + "', null);");
}
if(ShowCalendarIcon)
{
if(JavaScriptToRunAfterDateSelection!="")
{
imgCal.Attributes.Add("onclick", "javascript:popUpCalendar(this, '" + txtDate.ClientID + "', '" + DateFormat.ToLower() + "', '" + JavaScriptToRunAfterDateSelection + "(\"" + txtDate.ClientID + "\");');");
}
else
{
imgCal.Attributes.Add("onclick", "javascript:popUpCalendar(this, '" + txtDate.ClientID + "', '" + DateFormat.ToLower() + "', null);");
}
imgCal.Attributes.Add("onmouseover", "javascript:this.style.cursor='hand';");
}
if(ShowClearIcon)
{
imgClear.Attributes.Add("onclick", "javascript:popUpClear('" + txtDate.ClientID + "');");
imgClear.Attributes.Add("onmouseover", "javascript:this.style.cursor='hand';");
}
base.Render(writer);
}