locked
Ajax Calendar Extender OnClientDateSelectionChanged in vb.net RRS feed

  • Question

  • User-858460272 posted

    hi guys,

    I am really new to the Ajax controls and i am struggling to get to grips with Calendar extender control even after having looked at the demos & tutorials.

    What i would like to do is have a date textbox with the calendar extender within it. I want the date field disabled so user can't type in text but only use the pop-up calendar to select a date entry.

    Once the user has selected a date from the Ajax Calendar extender control i want the field to display the date value BUT ALSO trigger an event which will alllow me to update a dropdown box which has a sql server datasource linked to it. I need to be able to pass a select statement to the datasource & then also databind() the dropdown box all on the event which is triggered when a date value is selected in the ajax calendar extender.

    I would prefer coding this in VB.Net but i don't mind having to use Javascript functions. My website is setup using a Matser page.

    So is it possible to do what i want or am i kidding myself?

    regards,

    Friday, October 17, 2008 11:34 AM

Answers

  • User-1597315603 posted
    Hi dabooj<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    <o:p> </o:p>
    The OnClientDateSelectionChanged is for JavaScript, in your scenario, we can use a hidden Button to call the server-side function form JavaScript.<o:p></o:p>
    <o:p> </o:p>
    Please try the following code, when the Selection is changed, the server-side function “changesource()” will be called, however, a postback will occur:<o:p></o:p>
    <o:p> </o:p>
    <o:p>  
    <%@ Page Language="C#" %>
    
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        public void changesource()
        {
            this.Label1.Text = DateTime.Now.ToLongTimeString();
        }
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            changesource();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function callserver() {
                $get("Button1").click();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        
        </div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox1" 
            onclientdateselectionchanged="callserver" >
        </cc1:CalendarExtender>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" style="display:none" onclick="Button1_Click" Text="Button" />
        </form>
    </body>
    </html>
    
     
    </o:p>

    <o:p> </o:p>
    Thanks.<o:p></o:p>

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 21, 2008 12:18 AM

All replies

  • User-858460272 posted

    Hi,

    To clarify my thread, Basically i want to update a datasources selectcommand when a user selects a date from the AJAX calendar extender.

    Is this possible? If so, what event for the AJAX calendar should i use (I've tried OnClientDateSelectionChanged but not sure how to get it working)

    Regards,

    Monday, October 20, 2008 4:42 AM
  • User-1597315603 posted
    Hi dabooj<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    <o:p> </o:p>
    The OnClientDateSelectionChanged is for JavaScript, in your scenario, we can use a hidden Button to call the server-side function form JavaScript.<o:p></o:p>
    <o:p> </o:p>
    Please try the following code, when the Selection is changed, the server-side function “changesource()” will be called, however, a postback will occur:<o:p></o:p>
    <o:p> </o:p>
    <o:p>  
    <%@ Page Language="C#" %>
    
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        public void changesource()
        {
            this.Label1.Text = DateTime.Now.ToLongTimeString();
        }
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            changesource();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function callserver() {
                $get("Button1").click();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        
        </div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox1" 
            onclientdateselectionchanged="callserver" >
        </cc1:CalendarExtender>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" style="display:none" onclick="Button1_Click" Text="Button" />
        </form>
    </body>
    </html>
    
     
    </o:p>

    <o:p> </o:p>
    Thanks.<o:p></o:p>

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 21, 2008 12:18 AM
  • User595747732 posted

    Hi,

     A bit late but thought I'd add it for others. Another way without using javascript would be to have the TextBox AutoPostBack and the set OnTextChanged trigger. So the TextBox code will look like this.

    <asp:TextBox ID="tbStartDate" runat="server" OnTextChanged="tbStartDate_TextChanged" AutoPostBack="True"></asp:TextBox>

     and your code behind will look something like this (converted from C# but should be right)  

     
    Protected Sub tbStartDate_TextChanged(ByVal sender As Object, ByVal e As EventArgs) 
        'Do your stuff 
    End Sub 
     
     
    Thursday, January 29, 2009 6:38 AM
  • User2134652429 posted

    But if this method is used, a postback keep occuring? Since the textbox have changed? Cause i have a similar suitation that he has. So i did try out your method, but a postback keep occurs

    Monday, February 2, 2009 9:54 AM
  • User595747732 posted

    This is what was asked for.

     "Once the user has selected a date from the Ajax Calendar extender control i want the field to display the date value BUT ALSO trigger an event which will alllow me to update a dropdown box "

     He wanted to trigger an event, which will cause a postback, to poplulate a DropDownList at the server using his server side code.

     His SQL data source will only be available from the server so a postback is required in this situation. Unless you make the SQL server available from the internet, although this would be a bad idea as securing it would be a night mare.

     If you don't want to do a full postback, you could do a callback instead. If your using .NET 3.5, AJAX support is built in, just add an AJAX UpdatePanel and put your DropDownList and button in it. This way only these controls will be updated and not the entire page. Go to this website to get information on AJAX.

    http://ajax.asp.net

     

    Monday, February 2, 2009 10:53 AM
  • User2134652429 posted

     thanks d3nz1! Cause it seems that i have the same suitation as he does. Haha, so i believe that the method doesnt work on me. Ok, will try out the callback instead. Thanks anw!

    Saturday, February 7, 2009 10:28 AM
  • User2134652429 posted

     Lance Zhang - MSFT

    I'm not encountering and postback using your method. I'm doing it with a masterpage. 

     
    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ByPackage.aspx.cs" Inherits="ByPackage" Title="Untitled Page" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <script type="text/javascript">
    function callserver() {

    $get("Button1").click();

    }
    </script>

    <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDateTB" OnClientDateSelectionChanged="callserver">
    </cc1:CalendarExtender>
    <br />
    <center>
      
    <asp:TextBox ID="StartDateTB" runat="server"></asp:TextBox></center>
    <center>
    <asp:Label ID="Label1" runat="server"></asp:Label> </center>
    <center>
    <asp:Button ID="Button1" runat="server" style="display:none" onclick="Button1_Click" Text="Button" /></center>
    </asp:Content>

     
    Sunday, February 8, 2009 8:25 AM