Using UserControl in the RadCalendar DayTemplate

[Larissa]

I tried to use the UserControl in the DayTemplate. This user control has 2 buttons inside, it subscribes to these buttons click events. The question is, how the user control knows what is the date that user selecting from the event listener ()?

With below implementation, I noticed that click event in the user control is fired before the RadCalendar1 SelectedDate is modified accordingly. Please advise.

  <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" Skin="Special"
        EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" EnableMonthYearFastNavigation="false"
        DayNameFormat="Short" ShowRowHeaders="false" OnDayRender="Calendar_OnDayRender" OnPreRender="RadCalendar1_PreRender"
        OnSelectionChanged="RadCalendar1_SelectionChanged"
        ShowOtherMonthsDays="false" OnDefaultViewChanged="RadCalendar1_DefaultViewChanged" EnableMultiSelect="false">
        <HeaderTemplate>
            <asp:Image ID="HeaderImage" runat="server" Width="757" Height="94" Style="display: block" />
        </HeaderTemplate>
        <FooterTemplate>
            <asp:Image ID="FooterImage" runat="server" Width="757" Height="70" Style="display: block" />
        </FooterTemplate>
        <SpecialDays>
            <telerik:RadCalendarDay Date="2012/01/22" Repeatable="DayAndMonth" TemplateID="BlockedTemplate" />
            <telerik:RadCalendarDay Date="2012/01/27" Repeatable="DayInMonth" TemplateID="GeneralTemplate" />
        </SpecialDays>

        <ClientEvents OnDayRender="OnDayRender" OnDateSelected="OnDateSelected" />
        <CalendarDayTemplates>
            <telerik:DayTemplate ID="BlockedTemplate" runat="server">
                <Content>
                    <div class="rcTemplate rcDayBirthday">
                        Blocked!
                    </div>
                </Content>
            </telerik:DayTemplate>
              <telerik:DayTemplate ID="GeneralTemplate" runat="server">
                  <Content>
                      <div class="rcTemplate rcDayMortgage">
                          Available!
                          <br />
                          <control:GeneralDayTemplate runat="server" ID="templateAMPM"/>
                      </div>
                </Content>
            </telerik:DayTemplate>
        </CalendarDayTemplates>
</telerik:RadCalendar>


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GeneralDayTemplate.ascx.cs"
    Inherits="RadWebApp.Controls.GeneralDayTemplate" %>
<asp:Button runat="server" ID="btnA" Text="A" OnClick="btnA_Click"/>
<asp:Button runat="server" ID="btnB" Text="B" OnClick="btnB_Click"/>


 public partial class GeneralDayTemplate : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void btnA_Click(object sender, EventArgs e)
        {
            /*I need to know which date i'm selecting here????*/
        }

        protected void btnB_Click(object sender, EventArgs e)
        {
        }
    }

Second Question: Is it possible to do data binding in the DayTemplate? something like below code (this code is not working though):

<telerik:DayTemplate ID="GeneralTemplate" runat="server">
                  <Content>
                      <div class="rcTemplate rcDayMortgage">
                          Available!
                          <br />
                          <control:GeneralDayTemplate runat="server" ID="templateAMPM" Date='<%# Bind("Date")%>'/>
                      </div>
                </Content>
            </telerik:DayTemplate>

[Vasil]

Hello Larissa,

There is no API for getting the selected day out of the user control that is placed inside the given cell.
However you could use this workaround:

protected void btnA_Click(object sender, EventArgs e)
{
    string ID = ((sender as Control).Parent.Parent as Telerik.Web.UI.Calendar.View.TemplateContainer).ID;
    // ID will be something like "dt_2012_1_27"
    // Then you could split the string by  "_" and get the actual date.
}

About your second question, binding in the Calendar is not supported. And you could not use Bind or Eval for passing values to your control when it is placed in the DayTemplate.

Kind regards,
Vasil
the Telerik team

[Larissa]

Thanks Vasil! that's really helping. However, the bind feature in DayTemplate is totally cool if telerik support it ;)

[Larissa]

Hi Vasil,

I just found another issue with your solution. In my code, i need to define the days in a month by specifying date 1-7, and then set the
Repeatable = Telerik.Web.UI.Calendar.RecurringEvents.Week;

If i do this, the templates are only created for date 1 to 7. So if i click date 11, it will give me dt_2012_1_4 instead.
string ID = ((sender as Control).Parent.Parent as Telerik.Web.UI.Calendar.View.TemplateContainer).ID;

Any idea how to solve this?

[Vasil]

Hello Larissa,

You are actually right. The ID of the template container is the same and in this case can not be used to determinate in which cell is the button.
The solution I can think of is to handle onclick of the button ClientSide. Then find the parent "td" of the button. This would be the cell of the calendar, and its title will be set depending on the date for the given cell.
For example like:

<script type="text/javascript">
  function setHiddenField(sender)
  {
    $get("HiddentField1").value = sender.parentNode.parentNode.parentElement.title;
    return false;
  }
</script>
<asp:Button runat="server" ID="btnA" Text="A" OnClick="btnA_Click" OnClientClick="return(setHiddenField(this))" />

Of course here you have several options. Make a PostBack or Ajax call manually.  And another solution would be to place hidden field on the page. You could change the value of the hidden field and then leave the button to make a postback (by returning true in the setHiddenField function).
Additionally you could make the code a bit more flexible by using a sample loop over the parent elements until  getting the TD element instead of the hard codded version in the code above.

Regards,
Vasil
the Telerik team