asp.netvb.netcalendarajaxcontroltoolkitcalendarextender

Ajax Toolkit Calendar Extender, Pops up twice after selection


I am having very strange issue. I am using the Ajax Toolkit Calendar Extender. I have Update Panel - > ListView -> TextBox (AutoPostBack=Yes). If I type in box it will update to db then do update panel using code behind updatepanel.update(). This works fine. So I want to put calendar in the text field so I use Ajax Calendar Extender and call the target control ID of the textbox and when I am in there I click the textbox and calendar pops up then I choose date and textbox changes to new date then updates to db then postbacks, but the problem is the calendar pops up again after the postback. I need a way to hide that damn calendar after selecting date the first time.

<asp:TextBox ID="txtDespatchDate" runat="server" CssClass="tblDespContTxtLst" Text='<%# Eval("DescDespatchDate") %>' Width="70px" AutoPostBack="True" OnTextChanged="updDespatchLine" AutoComplete="Off" />

<ajaxToolkit:CalendarExtender ID="calDespatchDate" runat="server" CssClass="Calendar" Format="dd/MM/yyyy" PopupPosition="BottomLeft" TargetControlID="txtDespatchDate"  />

Solution

  • I figured this one out a long time ago, and being on a server and all and doing postbacks I couldnt get around it using the ajax extender, so I have to use JQuery, I did something like this;

    Code Behind

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       ScriptManager.RegisterStartupScript(NameOfUpdatePanel, Me.GetType, "SuperCalendar", "$( function() {
          $('.Calendar').datepicker({ dateFormat: 'dd/mm/yy'}); } );", True)
    End Sub
    

    ASP Page

    <asp:UpdatePanel ID="NameOfUpdatePanel" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
          <asp:TextBox ID="txtBox1" runat="server" CssClass="Calendar" />
       </ContentTemplate>
    </asp:UpdatePanel>
    

    You need to add the latest JQuery Header to the top of your page like;

    <script src="../Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    

    All you have to do is every time you want a date popup you just add the Calendar Class to it so;

    CssClass="SomeTextBoxClass Calendar"
    

    I dont get any problems after postbacks with it popping up anymore.