Skip to content

Commit fee40e6

Browse files
attilaantalattilaantal
committed
docs(dragdropmanager): create DragDropManager docs
1 parent 163f3b9 commit fee40e6

32 files changed

+1492
-0
lines changed

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Overview
3+
page_title: Client-Side Events Overview - RadDragDropManager
4+
description: Overview of RadDragDropManager Client-Side Events
5+
slug: dragdropmanager/client-side-programming/dragdropmanager/overview
6+
tags: client-side events, events
7+
published: True
8+
position: 0
9+
---
10+
11+
# DragDropManager Client-Side Programming Overview
12+
13+
## Get Client-Side Reference
14+
15+
>caption DropTarget Markup Definition
16+
17+
````ASP.NET
18+
<telerik:RadDragDropManager runat="server" ID="RadDragDropManager1">
19+
</telerik:RadDragDropManager>
20+
````
21+
22+
>caption JavaScript to Get Reference to RadDraggable
23+
24+
````JavaScript
25+
<script>
26+
function DragDropManagerClientSideReference() {
27+
let dragDropManager; // Client-Side Object
28+
let dragDropManagerElement; // HTML element
29+
30+
// Client-Side Object using $find()
31+
dragDropManager = $find('<%= RadDragDropManager1.ClientID%>');
32+
33+
// Client-Side Object using $telerik.findControl()
34+
dragDropManager = $telerik.findControl(document, "RadDragDropManager1");
35+
36+
// If using jQuery, or just JavaScript to find the Element itself, there are two steps to get client-side reference
37+
38+
// Step 1: Get the HTML element
39+
40+
// Find the element using $get()
41+
dragDropManagerElement = $get('<%= RadDragDropManager1.ClientID%>');
42+
43+
// Find the element using jQuery.
44+
// Note that "$telerik.$()" is the same as "$()" or "jQuery()"
45+
dragDropManagerElement = $telerik.$('[id$=RadDragDropManager1]')[0]; // same as $('[id$=RadDraggable1]')[0]; or jQuery('[id$=RadDraggable1]')[0]
46+
47+
// Find the Element using QuerySelector
48+
dragDropManagerElement = document.querySelector('[id$=RadDragDropManager1]');
49+
50+
// Step 2: call the ".control" property on the HTML element which will return the Client-Side object
51+
dragDropManager = dragDropManagerElement.control;
52+
}
53+
</script>
54+
````
55+
56+
## Public Methods
57+
58+
| **Method Name** | **Parameters** | **Return Type** | **Description** |
59+
| -------------------- | -------------- | -------------------------------- | ------------------------------------------------------------------------------------------------- |
60+
| createDraggable | string | Telerik.Web.UI.RadDraggable | Returns a `RadDraggable` control create by the target selector string passed as a parameter. |
61+
| createDropTarget | string | Telerik.Web.UI.RadDropTarget | Returns a `RadDropTarget` control create by the target selector string passed as a parameter. |
62+
| createDropTargetArea | string | Telerik.Web.UI.RadDropTargetArea | Returns a `RadDropTargetArea` control create by the target selector string passed as a parameter. |
63+
64+
## Accessing the Manager
65+
66+
There are global methods and properties can be used to get a reference to the RadDragDropManager of the page. Both the `Telerik.Web.UI.DragDropManager.Manager` and `window.GetRadDragDropManager()` return a reference of the client-side object of the manager.
67+

‎controls/dragdropmanager/client-side-programming/draggable/events.md

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Events
3+
page_title: RadDraggable Client-Side Events - RadDragDropManager
4+
description: Client-Side Events of RadDraggable, child component of RadDragDropManager
5+
slug: dragdropmanager/client-side-programming/draggable/events
6+
tags: client-side events, events, raddraggable
7+
published: True
8+
---
9+
10+
# RadDraggable Client-Side Events
11+
12+
The Client-Side events fired by RadDraggable during the interactions.
13+
14+
## Load
15+
16+
Fired when the Draggable finished loading.
17+
18+
Event arguments:
19+
20+
- **sender**: `Telerik.Web.UI.RadDraggable` Client-Side object
21+
- **args**: `Sys.EventArgs` empty object.
22+
23+
24+
````ASP.NET
25+
<telerik:RadDraggable runat="server" TargetSelectors=".mydraggable">
26+
<ClientEvents OnLoad="OnLoadEventHandler" />
27+
</telerik:RadDraggable>
28+
29+
<div class="mydraggable">Draggable</div>
30+
31+
<script>
32+
function OnLoadEventHandler(sender, args){
33+
var radDraggable = sender;
34+
}
35+
</script>
36+
````
37+
38+
## Hold
39+
40+
Fired before the `DragStart` event, shortly after clicking and holding an element. The `Hold` event represents a jQuery `mousedown` event.
41+
42+
Event arguments:
43+
44+
- **sender**: `Telerik.Web.UI.RadDraggable` Client-Side object
45+
- **args**: `Sys.EventArgs` object containing additional properties.
46+
- **get_sender()**: returns the [kendo.ui.Draggable](https://docs.telerik.com/kendo-ui/api/javascript/ui/draggable) widget
47+
- **get_target()**: returns the HTML element associated with RadDraggable.
48+
49+
50+
````ASP.NET
51+
<telerik:RadDraggable runat="server" TargetSelectors=".mydraggable">
52+
<ClientEvents OnHold="OnHoldEventHandler" />
53+
</telerik:RadDraggable>
54+
55+
<div class="mydraggable">Draggable</div>
56+
57+
<script>
58+
function OnHoldEventHandler(sender, args){
59+
var radDraggable = sender;
60+
var draggableKendoWidget = args.get_sender();
61+
var targetElement = args.get_target();
62+
}
63+
</script>
64+
````
65+
66+
67+
## DragStart
68+
69+
Fired when item drag starts. The `DragStart` event represents a jQuery `mousedown` event.
70+
71+
Event arguments:
72+
73+
- **sender**: `Telerik.Web.UI.RadDraggable` Client-Side object
74+
- **args**: `Sys.EventArgs` object containing additional properties.
75+
- **get_sender()**: returns the [kendo.ui.Draggable](https://docs.telerik.com/kendo-ui/api/javascript/ui/draggable) widget
76+
- **get_target()**: returns the HTML element associated with RadDraggable.
77+
78+
79+
````ASP.NET
80+
<telerik:RadDraggable runat="server" TargetSelectors=".mydraggable">
81+
<ClientEvents OnDragStart="OnDragStartEventHandler" />
82+
</telerik:RadDraggable>
83+
84+
<div class="mydraggable">Draggable</div>
85+
86+
<script>
87+
function OnDragStartEventHandler(sender, args){
88+
var radDraggable = sender;
89+
var draggableKendoWidget = args.get_sender();
90+
var targetElement = args.get_target();
91+
}
92+
</script>
93+
````
94+
95+
## Drag
96+
97+
Fired while dragging. The `Drag` event represents a jQuery `mousemove` event.
98+
99+
Event arguments:
100+
101+
- **sender**: `Telerik.Web.UI.RadDraggable` Client-Side object
102+
- **args**: `Sys.EventArgs` object containing additional properties.
103+
- **get_sender()**: returns the [kendo.ui.Draggable](https://docs.telerik.com/kendo-ui/api/javascript/ui/draggable) widget
104+
- **get_target()**: returns the HTML element associated with RadDraggable.
105+
106+
````ASP.NET
107+
<telerik:RadDraggable runat="server" TargetSelectors=".mydraggable">
108+
<ClientEvents OnDrag="OnDragEventHandler" />
109+
</telerik:RadDraggable>
110+
111+
<div class="mydraggable">Draggable</div>
112+
113+
<script>
114+
function OnDragEventHandler(sender, args){
115+
var radDraggable = sender;
116+
var draggableKendoWidget = args.get_sender();
117+
var targetElement = args.get_target();
118+
}
119+
</script>
120+
````
121+
122+
## DragCancel
123+
124+
Fired when item drag is canceled by pressing the Escape key while dragging. The `DragCancel` event represents a jQuery `keyup` event.
125+
126+
Event arguments:
127+
128+
- **sender**: `Telerik.Web.UI.RadDraggable` Client-Side object
129+
- **args**: `Sys.EventArgs` object containing additional properties.
130+
- **get_sender()**: returns the [kendo.ui.Draggable](https://docs.telerik.com/kendo-ui/api/javascript/ui/draggable) widget
131+
132+
````ASP.NET
133+
<telerik:RadDraggable runat="server" TargetSelectors=".mydraggable">
134+
<ClientEvents OnDragCancel="OnDragCancelEventHandler" />
135+
</telerik:RadDraggable>
136+
137+
<div class="mydraggable">Draggable</div>
138+
139+
<script>
140+
function OnDragCancelEventHandler(sender, args){
141+
var radDraggable = sender;
142+
var draggableKendoWidget = args.get_sender();
143+
}
144+
</script>
145+
````
146+
147+
## DragEnd
148+
149+
Fired when item drag ends. The `DragEnd` event represents a jQuery `mouseup` event.
150+
151+
Event arguments:
152+
153+
- **sender**: `Telerik.Web.UI.RadDraggable` Client-Side object
154+
- **args**: `Sys.EventArgs` object containing additional properties.
155+
- **get_sender()**: returns the [kendo.ui.Draggable](https://docs.telerik.com/kendo-ui/api/javascript/ui/draggable) widget
156+
- **get_target()**: returns the HTML element associated with RadDraggable.
157+
- **get_hintElement()**: returns a clone of the HTML element associated with RadDraggable.
158+
159+
````ASP.NET
160+
<telerik:RadDraggable runat="server" TargetSelectors=".mydraggable">
161+
<ClientEvents OnDragEnd="OnDragEndEventHandler" />
162+
</telerik:RadDraggable>
163+
164+
<div class="mydraggable">Draggable</div>
165+
166+
<script>
167+
function OnDragEndEventHandler(sender, args){
168+
var radDraggable = sender;
169+
var draggableKendoWidget = args.get_sender();
170+
var targetElement = args.get_target();
171+
var hintElement = args.get_hintElement();
172+
}
173+
</script>
174+
````
175+

‎controls/dragdropmanager/client-side-programming/draggable/overview.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Overview
3+
page_title: Client-Side Events Overview - RadDragDropManager
4+
description: Overview of RadDragDropManager Client-Side Events
5+
slug: dragdropmanager/client-side-programming/draggable/overview
6+
tags: client-side events, events
7+
published: True
8+
position: 0
9+
---
10+
11+
# Draggable Client-Side APIs
12+
13+
14+
## Get Client-Side Reference
15+
16+
>caption Draggable Markup Definition
17+
18+
````ASP.NET
19+
<telerik:RadDraggable runat="server" ID="RadDraggable1">
20+
</telerik:RadDraggable>
21+
````
22+
23+
>caption JavaScript to Get Reference to RadDraggable
24+
25+
````JavaScript
26+
<script>
27+
function GetClientSideReference() {
28+
let draggable; // Client-Side Object
29+
let draggableElement; // HTML element
30+
31+
// Client-Side Object using $find()
32+
draggable = $find('<%= RadDraggable1.ClientID%>');
33+
34+
// Client-Side Object using $telerik.findControl()
35+
draggable = $telerik.findControl(document, "RadDraggable1");
36+
37+
// If using jQuery, or just JavaScript to find the Element itself, there are two steps to get client-side reference
38+
39+
// Step 1: Get the HTML element
40+
// Find the element using $get()
41+
draggableElement = $get('<%= RadDraggable1.ClientID%>');
42+
43+
// Find the element using jQuery.
44+
// Note that "$telerik.$()" is the same as "$()" or "jQuery()"
45+
draggableElement = $telerik.$('[id$=RadDraggable1]')[0]; // same as $('[id$=RadDraggable1]')[0]; or jQuery('[id$=RadDraggable1]')[0]
46+
47+
// Find the Element using QuerySelector
48+
draggableElement = document.querySelector('[id$=RadDraggable1]');
49+
50+
// Step 2: call the ".control" property on the HTML element which will return the Client-Side object
51+
draggable = draggableElement.control;
52+
}
53+
</script>
54+
````
55+
56+
57+
## Public Getter Properties
58+
59+
| **Property** | **Return Type** | **Description** |
60+
| ----------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
61+
| get_autoScroll() | bool | Returns `true` or `false` indicating whether the `AutoScroll` is enabled. |
62+
| get_axis() | int | Returns an integer indicating the `Axis` restriction |
63+
| get_containerElements() | jQuery Collection of Elements | Gets the a jQuery collection of elements satisfying the selector in `ContainerSelectors` property. |
64+
| get_cursorOffset() | Object | Returns and object with `top` and `left` properties if set or null. |
65+
| get_distance() | int | Returns the distance needed to drag before an actual drag is initiated. |
66+
| get_dropped() | bool | Returns a boolean identifying if the draggable is dropped inside a valid `DropTarget` or not. |
67+
| get_elements() | jQuery Collection of Elements | Returns a jQuery collection of elements satisfying the selector defined in `TargetSelectors`. |
68+
| get_group() | string | Returns a string representation of the group assigned to the control. The default group is "default". |
69+
| get_hintHandler() | function | Returns the function that should return the element that will be used as a `Hint` element. |
70+
| get_holdToDrag() | boolean | Returns a boolean describing wether a touch and hold is required to initiate a drag. Relevant for touch and mobile devices. |
71+
| get_kendoWidget() | Kendo.ui.Draggable | Returns the Kendo UI Draggable widget created for the `RadDraggable` control. |
72+
| get_filterSelectors() | string | Returns a string representation of the selector used to filter the elements that should be draggable when the `RadDraggable` is attached to a container. |
73+
74+
## Public Setter Properties
75+
76+
| **Property** | **Parameters** | **Description** |
77+
| --------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
78+
| set_autoScroll() | bool | Sets the `AutoScroll` property for the control. |
79+
| set_axis() | Telerik.Web.UI.RadDraggableAxis / int | Sets the axis restriction for the hint element. The values for the `Telerik.Web.UI.RadDraggableAxis` enum are: *None - 0*, *Horizontal - 1*, *Verical - 2*. |
80+
| set_cursorOffset() | object | Sets the offset of the hint element related to the mouse during a drag. Receives an object with two integer properties - `top` and `left`. |
81+
| set_distance() | int | Sets the distance needed to drag before an actual drag is initiated. |
82+
| set_group() | string | Sets the group value for the RadDraggable. |
83+
| set_hintHandler() | function | Sets the function that should return the element that will be used as a `Hint` element. |
84+
| set_holdToDrag() | bool | Controls wether a touch and hold is required to initiate a drag. Relevant for touch and mobile devices. |
85+
| set_filterSelectors() | string | Sets the selector used to filter the elements that should be draggable when the `RadDraggable` is attached to a container. |
86+
87+
88+

0 commit comments

Comments
 (0)