Edit scheduler appointment with double tap
PROBLEM
Double tapping an appointment on a mobile device does not open the AdvancedEditForm.
DESCRIPTION
Usually the double tap zooms in and out on a mobile device and there is no built-in event for the double tap action.
SOLUTION
To simulate the double tap event, we can use the touchstart event with a setTimeout as suggested in this StackOverflow forum post: Touch device, Single and Double Tap Events handler jQuery/Javascript?.
Once we know how to subscribe to the double tap event, we can hook the event to the elements with class rsApt in the Sys.Application.load event for example. In the event handler we can open the AdvancedEditForm with the scheduler.editAppointmentWithConfirmation(apt); method similar to the explanation in Edit an appointment with single click.
<telerik:RadCodeBlock runat="server">
<script>
var tapped;
function pageLoadHandler() {
var $ = $ || $telerik.$;
$(".rsApt").on("touchstart", function (e) {
if (!tapped) { //if tap is not set, set up single tap
tapped = setTimeout(function () {
tapped = null
//insert things you want to do when single tapped
}, 300); //wait 300ms then run single click code
} else { //tapped within 300ms of last tap. double tap
clearTimeout(tapped); //stop single tap callback
tapped = null;
console.log("doubletap");
var scheduler = $find("<%= RadScheduler1.ClientID %>");
var apt = scheduler.getAppointmentFromDomElement(this);
scheduler.editAppointmentWithConfirmation(apt);
}
e.preventDefault()
});
}
Sys.Application.add_load(pageLoadHandler);
</script>
</telerik:RadCodeBlock>