Merge pull request #29 from MIYankov/master

Added a new example about binding RadScheduler to Data Storage
2013-11-25 04:46:04 -08:00 · 2013-11-25 04:46:04 -08:00 · 8bb07f7333
--- a/Scheduler/BindingRadSchedulerToDataStorage/BindingRadSchedulerToDataStorage.jsproj
+++ b/Scheduler/BindingRadSchedulerToDataStorage/BindingRadSchedulerToDataStorage.jsproj
@ -0,0 +1,84 @@
+<?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>6506098a-47df-4bb6-aba0-18fbb7895d82</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>BindingRadSchedulerToDataStorage_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="BindingRadSchedulerToDataStorage_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.VCLibs, version=11.0" />
+    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
+    <SDKReference Include="Telerik.Storage.HTML, Version=2013.3.1105" />
+    <SDKReference Include="Telerik.UI, Version=2013.3.1015" />
+  </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>
--- a/Scheduler/BindingRadSchedulerToDataStorage/BindingRadSchedulerToDataStorage_TemporaryKey.pfx
+++ b/Scheduler/BindingRadSchedulerToDataStorage/BindingRadSchedulerToDataStorage_TemporaryKey.pfx
--- a/Scheduler/BindingRadSchedulerToDataStorage/ReadMe.html
+++ b/Scheduler/BindingRadSchedulerToDataStorage/ReadMe.html
@ -0,0 +1,9 @@
+<p>
+	In this example you can see how to bind RadScheduler to a local SQLite database using the Telerik Data Storage component. In the scheduler above you can create, delete and update events 
+    and they will be stored locally on your device. If you restart the example, the created events will be there again. This feature is useful if you wish to provide offline support for your 
+    scheduler application.
+</p>
+<p>
+    This example is documented with detailed explanations in this article: 
+    <a style="cursor: pointer;" href="http://www.telerik.com/help/windows-8-html/scheduler-data-binding-data-storage.html">Binding RadScheduler to Data Storage</a>.
+</p>
--- a/Scheduler/BindingRadSchedulerToDataStorage/css/default.css
+++ b/Scheduler/BindingRadSchedulerToDataStorage/css/default.css
@ -0,0 +1,58 @@
+.mainContent {
+	margin: 120px 0 50px 120px;
+}
+
+.info {
+	color: #feef7a;
+	margin-left: 120px;
+}
+
+#title, #header-wrapper {
+    margin-bottom: 15px;
+}
+
+.city-container {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.city-label {
+    display: block;
+    height: 110px;
+    width: 110px;
+}
+
+.city-name {
+    position: absolute;
+    bottom: 7px;
+    left: 5px;
+    font-size: 12px;
+}
+
+.city-checkbox {
+    position: absolute;
+    bottom: 5px;
+    right: 0px;
+}
+
+#berlin {
+    background-image: url('/images/cities/Berlin.jpg');
+    border: 2px solid #FBF192;
+}
+
+#paris {
+    background-image: url('/images/cities/Paris.jpg');
+    border: 2px solid #27BAB2;
+}
+
+#london {
+    background-image: url('/images/cities/London.jpg');
+    border: 2px solid #0083D4;
+}
+
+#manchester {
+    background-image: url('/images/cities/Manchester.jpg');
+    border: 2px solid #FABF09;
+}
--- a/Scheduler/BindingRadSchedulerToDataStorage/default.html
+++ b/Scheduler/BindingRadSchedulerToDataStorage/default.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>FilteringRadSchedulerDataSource</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>
+    <!-- Telerik Data Storage reference -->
+    <script src="///Telerik.Storage.HTML/js/Telerik.Data.js"></script>
+
+    <!-- FilteringRadSchedulerDataSource references -->
+    <link href="/css/default.css" rel="stylesheet" />
+    <script src="/js/default.js"></script>
+</head>
+<body>
+    <section class="mainContent">
+
+        <div id="scheduler" data-win-control="Telerik.UI.RadScheduler" data-win-options="{
+            dataSource: Scheduler.Data.dataSource,
+            height: 500
+        }"></div>
+
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
+</body>
+</html>
--- a/Scheduler/BindingRadSchedulerToDataStorage/images/logo.png
+++ b/Scheduler/BindingRadSchedulerToDataStorage/images/logo.png
--- a/Scheduler/BindingRadSchedulerToDataStorage/images/smalllogo.png
+++ b/Scheduler/BindingRadSchedulerToDataStorage/images/smalllogo.png
--- a/Scheduler/BindingRadSchedulerToDataStorage/images/splashscreen.png
+++ b/Scheduler/BindingRadSchedulerToDataStorage/images/splashscreen.png
--- a/Scheduler/BindingRadSchedulerToDataStorage/images/storelogo.png
+++ b/Scheduler/BindingRadSchedulerToDataStorage/images/storelogo.png
--- a/Scheduler/BindingRadSchedulerToDataStorage/js/default.js
+++ b/Scheduler/BindingRadSchedulerToDataStorage/js/default.js
@ -0,0 +1,122 @@
+// 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;
+
+    // defining the Data Storage schema for the database. The schema matches the RadScheduler event model.
+    var schemaDB = {
+        tables: [{
+            name: 'Events',
+            columns:
+            [
+                {
+                    name: "id",
+                    type: "number",
+                    identity: true,
+                    autoIncrement: true
+                },
+                { name: "title", type: "string" },
+                { name: "start", type: "date" },
+                { name: "end", type: "date" },
+                { name: "isAllDay", type: "boolean" },
+                { name: "recurrenceId", type: "number" },
+                { name: "recurrenceRule", type: "string" },
+                { name: "description", type: "string" },
+                { name: "recurrenceException", type: "string" },
+                { name: "startTimeZone", type: "string" },
+                { name: "endTimeZone", type: "string" }
+            ]
+        }]
+    };
+
+    // defining the RadScheduler DataSource object. The important things here are the type "dataStorage", the transport settings for 
+    // the Data Storage component and the schema that matches the Data Storage schema.
+    WinJS.Namespace.define("Scheduler.Data", {
+        dataSource: new Telerik.Data.SchedulerDataSource({
+            type: "dataStorage",
+            transport: {
+                read: {
+                    data: {
+                        dbName: "SchedulerDB",
+                        tableName: "Events"
+                    }
+                },
+                create: {
+                    data: {
+                        dbName: "SchedulerDB",
+                        tableName: "Events"
+                    }
+                },
+                update: {
+                    data: {
+                        dbName: "SchedulerDB",
+                        tableName: "Events"
+                    }
+                },
+                destroy: {
+                    data: {
+                        dbName: "SchedulerDB",
+                        tableName: "Events"
+                    }
+                }
+            },
+            schema: {
+                model: {
+                    id: "id",
+                    fields: {
+                        id: { from: "id", type: "number", nullable: true },
+                        title: { from: "title", validation: { required: true } },
+                        start: { from: "start", type: "date" },
+                        end: { from: "end", type: "date" },
+                        isAllDay: { from: "isAllDay", type: "boolean" },
+                        recurrenceId: { from: "recurrenceId", type: "number" },
+                        recurrenceRule: { from: "recurrenceRule", type: "string" },
+                        description: { from: "description", type: "string" },
+                        recurrenceException: { from: "recurrenceException", type: "string" },
+                        startTimeZone: { from: "startTimeZone", type: "string" },
+                        endTimeZone: { from: "endTimeZone", type: "string" }
+                    }
+                }
+            }
+        })
+    });
+
+    var db;
+
+    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.
+            }
+
+            // opens the database if it is created and creates if no such database exists.
+            db = Telerik.Data.Database.open("SchedulerDB", "local", schemaDB);
+            // you have to set this property to false, because otherwise the object will be saved in a single 
+            // column as the JSON file. In our case, we need the data to be saved in multiple columns defined by 
+            // the database schema.
+            db.serializeObject = false;
+
+            args.setPromise(WinJS.UI.processAll());
+        }
+    };
+
+    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();
+})();
--- a/Scheduler/BindingRadSchedulerToDataStorage/package.appxmanifest
+++ b/Scheduler/BindingRadSchedulerToDataStorage/package.appxmanifest
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+
+  <Identity
+    Name="6506098a-47df-4bb6-aba0-18fbb7895d82"
+    Version="1.0.0.0"
+    Publisher="CN=myankov" />
+
+  <Properties>
+    <DisplayName>BindingRadSchedulerToDataStorage</DisplayName>
+    <PublisherDisplayName>myankov</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="BindingRadSchedulerToDataStorage"
+        Logo="images\logo.png"
+        SmallLogo="images\smalllogo.png"
+        Description="BindingRadSchedulerToDataStorage"
+        ForegroundText="light"
+        BackgroundColor="#464646">
+
+        <DefaultTile ShowName="allLogos" />
+        <SplashScreen Image="images\splashscreen.png" />
+
+      </VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>
--- a/Scheduler/Scheduler.sln
+++ b/Scheduler/Scheduler.sln
@ -5,6 +5,8 @@ Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "FilteringRadSchedulerDataSo
 EndProject
 Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "GettingStarted", "GettingStarted\GettingStarted.jsproj", "{308ED819-29B5-45B8-989E-9FE68148E731}"
 EndProject
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "BindingRadSchedulerToDataStorage", "BindingRadSchedulerToDataStorage\BindingRadSchedulerToDataStorage.jsproj", "{6506098A-47DF-4BB6-ABA0-18FBB7895D82}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@ -65,6 +67,30 @@ Global
 		{308ED819-29B5-45B8-989E-9FE68148E731}.Release|x86.ActiveCfg = Release|x86
 		{308ED819-29B5-45B8-989E-9FE68148E731}.Release|x86.Build.0 = Release|x86
 		{308ED819-29B5-45B8-989E-9FE68148E731}.Release|x86.Deploy.0 = Release|x86
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|ARM.ActiveCfg = Debug|ARM
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|ARM.Build.0 = Debug|ARM
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|ARM.Deploy.0 = Debug|ARM
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|x64.ActiveCfg = Debug|x64
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|x64.Build.0 = Debug|x64
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|x64.Deploy.0 = Debug|x64
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|x86.ActiveCfg = Debug|x86
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|x86.Build.0 = Debug|x86
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Debug|x86.Deploy.0 = Debug|x86
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|Any CPU.Build.0 = Release|Any CPU
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|ARM.ActiveCfg = Release|ARM
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|ARM.Build.0 = Release|ARM
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|ARM.Deploy.0 = Release|ARM
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|x64.ActiveCfg = Release|x64
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|x64.Build.0 = Release|x64
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|x64.Deploy.0 = Release|x64
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|x86.ActiveCfg = Release|x86
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|x86.Build.0 = Release|x86
+		{6506098A-47DF-4BB6-ABA0-18FBB7895D82}.Release|x86.Deploy.0 = Release|x86
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE