Added example about checkbox selection in RadGrid

2014-05-07 17:48:58 +03:00 · 2014-05-07 17:48:58 +03:00 · dc4fe47ae1
--- a/Grid/CheckboxSelection/CheckboxSelection.jsproj
+++ b/Grid/CheckboxSelection/CheckboxSelection.jsproj
@ -63,6 +63,7 @@
    <Content Include="images\storelogo.scale-100.png" />
    <Content Include="js\default.js" />
    <Content Include="css\default.css" />
+    <Content Include="ReadMe.html" />
  </ItemGroup>
  <ItemGroup>
    <SDKReference Include="Microsoft.WinJS.2.0, Version=1.0" />
--- a/Grid/CheckboxSelection/ReadMe.html
+++ b/Grid/CheckboxSelection/ReadMe.html
@ -0,0 +1,6 @@
+<p>
+	This example shows how to implement checkbox selection in RadGrid. To display the checkboxes, define a template for the first column. Then, handle 
+	the click event of the row to prevent default selection and of the checkboxes to manually select the row whose checkbox was checked by the user.
+	To implement "select/deselect all" functionality, define a header template with a checkbox for the same column and handle its click separately.
+	Additionally, note that you should hide the select handle displayed by default by RadGrid for better user experience (done in CSS).
+</p>
--- a/Grid/CheckboxSelection/css/default.css
+++ b/Grid/CheckboxSelection/css/default.css
@ -1,7 +1,15 @@
-body {
-	margin-top:100px;
+.mainContent {
+	margin: 120px;
+	width: 1000px;
 }

+.info {
+	color: #feef7a;
+	margin-left: 120px;
+	width: 1000px;
+}
+
+
 .t-expand.t-nw {
 	display: none;
 }
--- a/Grid/CheckboxSelection/default.html
+++ b/Grid/CheckboxSelection/default.html
@ -2,7 +2,7 @@
 <html>
 <head>
    <meta charset="utf-8" />
-    <title>App1</title>
+    <title>CheckboxSelection</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
@ -19,6 +19,12 @@
    <script src="/js/default.js"></script>
 </head>
 <body>
+	<section class="mainContent">
 		<div id="grid1"></div>
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
 </body>
 </html>