Telerik Product and Version
|
UI for ASP.NET AJAX, must support Lightweight Render Mode, so after Q2 2013 |
|
Supported Browsers and Platforms
|
|
|
Components/Widgets used (JS frameworks, etc.)
|
RadWindow and internal draggable widget |
PROJECT DESCRIPTION
In some cases you may want the restriction to be shown to the user immediately and/or to have some custom restriction like only for minimum top and left positions.
The built-in restriction zone is static and both it, and the KeepInScreenBounds=true settings allow the user to drag the window out of the bounds, and it will snap back inside.
A work around for this can be to:
- use the Lightweight RenderMode
- use the internal (undocumented, or non-public) "draggable" widget that powers the dragging in this mode, and hook to its dragging event
- implement the desired logic in the dragging event (an example is available below thanks to Dean Wyant)
<telerik:RadWindow runat="server" ID="rw1" RenderMode="Lightweight" VisibleOnPageLoad="true" OnClientShow="OnClientShow" OnClientClose="OnClientClose"></telerik:RadWindow>
<script>
function dragCheck(draggable, args) {
//constraints for minimum top and left coordinates
var minX = 0;
var minY = 50;
//for more complex restrictions you need to also alter the conditions accordingly
if (args.get_newPosition().x < minX) {
draggable.deltaHelper.x = minX - args.get_position().x;
}
if (args.get_newPosition().y < minY) {
draggable.deltaHelper.y = minY - args.get_position().y;
}
}
function OnClientShow(sender, args) {
sender.view.draggable.add_dragging(dragCheck);
}
function OnClientClose(sender, args) {
sender.view.draggable.remove_dragging(dragCheck);
}
</script>