This is a migrated thread and some comments may be shown as answers.

RadDatePicker - SelectedDateChanged problem

8 Answers 642 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 09 Mar 2011, 02:00 AM


Ok, I have sorted out what the problem really is and I'm ready to post now (sorry to those who read my false start earlier)

On this form I have a 2 RadDatePickers, a couple of Dropdowns and a text box.

The Dropdowns let the users select some pre selected date options to which the date pickers set themselves. Stuff like 'This Month' or The Year'. etc.

The DatePickers have SelectDateChanged Events wired up. So if the user selects This Year from a dropdown,(1/1/2011 - 31/12/2011) but then changes the first date picker to 5/1/2011, the SelectedDateChanged event resets the dropdown to some default value (it's no longer a 'This Year' view)..

The textbox on the other hand lets you enter a number of days. This number is used to set the End Date to that many days after the selected Start Date and uses Jquery to perform the update. The jQuery also prevents the user entering in non numeric characters.

So the user enters say the number 3, and the End Date is modified. However, It is this update that is firing the SelectedDateChanged event!

I don't want to the Date Picker to fire this event when the textboxes jQuery executes, I want it to only fire when the user selects a date from the date picker.

Is this possible?
 

8 Answers, 1 is accepted

Sort by
0
Brad
Top achievements
Rank 1
answered on 14 Mar 2011, 05:22 AM
I hate bumping my own messages. But I figure it is slipped under the radar a week after I posted it.

How do I make the SelectedDateChange even on the RadDatePicker only fire when the user selects and changes the date? Not when some javascript changes the date?
0
Mira
Telerik team
answered on 14 Mar 2011, 10:13 AM
Hello Brad,

Unfortunately it is not possible the SelectedDateChanged event to fire conditionally.
You can provide more information on your scenario, so that we can suggest a workaround.

Regards,
Mira
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Brad
Top achievements
Rank 1
answered on 15 Mar 2011, 12:18 AM
Mira

Ok. Here is a detailed and simplifed version of the issue.

On the page I have

1  x Dropdown list
1 x Text Box (hidden by default)
2 x RadDatePicker. (start and end date)

Selecting items on the dropdown can cause different effects. For now I'll limit those options to three for the sake of this example.

Option 0 - Custom
Option 1 - This Week
Option 2 - Number of Days from Now.

Option 0 - Custom expects the user to use the Start and End datePickers to set a date range. Simple.

Selecting the 'Option 1 - This Week' option causes an Autopostback that looks at today date and set the date range to the days of this week, Sunday to Saturday.

Note: if they have selected Option 1, and the datepickers are set to show the dates this week, if the user then changes one of the date pickers the selectedDateChanged it can be assumed that the DatePickers no longer display 'This Week'. Therefore the event fires and resets the dropdown to Option 0 - Custom and hides the textbox (see option 2 below)

If they select Option 2 - Number of days from now, two things happen.,

First, the hidden textbox appears and is seeded with the value of 1.
Then the start date is set to today and the end date to tomorrow (1 day after today).
That all happens in the code behind. Simple.

Now, I needed to put ajax validation on the textbox. Using JQuery I am able check the textbox every time a key is pressed and instantly remove any characters that are not numeric. In fact, I reset it to 1 any time an invalid character is entered. (that'll learn them) :)

That code looks like this.

if (isNaN($(this).val())) {
        iNum  = 1;
        $(this).val('1');
    }

Assuming the number in the box at that time is numerical it is used for a calculation to set the RadDatePickers.

The javascript code that sets the date pickers looks like this

startDate = new Date();
startDate.setDate(startDate.getDate() + iNum);
startDatePicker.set_selectedDate(startDate);

You get the idea..

And it is form here the problem starts.

Once the Javascript sets the datePickers, they believe their SelectedDateChanged event should be exectuted. And as that event resets the drop down AND hides the very textbox they just put a numeric value in, this is not ideal.

I don't know how to fix this.

One idea I had was I seem to recall reading something about how the datePickers store their current and previous date. Just a hunch, but could I not set the current and previous dates to be the same new date? Would that stop the event from firing?

Can that be set from JavaScript?

Is there any other property of the DatePickers I could use to kill the SelectedDateChanged event?

Brad
0
Mira
Telerik team
answered on 17 Mar 2011, 12:57 PM
Hello Brad,

In order to implement the desired functionality, I recommend that you ajax-enable your scenario and make the datepicker update only the required controls and not the whole page.
You can examine this help topic for additional information.

Please give this approach a try and let me know how it goes.
 
Best wishes,
Mira
the Telerik team
0
Brad
Top achievements
Rank 1
answered on 18 Mar 2011, 02:12 AM
Mira

I have my doubts this will work

The problem is not how the DataPickers are updating required controls or if they are ajaxed or not. The problem it is the fact they are doing this update after some javascript has set the date in either of them.

I don't want them to call their Ajaxed or Non-Ajaxed SelectedDateChanged methods unless the user manually changed the date through the UI. 

I am putting together a small test page that demonstrates the problem. I have put it in my next post.

Brad
0
Brad
Top achievements
Rank 1
answered on 18 Mar 2011, 03:15 AM
Here is my test project.

As MIra suggested I added Ajax to the date picker and told it only to change the value of a particular control.  Alas, this did not help.

When you change the date via the date picker, its SelectedDateChange event fires which change the text in Literal control. Simple stuff. This is desired functionality.

When you enter a number into the input box, some jquery goodness calls a javascript function called SetDatePicker that basically takes the number you entered and adds that many days to today date and sets it to the date picker.  (Note: if you enter a non numeric character into the text box it's text is set to 1. )

When you use the text box however the SelectedDateChange Event gets called changing the text in the literal control. It is this event I am trying to stop when the javascript changes the date.

In the ASPX page put this.
(Note: You'll need a jquery library in your page)
<head runat="server">
    <title>Rad Date Picker Test</title>
    <script src="../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
 
$(document).ready(function() {
    $('.tbValue').live('keyup', setDatePicker);
});
 
 
function setDatePicker() {
 
    var iNum;
    if (isNaN($(this).val())) {
        $(this).val('1');
    }
 
    iNum = parseFloat($(this).val());
 
    var rDatePicker;
    var newDate;
   
    var components = Sys.Application.getComponents();
    for (var i = 0; i < components.length; i++) {
        var type = Object.getType(components[i]).getName();
        if (type == "Telerik.Web.UI.RadDatePicker") {
            if (components[i].get_id().indexOf("RadDatePicker1") != -1) {
                rDatePicker = components[i];
            }
        }
    }
 
    newDate = new Date();
    newDate.setDate(newDate.getDate() + iNum);
    rDatePicker.set_selectedDate(newDate);
}
 
</script>
     
</head>
<body>
    <form id="form1" runat="server">
 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
 
    <div>
        <asp:Literal ID="SomeText" runat="server" Text="My text is not bold" />
        <telerik:RadDatePicker ID="RadDatePicker1"
            OnSelectedDateChanged="RadDatePicker1_SelectedDateChanged" 
            runat="server"
            AutoPostBack="True">
        </telerik:RadDatePicker>
      
        Add Days: <input id="tbValue" class="tbValue" type="text" autocomplete="off" value="1" />
         
    </div>
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadDatePicker1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="SomeText" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    </form>
</body>
</html>

And in the code behind for this page, put this event

protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs args)
       {
 
           if (SomeText.Text == "My text is not bold")
               SomeText.Text = "<strong>My text IS bold</strong>";
           else
               SomeText.Text = "My text is not bold";
       }

My problem once again. I don't want the SelectedDateChanged event to fire when Javascript sets the date. Only when the user manually changes it through the UI. 

0
Accepted
Mira
Telerik team
answered on 22 Mar 2011, 04:03 PM
Hello Brad,

Thank you for the additional information.

In order to implement the desired functionality, I recommend that store the information whether the date is set by javascript (in a hidden field for example) and set the boldness of the text only when it is not.

Please give this approach a try and let me know how it goes.

Best wishes,
Mira
the Telerik team
0
Brad
Top achievements
Rank 1
answered on 23 Mar 2011, 03:12 AM
Mira

That did the trick! I'm a little stunned I did not think of that myself.

I put this in the aspx page..

<asp:hiddenfield id="DateFromJS" value=""  runat="server"/>

Then this in the js file when the javascript is setting the date boxes

$("*[id$='DateFromJS']").val('1');

And in my code behind page in the datePickers SelecteDateChanged function did this.

if (DateFromJS.Value != "1")
{
      // Do the stuff
}
 
DateFromJS.Value = "0";

Thanks so much Mira. This one had me stumped for around 3 weeks.

Tags
General Discussions
Asked by
Brad
Top achievements
Rank 1
Answers by
Brad
Top achievements
Rank 1
Mira
Telerik team
Share this question
or