Added example about checkbox selection in RadGrid
This commit is contained in:
Родитель
5e683b3a77
Коммит
dc4fe47ae1
|
@ -63,6 +63,7 @@
|
||||||
<Content Include="images\storelogo.scale-100.png" />
|
<Content Include="images\storelogo.scale-100.png" />
|
||||||
<Content Include="js\default.js" />
|
<Content Include="js\default.js" />
|
||||||
<Content Include="css\default.css" />
|
<Content Include="css\default.css" />
|
||||||
|
<Content Include="ReadMe.html" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<SDKReference Include="Microsoft.WinJS.2.0, Version=1.0" />
|
<SDKReference Include="Microsoft.WinJS.2.0, Version=1.0" />
|
||||||
|
|
|
@ -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>
|
|
@ -1,7 +1,15 @@
|
||||||
body {
|
.mainContent {
|
||||||
margin-top:100px;
|
margin: 120px;
|
||||||
|
width: 1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #feef7a;
|
||||||
|
margin-left: 120px;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.t-expand.t-nw {
|
.t-expand.t-nw {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>App1</title>
|
<title>CheckboxSelection</title>
|
||||||
|
|
||||||
<!-- WinJS references -->
|
<!-- WinJS references -->
|
||||||
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
|
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
|
||||||
|
@ -19,6 +19,12 @@
|
||||||
<script src="/js/default.js"></script>
|
<script src="/js/default.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="grid1"></div>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Загрузка…
Ссылка в новой задаче