Added example about tasks drag and drop from RadGrid to RadScheduler

Scheduler/DragDropFromGridToScheduler/DragDropFromGridToScheduler.jsproj

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|AnyCPU">
+      <Configuration>Debug</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x86">
+      <Configuration>Debug</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|AnyCPU">
+      <Configuration>Release</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM">
+      <Configuration>Release</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x86">
+      <Configuration>Release</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>f8c24177-bb14-4276-9e5c-e479073c63f8</ProjectGuid>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '11.0'">
+    <VisualStudioVersion>11.0</VisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
+  <PropertyGroup>
+    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
+    <TargetPlatformVersion>8.0</TargetPlatformVersion>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <PackageCertificateKeyFile>DragDropFromGridToScheduler_TemporaryKey.pfx</PackageCertificateKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <AppxManifest Include="package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+    <Content Include="default.html" />
+    <Content Include="images\logo.png" />
+    <Content Include="images\smalllogo.png" />
+    <Content Include="images\splashscreen.png" />
+    <Content Include="images\storelogo.png" />
+    <Content Include="js\default.js" />
+    <Content Include="css\default.css" />
+    <Content Include="ReadMe.html" />
+    <None Include="DragDropFromGridToScheduler_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
+    <SDKReference Include="Telerik.UI, Version=2013.3.1105" />
+  </ItemGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
+  <!-- To modify your build process, add your task inside one of the targets below then uncomment
+       that target and the DisableFastUpToDateCheck PropertyGroup. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  <PropertyGroup>
+    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
+  </PropertyGroup>
+  -->
+</Project>

Scheduler/DragDropFromGridToScheduler/ReadMe.html

@@ -0,0 +1,4 @@
+<p>
+	This example demonstrates a custom solution where tasks are listed in a RadGrid control and can be dragged to RadScheduler, allowing the user to build their own schedule. You can see
+	explanations in the JavaScript comments.
+</p>

Scheduler/DragDropFromGridToScheduler/css/default.css

@@ -0,0 +1,42 @@
+.mainContent {
+	margin: 120px 0 50px 120px;
+}
+
+.info {
+	color: #feef7a;
+	margin: 0 120px;
+}
+
+#drag-container {
+	height: 30px;
+	background: #0A55BD;
+	width: 250px;
+	height: 35px;
+	line-height: 35px;
+	padding-left: 10px;
+	z-index: 1;
+}
+
+.scheduleContainer {
+	width: 90%;
+}
+
+.scheduleContainer #tasksGrid {
+	float: left;
+	margin: 50px 20px 0 0;
+	height: 700px;
+}
+
+.scheduleContainer #tasksScheduler {
+	float: left;
+	width: calc(100% - 270px);
+}
+
+.mainContent:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}

Scheduler/DragDropFromGridToScheduler/default.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>DragDropFromGridToScheduler</title>
+
+	<!-- WinJS references -->
+	<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
+	<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
+	<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
+
+	<!-- Telerik references -->
+	<link href="///Telerik.UI/css/common.css" rel="stylesheet" />
+	<link href="///Telerik.UI/css/dark.css" rel="stylesheet" />
+	<script src="///Telerik.UI/js/jquery.js"></script>
+	<script src="///Telerik.UI/js/ui.js"></script>
+
+	<!-- DragDropFromGridToScheduler references -->
+	<link href="/css/default.css" rel="stylesheet" />
+	<script src="/js/default.js"></script>
+</head>
+<body>
+	<section class="mainContent">
+		<div class="scheduleContainer">
+			<div id="tasksGrid" style="width: 250px" data-win-control="Telerik.UI.RadGrid" data-win-options="{
+					dataSource: DragEventsExample.tasksDataSource,
+					columns: [
+						{
+							field: 'title'
+						}
+					]
+			     }">
+			</div>
+			<div id="drag-container" style="display: none"></div>
+			<div id="tasksScheduler" style="height: 700px; margin-top: 50px" data-win-control="Telerik.UI.RadScheduler" data-win-options="{
+					dataSource: DragEventsExample.taskEventsDataSource,
+					editable: {
+						enabled: true,
+						create: false,
+						update: false
+					},
+					onremove: DragEventsExample.removeTaskEvent
+				}">
+			</div>
+		</div>
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
+</body>
+</html>

Scheduler/DragDropFromGridToScheduler/js/default.js

@@ -0,0 +1,164 @@
+// For an introduction to the Blank template, see the following documentation:
+// http://go.microsoft.com/fwlink/?LinkId=232509
+(function () {
+	"use strict";
+
+	WinJS.Binding.optimizeBindingReferences = true;
+
+	var app = WinJS.Application;
+	var activation = Windows.ApplicationModel.Activation;
+	var tasks = [
+	{
+		id: 1,
+		title: "Take the car to service"
+	},
+	{
+		id: 2,
+		title: "Take the dog out"
+	},
+	{
+		id: 3,
+		title: "Go to the grocery"
+	},
+	{
+		id: 4,
+		title: "Go to the gym"
+	},
+	{
+		id: 5,
+		title: "Book tickets for vacation"
+	},
+	{
+		id: 6,
+		title: "Cook dinner"
+	},
+	{
+		id: 7,
+		title: "Pack up for travel"
+	}
+	];
+	var rowIndex,
+		dragContainer;
+	
+	//Prepare the Grid dataSource
+	var tasksDataSource = new Telerik.Data.DataSource({
+		data: tasks,
+		sort: { field: "id", dir: "asc" }
+	});
+
+	//Prepare the Scheduler dataSource
+	var taskEventsDataSource = new Telerik.Data.SchedulerDataSource();
+
+	//Returns the pointer event name, so that it can be used as an argument for addEventListener() method
+	function getPointerEvent(type) {
+		return "onpointerdown" in document ?
+			("pointer" + type) :
+			("MSPointer" + type.charAt(0).toUpperCase() + type.substr(1));
+	}
+
+	//Changes the dragged element position in the document based on the cursor position
+	function updatePosition(e) {
+		if (dragContainer.innerHTML != "") {
+			dragContainer.style.top = e.clientY + "px";
+			dragContainer.style.left = e.clientX + "px";
+		}
+	}
+
+	//Copies the "dragged" grid cell content into the drag container element
+	function copyContent(e) {
+		var target = e.target;
+
+		//Check whether the clicked element is a grid cell
+		var isDataCell = target.nodeName == "TD" && $(target).parents(".k-grid-content").length > 0;
+		if (isDataCell) {
+			dragContainer.innerText = target.innerText;
+			rowIndex = target.parentNode.rowIndex;
+
+			//Show the drag container
+			dragContainer.style.display = "block";
+			dragContainer.style.position = "absolute";
+			dragContainer.style.top = e.clientY + "px";
+			dragContainer.style.left = e.clientX + "px";
+		}
+	}
+
+	//Inserts the dropped event into the Scheduler (if dropped over it)
+	function insertNewEvent(e) {
+		var coordinates = [e.clientX, e.clientY];
+
+		//Try to copy content only if the drag container is visible and contains text
+		if (dragContainer.innerHTML != "") {
+			dragContainer.innerHTML = "";
+			dragContainer.style.display = "none";
+
+			//Check if the drag container was dropped over the scheduler
+			if (coordinates[0] >= tasksScheduler.offsetLeft && coordinates[0] <= (tasksScheduler.offsetLeft + tasksScheduler.clientWidth)
+			&& coordinates[1] >= tasksScheduler.offsetTop && coordinates[1] <= (tasksScheduler.offsetTop + tasksScheduler.clientHeight)) {
+				//Determine the time slot in the Scheduler where the drag container was dropped
+				var slot = tasksScheduler.winControl.view._slotByPosition(e.clientX, e.clientY);
+				if (slot) {
+					//Get the correct time format before insering
+					var start = getUtcDate(slot.start);
+					var end = getUtcDate(slot.end);
+					var task = tasksDataSource.view[rowIndex];
+					//Add the new task to Scheduler and remove it from Grid
+					taskEventsDataSource.add({
+						id: task.id,
+						title: task.title,
+						start: start,
+						end: end,
+						startTimeZone: "Etc/UTC"
+					});
+					tasksDataSource.remove(task);
+				}
+			}
+		}
+	}
+
+	//Converts the current date to UTC format
+	function getUtcDate(timespan) {
+		var date = new Date(timespan);
+		var utcDate = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+		return utcDate;
+	}
+
+	app.onactivated = function (args) {
+		if (args.detail.kind === activation.ActivationKind.launch) {
+			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
+				// TODO: This application has been newly launched. Initialize
+				// your application here.
+			} else {
+				// TODO: This application has been reactivated from suspension.
+				// Restore application state here.
+			}
+			args.setPromise(WinJS.UI.processAll().then(function () {
+				dragContainer = document.querySelector("#drag-container");
+				var root = document.documentElement;
+				root.addEventListener(getPointerEvent("move"), updatePosition);
+				tasksGrid.addEventListener(getPointerEvent("down"), copyContent);
+				root.addEventListener(getPointerEvent("up"), insertNewEvent);
+			}));
+		}
+	};
+
+	app.oncheckpoint = function (args) {
+		// TODO: This application is about to be suspended. Save any state
+		// that needs to persist across suspensions here. You might use the
+		// WinJS.Application.sessionState object, which is automatically
+		// saved and restored across suspension. If you need to complete an
+		// asynchronous operation before your application is suspended, call
+		// args.setPromise().
+	};
+
+	app.start();
+
+	WinJS.Namespace.define("DragEventsExample", {
+		tasksDataSource: tasksDataSource,
+		taskEventsDataSource: taskEventsDataSource,
+		//If a task is deleted from the Scheduler, put it back in the Grid
+		removeTaskEvent: WinJS.Utilities.markSupportedForProcessing(function (e) {
+			var event = e.event;
+			tasksDataSource.add({ id: event.id, title: event.title })
+		})
+	});
+})();

Scheduler/DragDropFromGridToScheduler/package.appxmanifest

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+
+  <Identity
+    Name="f8c24177-bb14-4276-9e5c-e479073c63f8"
+    Version="1.0.0.0"
+    Publisher="CN=tsivanova" />
+
+  <Properties>
+    <DisplayName>DragDropFromGridToScheduler</DisplayName>
+    <PublisherDisplayName>tsivanova</PublisherDisplayName>
+    <Logo>images\storelogo.png</Logo>
+  </Properties>
+
+  <Prerequisites>
+    <OSMinVersion>6.2.1</OSMinVersion>
+    <OSMaxVersionTested>6.2.1</OSMaxVersionTested>
+  </Prerequisites>
+
+  <Resources>
+    <Resource Language="x-generate" />
+  </Resources>
+
+  <Applications>
+    <Application 
+      Id="App"
+      StartPage="default.html">
+
+      <VisualElements
+        DisplayName="DragDropFromGridToScheduler"
+        Logo="images\logo.png"
+        SmallLogo="images\smalllogo.png"
+        Description="DragDropFromGridToScheduler"
+        ForegroundText="light"
+        BackgroundColor="#464646">
+
+        <DefaultTile ShowName="allLogos" />
+        <SplashScreen Image="images\splashscreen.png" />
+
+      </VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>