Welcome Guest Search | Active Topics | Sign In | Register

Combine EO DatePicker with AJAX.NET (DatePicker SelectedChanged didn't run) Options
Kusno
Posted: Thursday, June 25, 2009 4:00:08 AM
Rank: Member
Groups: Member

Joined: 10/9/2007
Posts: 15
Dear EO Staff.

I want to combine EO DatePicker with AJAX.NET.
But, EO DatePicker couldn't trigger its SelectionChanged event to effect controls in AJAX.NET UpdatePanel.

This is the code list :
Code: HTML/ASPX
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server"> 
      <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>  
        <table width="100%">
            <tr>
                <td>
                    Interest Value Date</td>
                <td style="width: 682px">
                    <eo:DatePicker ID="DTFrom" runat="server" AllowMultiSelect="False" AutoPostbackOnSelect="True" ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
                        DisabledDates="" EnableViewState="False" MonthColumns="2" OtherMonthDayVisible="True" PickerFormat="yyyy-MM-dd" PopupShadowColor="Blue" PopupShadowDepth="1" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2007-08-01">
                        <TodayStyle CssText="border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
                        <PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
                        <SelectedDayStyle CssText="background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <PopupExpandEffect Type="RevealTopToBottom" />
                        <WeekendDayStyle CssText="color:Red;" />
                        <DisabledDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <PopupCollapseEffect Type="GlideTopToBottom" />
                        <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
                        <TitleArrowStyle CssText="cursor:hand" />
                        <DayHoverStyle CssText="border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
                        <MonthStyle CssText="font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px; font-family: tahoma" />
                        <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
                        <OtherMonthDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <MonthTitleStyle CssText="font-weight:bold;" />
                        <DayHeaderStyle CssText="border-bottom: #aca899 1px solid" />
                        <DayStyle CssText="border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                    </eo:DatePicker>                     
                </td>
            </tr>
            <tr>
                <td>
                    Interest Due Date</td>
                <td >
                    <eo:DatePicker ID="DTTo" runat="server" AllowMultiSelect="False" AutoPostbackOnSelect="True" ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
                        DisabledDates="" EnableViewState="False" MonthColumns="2" OtherMonthDayVisible="True" PickerFormat="yyyy-MM-dd" PopupShadowColor="Blue" PopupShadowDepth="1" SelectedDates=""
                        TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2007-08-01">
                        <TodayStyle CssText="border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
                        <PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
                        <SelectedDayStyle CssText="background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <PopupExpandEffect Type="RevealTopToBottom" />
                        <WeekendDayStyle CssText="color:Red;" />
                        <DisabledDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <PopupCollapseEffect Type="GlideTopToBottom" />
                        <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
                        <TitleArrowStyle CssText="cursor:hand" />
                        <DayHoverStyle CssText="border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
                        <MonthStyle CssText="font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px; font-family: tahoma" />
                        <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
                        <OtherMonthDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <MonthTitleStyle CssText="font-weight:bold;" />
                        <DayHeaderStyle CssText="border-bottom: #aca899 1px solid" />
                        <DayStyle CssText="border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                    </eo:DatePicker>
                </td>
            </tr>
            <tr>
                <td>
                    Period :</td>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel8" runat="server">
                        <ContentTemplate>
                            <asp:Label ID="LbPeriod" runat="server"></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="DTFrom" EventName="SelectionChanged" />
                            <asp:AsyncPostBackTrigger ControlID="DTTo" EventName="SelectionChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td >
                    Amount</td>
                <td style="width: 682px">
                    <asp:TextBox ID="TxtAmount" runat="server" AutoPostBack="True">0</asp:TextBox><input id="LbAmount" runat="server" maxlength="0" readonly="readonly" style="font-weight: bold;
                        font-size: 9pt; width: 130px; color: red; border-top-style: none; border-right-style: none;
                        border-left-style: none; height: 16px; background-color: transparent; border-bottom-style: none"
                        type="text" value="1" />
                         <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" TargetControlID="TxtAmount" FilterType="Custom, Numbers" ValidChars="." />
                        </td>
            </tr>
            <tr>
                <td >
                    Treasury Rate</td>
                <td style="width: 682px">
                    <asp:TextBox ID="TxtTreasuryRate" runat="server" AutoPostBack="True">0</asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TxtTreasuryRate" FilterType="Custom, Numbers" ValidChars="." />
                    </td>
            </tr>
            <tr>
                <td>
                    In House Rate</td>
                <td style="width: 682px">
                    <asp:TextBox ID="TxtInHouseRate" runat="server">0</asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="TxtInHouseRate" FilterType="Custom, Numbers" ValidChars="." />
                    </td>
            </tr>
            <tr>
                <td>
                    Customer Rate</td>
                <td style="width: 682px" >
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:TextBox ID="TxtCustomerRate" runat="server" Width="56px" ReadOnly="True">0</asp:TextBox>
                            %  Rate :<asp:TextBox ID="TxtTreasuryRate1" runat="server" Width="55px" ReadOnly="True">0</asp:TextBox>
                    % + C/A :  <asp:TextBox ID="TxtCARate" runat="server" Width="70px" AutoPostBack="True">0</asp:TextBox>
                    %  +  Add SP :
                    <asp:TextBox ID="TxtAddSP" runat="server" Width="71px" AutoPostBack="True">0</asp:TextBox>
                     <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" TargetControlID="TxtAddSP" FilterType="Custom, Numbers" ValidChars="." />
                  <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" runat="server" TargetControlID="TxtCARate" FilterType="Custom, Numbers" ValidChars="." />
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="TxtTreasuryRate" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="TxtAddSP" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="TxtCARate" EventName="TextChanged" />
                        </Triggers>
                  </asp:UpdatePanel>
                    </td>
            </tr>
            <tr>
                <td style="width: 282px">
                    Interest :</td>
                <td style="width: 682px">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                    <asp:TextBox ID="TxtInterest" runat="server" ReadOnly="True"></asp:TextBox>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="TxtTreasuryRate" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="TxtCARate" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="TxtAddSP" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="TxtAmount" EventName="TextChanged" />
                            <asp:AsyncPostBackTrigger ControlID="DTFrom" EventName="SelectionChanged" />
                            <asp:AsyncPostBackTrigger ControlID="DTTo" EventName="SelectionChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel7" runat="server">
                        <ContentTemplate>
                    <asp:Button ID="CmdSave" runat="server" Text="Save" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
                <td style="width: 682px">          
                </td>
            </tr>
        </table>
    </form>
</body>
</html>


Code: Visual Basic.NET
Imports Subgurim.Controles

Partial Class Default4
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then  
            DTFrom.SelectedDate = Format(Now.Date, "yyyy-MM-dd")
            DTTo.SelectedDate = Format(Now.Date, "yyyy-MM-dd")
        End If
    End Sub

    Protected Sub TxtTreasuryRate_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtTreasuryRate.TextChanged
        CalculateCustomerRate()
        CalculateInterest()
    End Sub

    Protected Sub TxtAmount_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtAmount.TextChanged
        CalculateInterest()
    End Sub

    Sub CalculateCustomerRate()
        TxtTreasuryRate1.Text = Val(CDbl(TxtTreasuryRate.Text.Trim))
        TxtCustomerRate.Text = Val(CDbl(TxtTreasuryRate1.Text.Trim)) + Val(CDbl(TxtCARate.Text.Trim)) + Val(CDbl(TxtAddSP.Text.Trim))
    End Sub

    Sub CalculateInterest()
        Dim d As Int32 = DateDiff(DateInterval.Day, DTFrom.SelectedDate, DTTo.SelectedDate)
        Dim Interest As Double = (((Val(CDbl(TxtAmount.Text)) / 100) * Val(CDbl(TxtCustomerRate.Text.Trim))) / 360) * d
        TxtInterest.Text = Format(Interest, "##,###,###,###.#0")
    End Sub

    Protected Sub TxtCARate_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtCARate.TextChanged
        CalculateCustomerRate()
        CalculateInterest()
    End Sub

    Protected Sub TxtAddSP_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtAddSP.TextChanged
        CalculateCustomerRate()
        CalculateInterest()
    End Sub

    Protected Sub DTFrom_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DTFrom.SelectionChanged
        LbPeriod.Text = DateDiff("d", CDate(DTFrom.SelectedDate), CDate(DTTo.SelectedDate))
        CalculateInterest()
    End Sub

    Protected Sub DTTo_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DTTo.SelectionChanged
        LbPeriod.Text = DateDiff("d", CDate(DTFrom.SelectedDate), CDate(DTTo.SelectedDate))
        CalculateInterest()
    End Sub
End Class
eo_support
Posted: Thursday, June 25, 2009 12:36:52 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Please clear EnableViewState="False" on the DatePickers. ViewState is needed in order for Selectionchanged event to function.

Thanks!
Kusno
Posted: Thursday, June 25, 2009 9:32:18 PM
Rank: Member
Groups: Member

Joined: 10/9/2007
Posts: 15
GREAT !!! It works !!!. Thanks a lot bro !!!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.