Set the Selection Mode

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:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
Check the dependencies to make sure the project is referencing the latest version of Wijmo. These should be placed within the <head> tags of the page. You can find the latest version of the Wijmo dependencies at http://wijmo.com/downloads/cdn/.

Add the following markup within the <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.

After the closing </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.