Rad Calendar and post back outside of Calendar

[Carlos]

Hi,

We are using a Rad Calendar for a control that we integrated into our website.  Which works great.  Until someone uses our "Add to Cart" button.  I have mixed some JS and some of the Rad Calendar JS calls.  

I have a box that, on click, opens my calendar and you can choose a day. Then the user chooses a time from a list when we get a post back from our service.

The issue is, if the user does not choose a "ticket" quantity, and chooses "add to cart," the calendar and the time stays chosen in the background, but my 'mask' resets to the default.  I am using the Rad Calendar to call the functions on the front end to show  and hide my 'masks'.  

How would I write the function so that the 'masks' only show if there no Time and Date chosen, but also make the selections show in the boxes if they are chosen, but "Add to Cart" postback occurs.

So what I need is the Calendar value AND the Time to still show in the boxes if the "Add to Cart" button is chosen and there is an error, such as not quantity.

Any and all help is appreciated.

I have screen shots attached.  I have put notes in the screen shots.


Myc JS and Calendar aspx code is below:

ASPX Code:

<asp:UpdatePanel runat="server" ID="up1" UpdateMode="Always">
<ContentTemplate>
<asp:Panel ID="Panel1" CssClass="ControlPanel" runat="server">

<asp:Table runat="server" ID="contents" CssClass="MuseumDateTimeTable">

<asp:TableRow ID="trCalendar" runat="server" VerticalAlign="Top">
<asp:TableCell ID="tcCalendar" runat="server" CssClass="CalendarOverallCell">
<div class="MuseumStepHeaderWrapper">
<div class="MuseumVariantStepText">
<asp:Label runat="server" ID="lblMuseumStepOne"><%=GetLocaleResourceString("Museum.StepOne")%></asp:Label>

</div>
  <asp:Label runat="server" ID="ltNextAvailableDate" Text="" CssClass="MuseumNextAvailableDate" />
    <%--
<div class="MuseumVariantChooseText">
<%=GetLocaleResourceString("Museum.MuseumChooseDateTimeText")%>
</div>--%>
</div>

    <div id="MuseumSelectedDayBox">
        <%--
<div id="DateSelectedTitle">
<%=GetLocaleResourceString("Museum.MuseumDateSelectedTitle")%></div>--%>
<div id="DateSelectedDay">

<asp:Literal runat="server" ID="ltMuseumDateSelectedDay" Text="" />
</div>
</div>


    <asp:HiddenField runat="server" ID="ShowCalendar" ClientIDMode="Static" />
<telerik:RadCalendar ID="tkCalendar" runat="server" EnableMultiSelect="false" OnSelectionChanged="tkCalendar_SelectionChange"
CssClass="CalendarOverall" AutoPostBack="true" ShowRowHeaders="false" NavigationPrevToolTip="Previous Month"
NavigationNextToolTip="Next Month" Skin="Special" EnableEmbeddedSkins="false"
EnableEmbeddedBaseStylesheet="false" EnableMonthYearFastNavigation="false" DayNameFormat="Short"
UseColumnHeadersAsSelectors="false">

<ClientEvents OnDateSelecting="LoadingTimes" />
<ClientEvents OnInit="InitializeCalendar" />

<ClientEvents OnCalendarViewChanging="MonthChangeShow" />
<ClientEvents OnDateSelected="EnableTimes" />

<SelectedDayStyle CssClass="CalendarSelectedDay" />
<OtherMonthDayStyle CssClass="CalendarOtherMonthDay" />
<TitleStyle CssClass="CalendarTitle" />
<DayStyle CssClass="CalendarDay" />
<SpecialDays>
<telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday">
</telerik:RadCalendarDay>
</SpecialDays>
<CalendarDayTemplates>
<telerik:DayTemplate ID="BlackOutDayTemplate" runat="server">
<Content>
<div class="UnavailableKeyText">
<%=GetLocaleResourceString("Museum.EventCalendar.Unavailable")%>
</div>
</Content>
</telerik:DayTemplate>
<telerik:DayTemplate ID="SoldOutDayTemplate" runat="server">
<Content>
<div class="SoldOutDateKeyText">
<%=GetLocaleResourceString("Museum.EventCalendar.SoldOut")%>
</div>
</Content>
</telerik:DayTemplate>
<telerik:DayTemplate ID="PreviousDayTemplate" runat="server">
<Content>
<div class="PreviousDate">
</div>
</Content>
</telerik:DayTemplate>
</CalendarDayTemplates>
</telerik:RadCalendar>
</asp:TableCell>
<%--<asp:TableCell ID="tcCalSpacer" runat="server" Width="10px">
<asp:Label ID="Label1" runat="server" Text="  "></asp:Label>
</asp:TableCell> --%>
<asp:TableCell ID="tcAvailableTimes" runat="server" VerticalAlign="Top" CssClass="MuseumAvailableTimes">
    <div class="MuseumStepHeaderWrapper">
<div class="MuseumVariantStepText">
    <asp:Label runat="server" ID="lblMuseumStepTwo"><%=GetLocaleResourceString("Museum.StepTwo")%></asp:Label>
</div>
    <%--
    <div class="MuseumVariantChooseText">
<%=GetLocaleResourceString("Museum.MuseumChooseQuantityText")%>
</div>--%>
</div>

<asp:ListBox CssClass="timeListBox" AutoPostBack="True" OnSelectedIndexChanged="TimedListBoxSelectionChanged"
ID="TimesAvailable" runat="server"></asp:ListBox>
<asp:Label ID="lblTimesMessage" runat="server" CssClass="MuseumTimesMessage"></asp:Label>
</asp:TableCell></asp:TableRow>
</asp:Table>
<asp:HiddenField ID="hfDateLock" value="false" runat="server" />
<asp:HiddenField ID="hfLastDate" Value=""  runat="server"/>
<div id="museumCalendarLoadingContainer">
</div>
<div id="museumCalendarLoadingContent">
<%=GetLocaleResourceString("Museum.MuseumCalendarEventProcessingText")%><br />
<img src="../App_Themes/Museum/images/museumLayout/loading.gif" /></div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

Javascript Code:

$(document).ready(function () {
    $('#museumCalendarLoadingContainer').hide();
    $('#museumCalendarLoadingContent').hide();
    //$('table.RadCalendar_Special').hide();
    $('#MuseumSelectedDayBox').removeClass('chosen');
        //On initial start adjust generated size and prepend blank option to list
    $(".timeListBox").attr('size', '1');
        //TODO: If 'No Shows Today' is in list don't show 'Choose Time' text only show 'No Shows Today'
    if ($('.timeListBox option[value="NoShows"]').length) {
        //Do nothing and show 'No Shows' message
        $('.timeListBox').addClass('SoldOutDateKeyText');
        }else{
        $('<option value="" selected>Choose a Time</option>').prependTo('.timeListBox');
    }

    //Default Choose Date on Dom Load and disable Choose Time
    $('#DateSelectedDay').html('Choose Date');
    if ($('#DateSelectedDay').html('Choose Date')) {
        $('.timeListBox').prop('disabled', 'disabled').addClass('disabled');
        $('<option value="" selected>Choose a Time</option>').prependTo('.timeListBox');
        $('.timeListBox').before('<div class="disabledTrigger"></div>');
    }

    $('.disabledTrigger').click(function (e) {
        $('#disabledMessage').hide();
            $('<div id="disabledMessage">Please choose date first<span id="closeFieldAlert">X</span></div>').prependTo('body').hide().delay(300).slideDown(400).delay(6000).slideUp(400);
            $('#closeFieldAlert, #disabledMessage').click(function () {
                $('#disabledMessage').hide();
            });
        // alert("Please choose DATE first");
    });

$(document).on('click', '#MuseumSelectedDayBox', function () {
    $('#MuseumSelectedDayBox').addClass('chosen');
    $("table.RadCalendar_Special").fadeIn(300);
        $('#calendarModalCover').show();

});

});

//Show/Hide calendar and show calendar again on Month Change using the ASP.NET Hidden field.
function pageLoad(sender, args) {

    if ($telerik.findElement(document, "ShowCalendar").value == "show") {

        $("table.RadCalendar_Special").show();
    };
    $telerik.findElement(document, "ShowCalendar").value = "hide";
    $("#calendardiv").click(function () {

        $("table.RadCalendar_Special").show();
    });
}

function MonthChangeShow(sender, eventArgs) {
    $telerik.findElement(document,"ShowCalendar").value = "show";
}





//DateSelecting - OnDateSelecting
function LoadingTimes(sender, eventArgs) {
$('#museumCalendarLoadingContainer').show();
$('#museumCalendarLoadingContent').show();
        $('#calendarModalCover').hide();

}

//Calendar Initialized - OnInit
function InitializeCalendar(sender) {

    //alert('initialize calendar');
$('#museumCalendarLoadingContainer').hide();
$('#museumCalendarLoadingContent').hide();
$(".timeListBox").attr('size', '1');
}


//Enable Times on date selected - OnDateSelected - this is not really working because of postback
function EnableTimes(sender, eventArgs) {
//  alert('enable times');
    //sender.set_autoPostBack(true);//Kind of works
    $('.timeListBox').prop('disabled', false).removeClass('disabled');
    $('table.RadCalendar_Special').hide();
}

Thanks,

Carlos

[Konstantin Dikov]

Hi Carlos,

I have gone through the attached screenshots and I have tested the provided code-snippets on my end, but due to some missing CSS classes and server-side logic I am not able to get test the same scenario that you have.

However, since you are implementing some custom logic for handling this and the issue that you are facing is actually related to your implementation, the only thing that I could suggest is that you handle the client-side pageLoad event, get reference to the calendar's and the list box's client-side APIs and apply some custom logic for determining whether or not you should display the value or not. 

I have noticed that you are currently using HiddenField controls, which is the approach that you could implement for determining whether or not to set both values after postback.

Hope this helps.



Regards,
Konstantin Dikov
Telerik