Share via

CalendarExtender - DateChange event on the server side

  • Article

Question

Thursday, October 7, 2010 1:55 PM

hello,

I have a CalendarExtender connected to a textbox. i need to catch the DateChange event in the server side so i can populate a DropDownList with items from my DB according to the selected date.

something style of:

protected void calendarExtender_onDateChanged(object sender, EventArgs e)

{

}

i cant find anything that is like this.

All replies (5)

Thursday, October 7, 2010 4:07 PM ✅Answered

As MetalAsp.Net suggested use CalenderExtender client side event, in that event call a button click event via JS. See this sample code:

//aspx

 <asp:CalendarExtender ID="Cale1" runat="server" TargetControlID="TextBox1" OnClientDateSelectionChanged="dateSelectionChanged" />

 <asp:TextBox ID="TextBox1" runat="server"       />

 <asp:HiddenField ID="HiddenField1" runat="server" />

<asp:Button ID="dummybtn" runat="server" Text="Click"  style="display:none" OnClick="dummybtn_Click" />

    <asp:UpdatePanel ID="UpdatePanel" runat="server">
     <ContentTemplate>
      <asp:DropDownList ID="ddl" runat="server" >      
      </asp:DropDownList>
     </ContentTemplate>
     <Triggers>
      <asp:AsyncPostBackTrigger ControlID="dummybtn" />
     </Triggers>
    </asp:UpdatePanel>

//Javascript

<script type="text/javascript">

function dateSelectionChanged(sender, args)
{ 
    var selectedDate = sender.get_selectedDate(); 
    document.getElementById('HiddenField1').value = selectedDate;
   (document.getElementById('dummybtn')).click();   
 } 
</script>

//Code  Behind
protected void dummybtn_Click(object sender, EventArgs e)
{
     string selectedDate = HiddenField1.Value;
     //your logic of date check and DropDown Binding
}

So on selecting a date from the calender I update the hidden field, call button click via JS, in the code behind I update my dropdownlist by checking the date (stored in the label).

Also since my Dropdownlist is wrapped inside a Update Panel and I set AsyncPostBackTrigger as the hidden dummy button, the dropdown is updated asynchronously.

Hope this helps

Monday, October 11, 2010 2:43 AM ✅Answered

Hi,

You could try to do that like below:

Aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar_limit.aspx.cs" Inherits="test7" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function checkDate(sender, args) {
            __doPostBack('Button1', '');
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" style="display:none" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
        OnClientDateSelectionChanged="checkDate">
    </asp:CalendarExtender>
    </form>
</body>
</html>

 

Cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    protected void Button1_Click(object sender, EventArgs e)
    {
        //blah blah...
    }
}

 

Thursday, October 7, 2010 2:05 PM

The calendar extender has a client-side OnClientDateSelectionChanged event.  One way, though I don't know if it's the best is to add a dummy hidden button and handle the click event of the button.  Now in the OnClientDateSelectionChanged function, call the button click event.  It will postback to the button's click event on the server and you can do your processing there.

Thursday, October 7, 2010 2:42 PM

Thank you for the quick reply.

i dont need the whole page to pastback... i could of set the IsPostBack property on the textbox to true and do something in the TextChange event. 

i want to Populate my DropDownList with items by an Ajax call and not by full PostBack. I have user filled information in the form and if i PostBack the page, ill lose that information.

Thursday, October 7, 2010 3:35 PM

Even if only the contents of the UpdatePanel get updated the page still goes through the whole page life cycle this is done to hide the postback from the user but a partial-postback still happens, you could keep everything in the client and avoid a postback using ASP.NET AJAX or jQuery to call a WebService (or PageMethod) to get the contents of the DropDownList when the DateChange event gets fired, if interested check this link for samples an tutorials.