Merge pull request #18 from MIYankov/master

Added a new example of RadRangeSlider filtering a ListView control
2013-08-22 00:46:36 -07:00 · 2013-08-22 00:46:36 -07:00 · c3a0eb1478
--- a/Slider/RangeSliderFilteringListViewControl/RangeSliderFilteringListViewControl.jsproj
+++ b/Slider/RangeSliderFilteringListViewControl/RangeSliderFilteringListViewControl.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>0e3aa624-af78-46db-94a1-ae9ba14eeb8c</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>RangeSliderFilteringListViewControl_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="RangeSliderFilteringListViewControl_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
+    <SDKReference Include="Telerik.UI, Version=2013.2.716" />
+  </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/Slider/RangeSliderFilteringListViewControl/RangeSliderFilteringListViewControl_TemporaryKey.pfx
+++ b/Slider/RangeSliderFilteringListViewControl/RangeSliderFilteringListViewControl_TemporaryKey.pfx
--- a/Slider/RangeSliderFilteringListViewControl/ReadMe.html
+++ b/Slider/RangeSliderFilteringListViewControl/ReadMe.html
@ -0,0 +1,4 @@
+<p>
+    This sample shows a RadRangeSlider filtering a ListView control by products prices. The user can choose a minimal and maximal value
+    of the price span. The ListView control's contents are filtered on the RadRangeSlider's "change" event.
+</p>
--- a/Slider/RangeSliderFilteringListViewControl/css/default.css
+++ b/Slider/RangeSliderFilteringListViewControl/css/default.css
@ -0,0 +1,49 @@
+.mainContent {
+	margin: 120px;
+
+    display: -ms-grid;
+    -ms-grid-columns: 2fr 8fr;
+    -ms-grid-rows: 1fr;
+}
+
+#slider-container {
+    -ms-grid-column: 1;
+    -ms-grid-row: 1;
+    text-align: center;
+}
+
+    #slider-container h2 {
+        margin-bottom: 20px;
+    }
+
+#listView-container {
+    -ms-grid-column: 2;
+    -ms-grid-row: 1;
+}
+
+#listView {
+    height: 550px;
+    width: 680px;
+}
+
+    #listView .win-item {
+        font-size: 8px;
+        width: 140px;
+        height: 140px;
+        background: #006AC1;
+        color: #FFF;
+        padding: 10px;
+
+        position: relative;
+    }
+
+    #listView h4 {
+        position: absolute;
+        bottom: 5px;
+        right: 5px;
+    }
+
+.info {
+	color: #feef7a;
+	margin-left: 120px;
+}
--- a/Slider/RangeSliderFilteringListViewControl/default.html
+++ b/Slider/RangeSliderFilteringListViewControl/default.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>GettingStarted</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>
+
+	<!-- GettingStarted references -->
+	<link href="/css/default.css" rel="stylesheet" />
+	<script src="/js/default.js"></script>
+</head>
+<body>
+	<section class="mainContent">
+		<section id="slider-container">
+            <h2>Price Span</h2>
+            <!-- The RadRangeSlider control has been initialized with custom min and max values, a vertical orientation
+                and a handler to the "change" event. The "change" event fires when the value of the slider control is 
+                changed and not while the user is dragging the handle -->
+            <div id="slider" data-win-control="Telerik.UI.RadRangeSlider" data-win-options="{
+                    min: 0,
+                    max: 25,
+                    orientation: 'vertical',
+                    onchange: SampleData.SliderChangeHandler
+                }"></div>
+        </section>
+        <section id="listView-container">
+            <h2>Products</h2>
+            <div id="productsTemplate" data-win-control="WinJS.Binding.Template">
+                <h3 data-win-bind="innerText: Name"></h3>
+                <h4>Price: <span data-win-bind="innerText: ListPrice SampleData.FormatPrice"></span></h4>
+            </div>
+            <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{
+                    itemTemplate: select('#productsTemplate'),
+                    itemDataSource : SampleData.Products.dataSource
+                }"></div>
+        </section>
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
+</body>
+</html>
--- a/Slider/RangeSliderFilteringListViewControl/images/logo.png
+++ b/Slider/RangeSliderFilteringListViewControl/images/logo.png
--- a/Slider/RangeSliderFilteringListViewControl/images/smalllogo.png
+++ b/Slider/RangeSliderFilteringListViewControl/images/smalllogo.png
--- a/Slider/RangeSliderFilteringListViewControl/images/splashscreen.png
+++ b/Slider/RangeSliderFilteringListViewControl/images/splashscreen.png
--- a/Slider/RangeSliderFilteringListViewControl/images/storelogo.png
+++ b/Slider/RangeSliderFilteringListViewControl/images/storelogo.png
--- a/Slider/RangeSliderFilteringListViewControl/js/default.js
+++ b/Slider/RangeSliderFilteringListViewControl/js/default.js
@ -0,0 +1,158 @@
+// 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 data = [
+    {
+        "ProductID": 873,
+        "Name": "Patch Kit/8 Patches",
+        "ListPrice": "2.2900"
+    },
+    {
+        "ProductID": 922,
+        "Name": "Road Tire Tube",
+        "ListPrice": "3.9900"
+    },
+    {
+        "ProductID": 870,
+        "Name": "Water Bottle - 30 oz.",
+        "ListPrice": "4.9900"
+    },
+    {
+        "ProductID": 921,
+        "Name": "Mountain Tire Tube",
+        "ListPrice": "4.9900"
+    },
+    {
+        "ProductID": 923,
+        "Name": "Touring Tire Tube",
+        "ListPrice": "4.9900"
+    },
+    {
+        "ProductID": 877,
+        "Name": "Bike Wash - Dissolver",
+        "ListPrice": "7.9500"
+    },
+    {
+        "ProductID": 872,
+        "Name": "Road Bottle Cage",
+        "ListPrice": "8.9900"
+    },
+    {
+        "ProductID": 874,
+        "Name": "Racing Socks, M",
+        "ListPrice": "8.9900"
+    },
+    {
+        "ProductID": 875,
+        "Name": "Racing Socks, L",
+        "ListPrice": "8.9900"
+    },
+    {
+        "ProductID": 709,
+        "Name": "Mountain Bike Socks, M",
+        "ListPrice": "9.5000"
+    },
+    {
+        "ProductID": 710,
+        "Name": "Mountain Bike Socks, L",
+        "ListPrice": "9.5000"
+    },
+    {
+        "ProductID": 871,
+        "Name": "Mountain Bottle Cage",
+        "ListPrice": "9.9900"
+    },
+    {
+        "ProductID": 846,
+        "Name": "Taillights - Battery-Powered",
+        "ListPrice": "13.9900"
+    },
+    {
+        "ProductID": 712,
+        "Name": "AWC Logo Cap",
+        "ListPrice": "8.9900"
+    },
+    {
+        "ProductID": 931,
+        "Name": "LL Road Tire",
+        "ListPrice": "21.4900"
+    },
+    {
+        "ProductID": 878,
+        "Name": "Fender Set - Mountain",
+        "ListPrice": "21.9800"
+    },
+    {
+        "ProductID": 844,
+        "Name": "Minipump",
+        "ListPrice": "19.9900"
+    },
+    {
+        "ProductID": 952,
+        "Name": "Chain",
+        "ListPrice": "20.2400"
+    },
+    {
+        "ProductID": 858,
+        "Name": "Half-Finger Gloves, S",
+        "ListPrice": "24.4900"
+    },
+    {
+        "ProductID": 859,
+        "Name": "Half-Finger Gloves, M",
+        "ListPrice": "24.4900"
+    }
+    ];
+
+    function getNewFilterRange(e) {
+        //e.value contains an array of two values for RadRangeSlider. 
+        //e.value[0] is the lower border of the range and e.value[1] is the max value.
+        var min = e.value[0];
+        var max = e.value[1];
+
+        var listView = document.getElementById("listView").winControl;
+        listView.itemDataSource = SampleData.Products.createFiltered(function (p) { return p.ListPrice > min && p.ListPrice < max }).dataSource;
+    };
+
+    WinJS.Namespace.define("SampleData", {
+        Products: new WinJS.Binding.List(data),
+        //the RadRangeSlider change event handler. It calls the getNewFilterRange() function and marks 
+        //it for processing, so the handler can be used in the mark up.
+        SliderChangeHandler: WinJS.Utilities.markSupportedForProcessing(getNewFilterRange),
+        FormatPrice: WinJS.Binding.converter(function (price) {
+            var formatted = Telerik.Utilities.toString(parseFloat(price), "c2", "en-US");
+            return formatted;
+        })
+    });
+
+    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());
+        }
+    };
+
+    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/Slider/RangeSliderFilteringListViewControl/package.appxmanifest
+++ b/Slider/RangeSliderFilteringListViewControl/package.appxmanifest
@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+
+  <Identity
+    Name="0e3aa624-af78-46db-94a1-ae9ba14eeb8c"
+    Version="1.0.0.0"
+    Publisher="CN=myankov" />
+
+  <Properties>
+    <DisplayName>RangeSliderFilteringListViewControl</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="RangeSliderFilteringListViewControl"
+        Logo="images\logo.png"
+        SmallLogo="images\smalllogo.png"
+        Description="RangeSliderFilteringListViewControl"
+        ForegroundText="light"
+        BackgroundColor="#464646">
+
+        <DefaultTile ShowName="allLogos" />
+        <SplashScreen Image="images\splashscreen.png" />
+
+      </VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>
--- a/Slider/Slider.sln
+++ b/Slider/Slider.sln
@ -7,6 +7,8 @@ Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "Customization", "Customizin
 EndProject
 Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "ChooseColorWithRGBSliders", "ChooseColorWithRGBSliders\ChooseColorWithRGBSliders.jsproj", "{75A1624F-45EB-4AE7-8E30-471382171045}"
 EndProject
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "RangeSliderFilteringListViewControl", "RangeSliderFilteringListViewControl\RangeSliderFilteringListViewControl.jsproj", "{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@ -91,6 +93,30 @@ Global
 		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x86.ActiveCfg = Release|x86
 		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x86.Build.0 = Release|x86
 		{75A1624F-45EB-4AE7-8E30-471382171045}.Release|x86.Deploy.0 = Release|x86
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|ARM.ActiveCfg = Debug|ARM
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|ARM.Build.0 = Debug|ARM
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|ARM.Deploy.0 = Debug|ARM
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|x64.ActiveCfg = Debug|x64
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|x64.Build.0 = Debug|x64
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|x64.Deploy.0 = Debug|x64
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|x86.ActiveCfg = Debug|x86
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|x86.Build.0 = Debug|x86
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Debug|x86.Deploy.0 = Debug|x86
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|ARM.ActiveCfg = Release|ARM
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|ARM.Build.0 = Release|ARM
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|ARM.Deploy.0 = Release|ARM
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|x64.ActiveCfg = Release|x64
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|x64.Build.0 = Release|x64
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|x64.Deploy.0 = Release|x64
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|x86.ActiveCfg = Release|x86
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|x86.Build.0 = Release|x86
+		{0E3AA624-AF78-46DB-94A1-AE9BA14EEB8C}.Release|x86.Deploy.0 = Release|x86
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE