Telerik UI for JSP: Scheduler drag and drop to Grid

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="demo" tagdir="/WEB-INF/tags"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<c:url value="/scheduler/index/read" var="readUrl" />
<c:url value="/scheduler/index/create" var="createUrl" />
<c:url value="/scheduler/index/update" var="updateUrl" />
<c:url value="/scheduler/index/destroy" var="destroyUrl" />

<%
    Date date = new SimpleDateFormat("yyyy/MM/dd").parse("2013/6/13");

    Date startTime = new SimpleDateFormat("yyyy/MM/dd hh:mm").parse("2013/6/13 7:00");

    ArrayList<HashMap<String, Object>> resources = new ArrayList<HashMap<String, Object>>();

    HashMap<String, Object> alex = new HashMap<String, Object>();
    alex.put("text", "Alex");
    alex.put("value", 1);
    alex.put("color", "#f8a398");
    resources.add(alex);
    HashMap<String, Object> bob = new HashMap<String, Object>();
    bob.put("text", "Bob");
    bob.put("value", 2);
    bob.put("color", "#51a0ed");
    resources.add(bob);
    HashMap<String, Object> charlie = new HashMap<String, Object>();
    charlie.put("text", "Charlie");
    charlie.put("value", 3);
    charlie.put("color", "#56ca85");
    resources.add(charlie);

%>
<demo:header />
    <script>
    function onDataBound(e) {
        createDropArea(this);
    }
    </script>
    <kendo:scheduler name="scheduler" timezone="Etc/UTC" height="600" date="<%= date %>" startTime="<%= startTime %>" dataBound="onDataBound">
        <kendo:scheduler-views>
            <kendo:scheduler-view type="day" />
            <kendo:scheduler-view type="workWeek" selected="true" />
            <kendo:scheduler-view type="week" />
            <kendo:scheduler-view type="month"  />
            <kendo:scheduler-view type="agenda" />
            <kendo:scheduler-view type="timeline" />
        </kendo:scheduler-views>
        <kendo:scheduler-resources>
            <kendo:scheduler-resource field="ownerId" title="Owner">
                <kendo:dataSource data="<%= resources %>" />
            </kendo:scheduler-resource>
        </kendo:scheduler-resources>
        <kendo:dataSource batch="true">
             <kendo:dataSource-schema>
                <kendo:dataSource-schema-model id="taskId">
                     <kendo:dataSource-schema-model-fields>
                         <kendo:dataSource-schema-model-field name="taskId" type="number" />
                         <kendo:dataSource-schema-model-field name="title" defaultValue="No title" type="string" />
                         <kendo:dataSource-schema-model-field name="description" type="string" />
                         <kendo:dataSource-schema-model-field name="isAllDay" type="boolean" />
                         <kendo:dataSource-schema-model-field name="recurrenceRule" type="string" nullable="true"/>
                         <kendo:dataSource-schema-model-field name="recurrenceId" type="number" nullable="true" />
                         <kendo:dataSource-schema-model-field name="recurrenceException" type="string" nullable="true" />
                         <kendo:dataSource-schema-model-field name="ownerId" type="number" defaultValue="1" />
                         <kendo:dataSource-schema-model-field name="start" type="date" />
                         <kendo:dataSource-schema-model-field name="end" type="date" />
                    </kendo:dataSource-schema-model-fields>
                </kendo:dataSource-schema-model>
            </kendo:dataSource-schema>
            <kendo:dataSource-transport>
                <kendo:dataSource-transport-create url="${createUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-update url="${updateUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-destroy url="${destroyUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-parameterMap>
                    <script>
                        function parameterMap(options, type) {
                            if(type==="read"){
                                return JSON.stringify(options);
                            } else {
                                return JSON.stringify(options.models);
                            }
                        }
                    </script>
                </kendo:dataSource-transport-parameterMap>
            </kendo:dataSource-transport>
        </kendo:dataSource>
    </kendo:scheduler>

    <kendo:grid name="grid" selectable="single row">
            <kendo:grid-columns>
                <kendo:grid-column  field="taskId"></kendo:grid-column>
                <kendo:grid-column  field="title"></kendo:grid-column>
                <kendo:grid-column  field="start" format="{0:yyyy/MM/dd HH:mm}"></kendo:grid-column>
                <kendo:grid-column  field="end" format="{0:D}"></kendo:grid-column>
            </kendo:grid-columns>
            <kendo:dataSource batch="true">
                <kendo:dataSource-schema>
                    <kendo:dataSource-schema-model id="taskId">
                         <kendo:dataSource-schema-model-fields>
                             <kendo:dataSource-schema-model-field name="taskId" type="number" />
                             <kendo:dataSource-schema-model-field name="title" defaultValue="No title" type="string" />
                             <kendo:dataSource-schema-model-field name="description" type="string" />
                             <kendo:dataSource-schema-model-field name="isAllDay" type="boolean" />
                             <kendo:dataSource-schema-model-field name="recurrenceRule" type="string" nullable="true"/>
                             <kendo:dataSource-schema-model-field name="recurrenceId" type="number" nullable="true" />
                             <kendo:dataSource-schema-model-field name="recurrenceException" type="string" nullable="true" />
                             <kendo:dataSource-schema-model-field name="ownerId" type="number" defaultValue="1" />
                             <kendo:dataSource-schema-model-field name="start" type="date" />
                             <kendo:dataSource-schema-model-field name="end" type="date" />
                        </kendo:dataSource-schema-model-fields>
                    </kendo:dataSource-schema-model>
                </kendo:dataSource-schema>
                <kendo:dataSource-transport>
                    <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json" />
                    <kendo:dataSource-transport-parameterMap>
                        <script>
                            function parameterMap(options, type) {
                                if(type==="read"){
                                    return JSON.stringify(options);
                                } else {
                                    return JSON.stringify(options.models);
                                }
                            }
                        </script>
                    </kendo:dataSource-transport-parameterMap>
                </kendo:dataSource-transport>
            </kendo:dataSource>
    </kendo:grid>

<script>
function  createDropArea(scheduler) {
    scheduler.view().content.kendoDropTargetArea({
        filter: ".k-scheduler-table td, .k-event",
        drop: function(e){
            var offset = $(e.dropTarget).offset();
            var slot = scheduler.slotByPosition(offset.left, offset.top);
            var grid = $("#grid").data("kendoGrid");
            var dataItem = grid.dataItem(grid.select());

            if(dataItem && slot) {
                var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
                var newEvent = {
                    title: dataItem.title,
                    end: new Date(slot.startDate.getTime() + (dataItem.end - dataItem.start)),
                    start: slot.startDate ,
                    isAllDay: slot.isDaySlot,
                    description: dataItem.description,
                    imdb: dataItem.imdb,
                    image: dataItem.image
                };

                grid.dataSource.remove(dataItem);
                scheduler.dataSource.add(newEvent);
            }

        }
    });
}

$(function () {
    var grid = $("#grid").data("kendoGrid");

    grid.table.kendoDraggable({
        filter: "tbody > tr",
        dragstart: function (e) {
                var grid = $("#grid").data("kendoGrid");
             gridRowOffset = grid.tbody.find("tr:first").offset();
            //add margin to position correctly the tooltip under the pointer
            $("#dragTooltip").css("margin-left", e.clientX - gridRowOffset.left - 50);
        },
        hint: function (row) {

            //remove old selection
            row.parent().find(".k-state-selected").each(function () {
                $(this).removeClass("k-state-selected")
            });

            //add selected class to the current row
            row.addClass("k-state-selected");

            var dataItem = grid.dataItem(row);
            var tooltipHtml = "<div class='k-event' id='dragTooltip'><div class='k-event-template'>" +
                        kendo.format("{0:t} - {1:t}", dataItem.start, dataItem.end) +
                        "</div><div class='k-event-template'>" + dataItem.title +
                        "</div></div>";

            return $(tooltipHtml).css("width", 300);
        }
    });
})
</script>
<demo:footer />