Merge pull request #25 from MIYankov/master

Added an Example about dynamic filtering of RadScheduler's dataSource

Scheduler/FilteringRadSchedulerDataSource/FilteringRadSchedulerDataSource.jsproj

@@ -0,0 +1,86 @@
+<?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>22d43528-7863-4f20-8712-257b8d2245cb</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>FilteringRadSchedulerDataSource_TemporaryKey.pfx</PackageCertificateKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <AppxManifest Include="package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+    <Content Include="default.html" />
+    <Content Include="images\cities\Berlin.jpg" />
+    <Content Include="images\cities\London.jpg" />
+    <Content Include="images\cities\Manchester.jpg" />
+    <Content Include="images\cities\Paris.jpg" />
+    <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="FilteringRadSchedulerDataSource_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
+    <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>

Scheduler/FilteringRadSchedulerDataSource/ReadMe.html

@@ -0,0 +1,5 @@
+<p>
+	This example shows how you can filter a RadScheduler's dataSource based on the boolean values of checkbox input elements. The scheduler is loaded with concerts 
+    events and city resources. On top of the RadScheduler there are a number of checkboxes with image labels and upon change the scheduler's dataSource is filtered 
+    based on the selection.
+</p>

Scheduler/FilteringRadSchedulerDataSource/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;
+}

Scheduler/FilteringRadSchedulerDataSource/default.html

@@ -0,0 +1,64 @@
+<!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>
+
+    <!-- FilteringRadSchedulerDataSource references -->
+    <link href="/css/default.css" rel="stylesheet" />
+    <script src="/js/default.js"></script>
+</head>
+<body>
+    <section class="mainContent">
+        <!-- In the header we have the title and the cities you can choose from -->
+		<div id="header-wrapper">
+            <h1 id="title">Choose a City to See its Concert Schedule</h1>
+            <div class="city-container" id="berlin">
+                <label class="city-label" for="berlin-checkbox-1"></label>
+                <h3 class="city-name">Berlin</h3>
+                <input class="city-checkbox" id="berlin-checkbox-1" type="checkbox" checked="checked" />
+            </div>
+            <div class="city-container" id="paris">
+                <label class="city-label" for="paris-checkbox-2"></label>
+                <h3 class="city-name">Paris</h3>
+                <input class="city-checkbox" id="paris-checkbox-2" type="checkbox" checked="checked" />
+            </div>
+            <div class="city-container" id="london">
+                <label class="city-label" for="london-checkbox-3"></label>
+                <h3 class="city-name">London</h3>
+                <input class="city-checkbox" id="london-checkbox-3" type="checkbox" checked="checked" />
+            </div>
+            <div class="city-container" id="manchester">
+                <label class="city-label" for="manchester-checkbox-4"></label>
+                <h3 class="city-name">Manchester</h3>
+                <input class="city-checkbox" id="manchester-checkbox-4" type="checkbox" checked="checked" />
+            </div>
+        </div>
+        <!-- initializing RadScheduler with options exposed in the Scheduler namespace that is defined in the code-behind -->
+        <div id="scheduler" data-win-control="Telerik.UI.RadScheduler" data-win-options="{
+                height: 700,
+                date: Scheduler.date,
+                startTime: Scheduler.startTime,
+                endTime: Scheduler.endTime,
+                dataSource: Scheduler.dataSource,
+                resources: Scheduler.resources,
+                views: ['week', 'agenda']
+            }"></div>
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
+</body>
+</html>

Scheduler/FilteringRadSchedulerDataSource/js/default.js

@@ -0,0 +1,181 @@
+// 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;
+
+    // the scheduler sample data
+    var data = [{
+        id: 1,
+        title: "Bob Dylan",
+        cityId: 1,
+        start: new Date("2013/10/24 20:00"),
+        end: new Date("2013/10/24 23:00")
+    }, {
+        id: 2,
+        title: "Everlast",
+        cityId: 1,
+        start: new Date("2013/10/25 21:00"),
+        end: new Date("2013/10/26 00:00")
+    }, {
+        id: 3,
+        title: "Bruno Mars",
+        cityId: 1,
+        start: new Date("2013/10/28 20:00"),
+        end: new Date("2013/10/28 23:00")
+    }, {
+        id: 4,
+        title: "Texas",
+        cityId: 2,
+        start: new Date("2013/10/21 20:00"),
+        end: new Date("2013/10/21 23:00")
+    }, {
+        id: 5,
+        title: "DISCO",
+        cityId: 2,
+        start: new Date("2013/10/24 20:00"),
+        end: new Date("2013/10/24 23:00")
+    }, {
+        id: 6,
+        title: "Blue",
+        cityId: 3,
+        start: new Date("2013/10/22 19:00"),
+        end: new Date("2013/10/22 22:30")
+    }, {
+        id: 7,
+        title: "Everything Everything",
+        cityId: 3,
+        start: new Date("2013/10/24 20:00"),
+        end: new Date("2013/10/24 23:30")
+    }, {
+        id: 8,
+        title: "Charlez Aznavour",
+        cityId: 3,
+        start: new Date("2013/10/25 19:30"),
+        end: new Date("2013/10/25 21:00")
+    }, {
+        id: 9,
+        title: "John Mayer",
+        cityId: 3,
+        start: new Date("2013/10/26 19:30"),
+        end: new Date("2013/10/26 23:00")
+    }, {
+        id: 10,
+        title: "Arctic Monkeys",
+        cityId: 4,
+        start: new Date("2013/10/23 19:00"),
+        end: new Date("2013/10/23 22:00")
+    }, {
+        id: 11,
+        title: "HIM",
+        cityId: 4,
+        start: new Date("2013/10/24 19:00"),
+        end: new Date("2013/10/24 22:00")
+    }, {
+        id: 12,
+        title: "Billy Joel",
+        cityId: 4,
+        start: new Date("2013/10/29 19:00"),
+        end: new Date("2013/10/29 21:00")
+    }
+    ];
+
+    // the scheduler sample resources that connect to the "cityId" field in the sample data
+    var resources = [
+    {
+        field: "cityId",
+        title: "City",
+        name: "Cities",
+        dataSource: [{
+            text: "Berlin",
+            value: 1,
+            color: "#FBF192"
+        }, {
+            text: "Paris",
+            value: 2,
+            color: "#27BAB2"
+        }, {
+            text: "London",
+            value: 3,
+            color: "#0083D4"
+        }, {
+            text: "Manchester",
+            value: 4,
+            color: "#FABF09"
+        }]
+    }];
+
+    // exposing the scheduler configuration options in a namespace, so they can be accessed in the mark-up
+    WinJS.Namespace.define("Scheduler", {
+        date: new Date("2013/10/21"),
+        startTime: new Date("2013/10/21 19:00"),
+        endTime: new Date("2013/10/22 00:00"),
+        dataSource: data,
+        resources: resources
+    });
+
+    // initializing the scheduler and checkboxes here because we get the values for them in the processAll() 
+    // promise and use them in the filterScheduler function below.
+    var scheduler,
+        checkboxes;
+
+    // this is the checkboxes "change" event handler function.
+    function filterScheduler() {
+        var filter = [];
+
+        // generating the dataSource filter expression based on the checkboxes's values
+        for (var j = 0; j < checkboxes.length; j++) {
+            var cityId = parseInt(checkboxes[j].id.split("-")[2]);
+
+            if (checkboxes[j].checked) {
+                filter.push({ field: "cityId", operator: "eq", value: cityId });
+            }
+        }
+
+        // assigning the gerated filter to the scheduler's dataSource and changing the 
+        // logic operator to "or" in case we have multiple filter expressions
+        scheduler.dataSource.filter = filter;
+        scheduler.dataSource.filter.logic = "or";
+        // refresh the grid for the filter to take effect.
+        scheduler.refresh();
+    }
+
+    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() {
+                // getting the references to the scheduler and checkboxes in the promise of the 
+                // processAll() function, because we have to wait for the scheduler control to be 
+                // initialized
+                scheduler = Telerik.UI.find.Scheduler("#scheduler");
+                checkboxes = document.querySelectorAll(".city-checkbox");
+
+                // adding event listeners to each checkbox's "change" event
+                for (var i = 0; i < checkboxes.length; i++) {
+                    checkboxes[i].addEventListener("change", filterScheduler);
+                }
+            }));
+        }
+    };
+
+    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();
+})();

Scheduler/FilteringRadSchedulerDataSource/package.appxmanifest

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+
+  <Identity
+    Name="22d43528-7863-4f20-8712-257b8d2245cb"
+    Version="1.0.0.0"
+    Publisher="CN=myankov" />
+
+  <Properties>
+    <DisplayName>FilteringRadSchedulerDataSource</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="FilteringRadSchedulerDataSource"
+        Logo="images\logo.png"
+        SmallLogo="images\smalllogo.png"
+        Description="FilteringRadSchedulerDataSource"
+        ForegroundText="light"
+        BackgroundColor="#464646">
+
+        <DefaultTile ShowName="allLogos" />
+        <SplashScreen Image="images\splashscreen.png" />
+
+      </VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>

Scheduler/Scheduler.sln

@@ -0,0 +1,46 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 2012
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "FilteringRadSchedulerDataSource", "FilteringRadSchedulerDataSource\FilteringRadSchedulerDataSource.jsproj", "{22D43528-7863-4F20-8712-257B8D2245CB}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug|ARM = Debug|ARM
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|Any CPU = Release|Any CPU
+		Release|ARM = Release|ARM
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|ARM.ActiveCfg = Debug|ARM
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|ARM.Build.0 = Debug|ARM
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|ARM.Deploy.0 = Debug|ARM
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|x64.ActiveCfg = Debug|x64
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|x64.Build.0 = Debug|x64
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|x64.Deploy.0 = Debug|x64
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|x86.ActiveCfg = Debug|x86
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|x86.Build.0 = Debug|x86
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Debug|x86.Deploy.0 = Debug|x86
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|Any CPU.Build.0 = Release|Any CPU
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|ARM.ActiveCfg = Release|ARM
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|ARM.Build.0 = Release|ARM
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|ARM.Deploy.0 = Release|ARM
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|x64.ActiveCfg = Release|x64
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|x64.Build.0 = Release|x64
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|x64.Deploy.0 = Release|x64
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|x86.ActiveCfg = Release|x86
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|x86.Build.0 = Release|x86
+		{22D43528-7863-4F20-8712-257B8D2245CB}.Release|x86.Deploy.0 = Release|x86
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal