Skip to content

Commit 4efb2e3

Browse files
donchoMilkovMdonchoMilkovM
committed
docs(daterangepicker): update Client-side programming section
1 parent f5181e6 commit 4efb2e3

File tree

5 files changed

+222
-18
lines changed

5 files changed

+222
-18
lines changed

‎controls/daterangepicker/client-side-programming/events/ondateselected.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: OnDateSelected
3+
page_title: OnDateSelected - RadDateRangePicker
4+
description: Check our Web Forms article about OnDateSelected.
5+
slug: daterangepicker/client-side-programming/events/ondateselected
6+
tags: ondateselected
7+
published: True
8+
position: 3
9+
---
10+
11+
# OnDateSelected
12+
13+
14+
The **OnDateSelected** client-side event handler is called immediately after the value of the control's selection has changed.
15+
16+
>note The **OnDateSelected** event fires when selection is done on each of the child controls - the StartDatePicker, EndDatePicker or the Calendar.
17+
>
18+
19+
The event handler receives two arguments:
20+
21+
1. the object that fired the event.
22+
23+
1. an event arguments object that exposes the following methods:
24+
25+
26+
| Name | Return Type | Arguments | Description |
27+
| ------ | ------ | ------ | ------ |
28+
| **get_sender()** |Control instance||Returns instance of the Control whose date has been changed - RadCalendar or RadDatePicker|
29+
| **get_shouldPostBack()** |bool||Returns If the control should automatically perform a postback|
30+
| **set_shouldPostBack()** ||bool|Sets If the control should automatically perform a postback|
31+
32+
Check out sample use of this event in the [Client-Side Events demo](https://demos.telerik.com/aspnet-ajax/daterangepicker/client-sideprogramming/client-sideevents/defaultcs.aspx)
33+
34+
## Examples
35+
36+
````ASPX
37+
<telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRangePicker1" runat="server" Width="100%">
38+
<ClientEvents OnDateSelected="OnDateSelected" />
39+
</telerik:RadDateRangePicker>
40+
````
41+
42+
- Use get_sender() to define the control that triggered the event and log the selection on the console:
43+
44+
````JavaScript
45+
function OnDateSelected(sender, e) {
46+
var dateRangePicker = sender;
47+
var senderChildControl = e.get_sender();
48+
if (senderChildControl === dateRangePicker.get_startDatePicker() || senderChildControl === dateRangePicker.get_endDatePicker()) {
49+
//DatePicker triggered the event
50+
var selectedDate = senderChildControl.get_selectedDate();
51+
if (selectedDate != null) {
52+
console.log("OnDateSelected: " + selectedDate.toDateString() + " selected in " + senderChildControl.get_id() + "<br />");
53+
}
54+
else {
55+
console.log("OnDateSelected: Date cleared in " + senderChildControl.get_id() + "<br />");
56+
}
57+
}
58+
else {
59+
//Calendar triggered the event
60+
var calendarSelectedDates = senderChildControl.get_selectedDates();
61+
if (calendarSelectedDates.length == 0) {
62+
console.log("OnDateSelected: Date range cleared in " + senderChildControl.get_id() + "<br />");
63+
}
64+
else {
65+
if (calendarSelectedDates.length == 1) {
66+
var selectedDate = new Date(calendarSelectedDates[0])
67+
console.log("OnDateSelected: " + selectedDate.toDateString() + " selected in " + senderChildControl.get_id() + "<br />");
68+
}
69+
else {
70+
var selectedStartDate = new Date(calendarSelectedDates[0]);
71+
var selectedEndDate = new Date(calendarSelectedDates[calendarSelectedDates.length - 1]);
72+
73+
console.log("OnDateSelected: Date Range from " + selectedStartDate.toDateString() + " to " + selectedEndDate.toDateString() + " selected in " + senderChildControl.get_id() + "<br />");
74+
}
75+
}
76+
}
77+
}
78+
````
79+
80+
- Use set_shouldPostBack() to trigger a Postback when both Start and End date have been set:
81+
82+
````JavaScript
83+
function OnDateSelected(sender, args) {
84+
// trigger a postback when both start and end dates are selected
85+
if (sender.get_rangeSelectionStartDate() && sender.get_rangeSelectionEndDate()) {
86+
args.set_shouldPostBack(true);
87+
}
88+
}
89+
````
90+
91+
# See Also
92+
93+
* [Client-side Events Overview]({%slug datepicker/client-side-programming/events/overview%})
94+
95+
* [Server-side Events Overview]({%slug daterangepicker/server-side-programming/events/overview%})
96+
97+

‎controls/daterangepicker/client-side-programming/events/onpopupclosing.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: OnPopupClosing
3+
page_title: OnPopupClosing - RadDateRangePicker
4+
description: Check our Web Forms article about OnPopupClosing.
5+
slug: daterangepicker/client-side-programming/events/onpopupclosing
6+
tags: onpopupclosing
7+
published: True
8+
position: 2
9+
---
10+
11+
# OnPopupClosing
12+
13+
14+
The **OnPopupClosing** client-side event handler is called just before a popup calendar is closed.
15+
16+
17+
The event handler receives two arguments:
18+
19+
1. the object that fired the event.
20+
21+
1. an event arguments object that exposes the following methods:OnPopupClosing event arguments object
22+
23+
24+
| Name | Return Type | Arguments | Description |
25+
| ------ | ------ | ------ | ------ |
26+
| **get_popupControl()** | [Calendar]({%slug calendar/client-side-programming/radcalendar-object%}) client-side object ||Returns the client object for the time view or calendar that is about to close.|
27+
| **set_cancel(value)** ||bool|Lets you prevent the popup from closing.|
28+
29+
The following example demonstrates the **OnPopupClosing** event:
30+
31+
````ASPX
32+
<telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRadPicker1" runat="server">
33+
<ClientEvents OnPopupClosing="popupClosing" />
34+
</telerik:RadDateRangePicker>
35+
````
36+
37+
````JavaScript
38+
function popupClosing(sender, args) {
39+
alert("popup is closing");
40+
}
41+
````
42+
43+
Check out sample use of this event in the [Client-Side Events demo](https://demos.telerik.com/aspnet-ajax/daterangepicker/client-sideprogramming/client-sideevents/defaultcs.aspx)
44+
45+
46+
# See Also
47+
48+
* [Client-side Events Overview]({%slug daterangepicker/client-side-programming/events/overview%})
49+
50+
* [OnPopupOpening]({%slug daterangepicker/client-side-programming/events/onpopupopening%})
51+
52+

‎controls/daterangepicker/client-side-programming/events/onpopupopening.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: OnPopupOpening
3+
page_title: OnPopupOpening - RadDateRangePicker
4+
description: Check our Web Forms article about OnPopupOpening.
5+
slug: daterangepicker/client-side-programming/events/onpopupopening
6+
tags: onpopupopening
7+
published: True
8+
position: 1
9+
---
10+
11+
# OnPopupOpening
12+
13+
14+
The **OnPopupOpening** client-side event handler is called just before a popup calendar is initialized to the current selection in the input area and then displayed.
15+
16+
The event handler receives two arguments:
17+
18+
1. the object that fired the event.
19+
20+
1. an event arguments object that exposes the following methods:OnPopupOpening event arguments object
21+
22+
23+
| Name | Return Type | Arguments | Description |
24+
| ------ | ------ | ------ | ------ |
25+
| **get_popupControl()** | [RadCalendar]({%slug calendar/client-side-programming/radcalendar-object%}) client-side object ||Returns the client object for the time view or calendar that is about to be displayed.|
26+
| **set_cancelCalendarSynchronization(value)** ||bool|Lets you prevent the popup control from synchronizing its value to the value in the input area.|
27+
| **set_cancel(value)** ||bool|Lets you prevent the popup from appearing.|
28+
29+
The following example demonstrates the **OnPopupOpening** event:
30+
31+
````ASPX
32+
<telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRadPicker1" runat="server">
33+
<ClientEvents OnPopupOpening="popupOpening" />
34+
</telerik:RadDateRangePicker>
35+
````
36+
37+
````JavaScript
38+
function popupOpening(sender, args) {
39+
alert("popup is opening");
40+
}
41+
````
42+
43+
Check out sample use of this event in the [Client-Side Events demo](https://demos.telerik.com/aspnet-ajax/daterangepicker/client-sideprogramming/client-sideevents/defaultcs.aspx)
44+
45+
# See Also
46+
47+
* [Client-side Events Overview]({%slug daterangepicker/client-side-programming/events/overview%})
48+
49+
* [OnPopupClosing]({%slug daterangepicker/client-side-programming/events/onpopupclosing%})
50+
51+

‎controls/daterangepicker/client-side-programming/events.md‎ renamed to ‎controls/daterangepicker/client-side-programming/events/overview.md‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
2-
title: Events
3-
page_title: Client-side Events - RadDateRangePicker
4-
description: Check our Web Forms article about Events.
5-
slug: daterangepicker/client-side-programming/events
6-
tags: events
2+
title: Overview
3+
page_title: Client-side events Overview - RadDateRangePicker
4+
description: Check our Web Forms article about RadDateRangePicker Client-side events Overview.
5+
slug: daterangepicker/client-side-programming/events/overview
6+
tags: overview
77
published: True
8-
position: 1
8+
position: 0
99
---
1010

11-
# Events
11+
# Overview
1212

1313
This article lists the client-side events of the **RadDateRangePicker** and how to use them.
1414

@@ -21,7 +21,7 @@ All events follow the MS AJAX client events convention and receive two arguments
2121
2222
| EVENT | APPLIES TO | DESCRIPTION |
2323
|-----------------------|--------------------|------------------------------------------------------------------------------------------------------------------------|
24-
| OnRangeSelectionChanged | RadDateRangePicker | Occurs immediately after the value of the control's selection has been changed. |
24+
| OnDateSelected | RadDateRangePicker | Occurs immediately after a date has been selected. It fires separately for selecting StartDate and EndDate. |
2525
| OnPopupOpening | RadDateRangePicker | Occurs just before a popup is displayed, before the selection in the popup is synchronized with the input area. |
2626
| OnPopupClosing | RadDateRangePicker | Occurs just before the a popup is closed.
2727

@@ -31,26 +31,29 @@ All events follow the MS AJAX client events convention and receive two arguments
3131
To use the client-side events, simply write a JavaScript function that can be called when the event occurs. Then assign the name of the JavaScript function as the value of the the corresponding property.
3232

3333
````ASPX
34-
<telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRadPicker1" runat="server">
34+
<telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRangePicker1" runat="server">
3535
<ClientEvents OnPopupOpening="popupOpening" />
36-
</telerik:RadDatePicker>
36+
</telerik:RadDateRangePicker>
3737
````
38+
3839
````JavaScript
3940
function popupOpening(sender, args) {
4041
alert("popup is opening");
4142
}
4243
````
4344

4445

45-
<!-- See live sample of handling the client events in our [Client-side events demo](https://demos.telerik.com/aspnet-ajax/breadcrumb/client-side-programming/clientsideevents/defaultcs.aspx) -->
46+
See live sample of handling the client events in our [Client-side events demo](https://demos.telerik.com/aspnet-ajax/daterangepicker/client-sideprogramming/client-sideevents/defaultcs.aspx)
4647

4748

48-
# See Also
4949

50-
* [RadDateRangePicker Client-side Overview]({%slug daterangepicker/client-side-programming/overview%})
50+
# See Also
5151

52-
* [RadCalendar Client-side Events]({%slug calendar/client-side-programming/events/overview%})
52+
* [RadDatePicker Client-side Object]({%slug datepicker/client-side-programming/raddatepicker-object%})
53+
54+
* [OnPopupOpening]({%slug daterangepicker/client-side-programming/events/onpopupopening%})
55+
56+
* [OnPopupClosing]({%slug daterangepicker/client-side-programming/events/onpopupclosing%})
57+
58+
* [OnDateSelected]({%slug daterangepicker/client-side-programming/events/ondateselected%})
5359

54-
* [RadDatePicker Client-side Events]({%slug datepicker/client-side-programming/events/overview%}).
55-
56-

‎controls/daterangepicker/client-side-programming/overview.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ To use the API, you must first [get a reference to the control's client-side obj
1818
var dateRangePickerObject = $find("<%=RadDateRangePicker1.ClientID %>");
1919
````
2020

21-
Once you have reference to the RadDateRangePicker, you can use the following three functions to reach the embeded Calendar and DatePicker(s) and use their own Client-side APIs
21+
Once you have reference to the RadDateRangePicker, you can use the following three functions to reach the embedded Calendar and DatePicker(s) and use their own Client-side APIs
2222

2323
| Property | RETURN TYPE | DESCRIPTION |
2424
|-----------------------|---------------|------------------------------------------------------------------------|
@@ -55,6 +55,7 @@ The following table lists the most important properties of the **RadDateRangePic
5555
| showPopup | integer, integer | | Displays the popup calendar at the specified coordinates. If the two parameters are omitted, the popup appears below the input area. |
5656
| hidePopup | | | Hides the popup calendar if it is shown. |
5757
| togglePopup | | | Toggles the visible state of the popup calendar. |
58+
| _doPostBack | | | Initiates a Postback so the client-side selection is submitted to the server. |
5859

5960

6061
# See Also

0 commit comments

Comments
 (0)