Rad Ajax Loading panel not displaying on Rad Date time picker event change

[Roshil]

I am using a RadDateTime Picker and different controls like dropdown list etc on a ASP.Net web user control, And  I have RadAjaxLoadingPanel and RadAjaxPanel in my ASP.Net page.
Now when any event gets fired from any controls of the user control, it does display a loading panel in the main page; although the events fire properly and the page is updated.
The problem causing is that the loading panel not displaying only when the RadDateTime Picker selected the first time, Once we selected a date and try to change the selected date this time the loading panel works properly.
Note that the usercontrols are not added dynamically, they exist when the page is loaded.
Can anyone please guide me with an alternative way of achieving this? Or if I am missing something? I am not using AjaxManager in the ASP.net page.

[Genti]

Hi Roshil,

I assume the error lies in the fact that you are making a postback only when the data changed event is fired.
You can tweak the definition of the RadDateTimePicker AutoPostback property in the following:

AutoPostBack can have any of the following values:

• "None": no postbacks occur when the user changes the selection.
• "Both": a postback occurs when the user changes the selection.
• "TimeView": a postback occurs when the user types a new value in the input area or selects a time in the popup time view.
• "Calendar": a postback occurs when the user types a new value in the input area or selects a date in the popup calendar.

So if you need a postback when someone selects an item in the calendar, you might go with the "Calendar" option.

Best wishes,
Genti
the Telerik team

[Roshil]

I have already set autopostback control value to 'both'. That means the ajax loading panel should display on both calendar and time event changed.

[Genti]

Hi Roshil,

I tried to reproduce this issue on my side but at no avail.

I am attaching a simple solution so that you can modify it to illustrate the issue if I am missing anything.

Best wishes,
Genti
the Telerik team

[Roshil]

The Rad Dateime Picker  am used in the web user control
 <telerik:RadDateTimePicker ID="datetimeFirstPref" runat="server" Culture="en-US" AutoPostBackControl="Both"
   OnSelectedDateChanged="datetimeFirstPref_SelectedDateChanged" AutoPostBack="True">
                                    <ClientEvents OnDateSelected="DateSelectedFirstPref" />
                                    <TimeView CellSpacing="-1" Columns="4" Interval="00:30:00" 
                                       OnClientTimeSelecting="FirstPrefClientTimeSelected">
                                    </TimeView>
                                    <TimePopupButton HoverImageUrl="" ImageUrl="" />
                                    <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                                    </Calendar>
                                    <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" AutoPostBack="True">
                                    </DateInput>
                                    <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                </telerik:RadDateTimePicker>



The script am using in the main page is,

function DateSelectedFirstPref(sender, args) {

                try {
                    var val = document.getElementById('<%=hdnFirstPrefMinTime.ClientID %>').value;
                    var isHourlyTeam = document.getElementById('<%=hdnisHourlyTeam.ClientID %>').value;
                    var time = sender.get_selectedDate().format("HH:MM:ss");
                    var date = sender.get_selectedDate();
                    if (date != null)
                        isTimeSelectedFirstPref = true;
                    if (!isTimeSelectedFirstPref)
                        sender.get_timeView().setTime(val.split(":")[0], val.split(":")[1], val.split(":")[2], 0);
                    else if (time < val)
                        sender.get_timeView().setTime(val.split(":")[0], val.split(":")[1], val.split(":")[2], 0);

                    isTimeSelectedFirstPref = true;

                }
                catch (e) { }

            }

Note: The loading panel not displaying only the very first Date or Time event changed, afterwards it displaying very perfectly on both date and time event changed. Please help me on this issue.

[Genti]

Hi Roshil,

I am reattaching the modified version of my project that illustrates what you want to achieve.

Notice that when you define the RadDateTimePicker it is enought to specify  AutoPostBackControl="Both" . You should not specify AutoPostBack="True" as it will make a postback before your client side function gets called.

All the best,
Genti
the Telerik team

[Roshil]

Hi Genti,
    I checked the modified project, Its working fine,
      but can you include in the script,  

           var val = "08:00:00";

     
  Please check with the below script, am still stuck here when i include var val="08:00:00" loading panel not functioning.

 

var isTimeSelectedFirstPref = false;

function DateSelectedFirstPref(sender, args) {
		try {
  
		        var val = "08:00:00";
			var time = sender.get_selectedDate().format("HH:MM:ss");
			var date = sender.get_selectedDate();
			if (date != null)
				isTimeSelectedFirstPref = true;
			if (!isTimeSelectedFirstPref) {
				sender.get_timeView().setTime(val.split(":")[0], val.split(":")[1], val.split(":")[2], 0);
			}
			else if (time < val) {
				sender.get_timeView().setTime(val.split(":")[0], val.split(":")[1], val.split(":")[2], 0);
			}
 
			isTimeSelectedFirstPref = true;
 
		}
		catch (e) { }
 
	}
 
Note:  For RadDateTimePicker i specify only  AutoPostBackControl="Both" and removed the AutoPostBack="True"
Please help me on this issue.

[Genti]

Hi Roshil,

I noticed even before that you were calling the

sender.get_timeView().setTime()

inside the

DateSelectedFirstPref()

function. This way you are making two immediate calls to the server to change the date/time. The server is going to reject the immediate requests making your ajax fail.

So, in order to make it work you should not call the setTime() inside the DeteSelectedFirstPref() method.


All the best,
Genti
the Telerik team

[Roshil]

Hi Genti,
      I couldn't find any solution without using the setTime() inside the DeteSelectedFirstPref() method.
      Any alternate ways to set the time and should work the loading panel?

Thanks,
Roshil.

[Genti]

Hello Roshil,

One simple solution would be to handle the logic server side.
I.e

Protected Sub datetimeFirstPref_SelectedDateChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim dtpicker As RadDateTimePicker = DirectCast(sender, RadDateTimePicker)

    Dim myDate As Date = dtpicker.SelectedDate

    'perform the operations that you would do client side
End Sub

This way you won't need the <ClientEvents OnDateSelected="DateSelectedFirstPref" />
any more. You just need to implement the server side handler OnSelectedDateChanged="datetimeFirstPref_SelectedDateChanged". There you can also have a state variable to check whether is the first time the user has chosen a date or not.


Kind regards,
Genti
the Telerik team

[Roshil]

Hi Genti (Telerik Team),
       Thanks a lot. Its working fine. I didn't think about the server side, Its working good in server side.
        Sorry, Its been a long time to reply for your post.
        Once again thank you.

Regards,
Roshil