The wijgrid widget supports several selection modes. At run time, users can select single or multiple cells, columns, rows, or ranges. See the grid > Selection sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/grid/Selection for an example.
Complete the following steps:
<body> tags of the page, just after @RenderBody():
<div class="main demo">
<table class="demoTable">
<tr>
<td>
<table id="demo">
<thead>
<tr>
<th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td><td>14</td><td>12</td><td>0</td>
</tr>
<tr>
<td>42</td><td>9,8</td><td>10</td><td>0</td>
</tr>
<tr>
<td>72</td><td>34,8</td><td>5</td><td>0</td>
</tr>
<tr>
<td>14</td><td>18.6</td><td>9</td><td>0</td>
</tr>
<tr>
<td>51</td><td>42.4</td><td>40</td><td>0</td>
</tr>
<tr>
<td>41</td><td>7.7</td><td>10</td><td>0</td>
</tr>
<tr>
<td>51</td><td>42.4</td><td>35</td><td>0.15</td>
</tr>
<tr>
<td>65</td><td>16.8</td><td>15</td><td>0.15</td>
</tr>
<tr>
<td>22</td><td>16.8</td><td>6</td><td>0.05</td>
</tr>
<tr>
<td>57</td><td>15.6</td><td>15</td><td>0.05</td>
</tr>
<tr>
<td>65</td><td>16.8</td><td>20</td><td>0</td>
</tr>
<tr>
<td>20</td><td>64.8</td><td>40</td><td>0.05</td>
</tr>
<tr>
<td>33</td><td>2</td><td>25</td><td>0.05</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="ui-widget ui-widget-content" rules="all" id="demoLogTable">
<caption class="ui-widget-header">selection log</caption>
<tbody>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<div class="demo-options">
<div class="option-row">
<label for="selectionMode">Selection mode</label>
<select id="selectionMode">
<option>singleCell</option>
<option>singleRow</option>
<option>singleColumn</option>
<option>singleRange</option>
<option>multiColumn</option>
<option>multiRow</option>
<option>multiRange</option>
</select>
</div>
</div>
</div>
<style type="text/css">
.demoTable > tbody > tr > td
{
vertical-align: top;
width: 400px;
}
#demoLogTable
{
table-layout: fixed;
margin-left: 20px;
width: 100%;
}
</style>
This markup will add content for two tables and a selection drop-down box. One table will be a grid where data is displayed and the other a table that will display what selection has been made in the grid.
</div> tag you added in the previous step, enter the following jQuery script to initialize the wijgrid widgets:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#demo").wijgrid({
selectionMode: "singleCell",
columns: [
{ dataType: "number", sortDirection: "ascending", dataFormatString: "n0" },
{ dataType: "currency" },
{ dataType: "number", dataFormatString: "n0" },
{ dataType: "number", dataFormatString: "p0" }
],
selectionChanged: onSelectionChanged
});
function onSelectionChanged() {
var sc = $("#demo").wijgrid("selection").selectedCells();
var log = $("#demoLogTable");
log.find("td").removeClass("ui-state-highlight").html("<span> </span>");
for (var i = 0, len = sc.length(); i < len; i++) {
var cellInfo = sc.item(i);
var logCell = $(log[0].tBodies[0].rows[cellInfo.rowIndex()].cells[cellInfo.cellIndex()]);
logCell.addClass("ui-state-highlight").text(cellInfo.value().toString());
}
}
$("#selectionMode").change(function (e) {
$("#demo").wijgrid("option", "selectionMode", $(e.target).val());
});
});
</script>
This will initialize the grid and the drop-down box.
What You've Accomplished
Press F5 to run the application, choose a selection method from the drop-down box, and select cells in the grid. Notice that your selection is reflected in the table.