Custom Groups and Aggregates

You can easily add customized grouping to the wijgrid widget. See the grid > GroupingAndAggregates sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/grid/GroupingAndAggregates for an example.

Complete the following steps:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic 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 id="demo">
        <thead>
            <tr>
                <th>OrderID</th><th>ProductID</th><th>UnitPrice</th><th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10248</td><td>11</td><td>14</td><td>12</td>
            </tr><tr>
                <td>10248</td><td>42</td><td>9.8</td><td>10</td>
            </tr><tr>
                <td>10248</td><td>72</td><td>34.8</td><td>5</td>
            </tr><tr>
                <td>10249</td><td>14</td><td>18.6</td><td>9</td>
            </tr><tr>
                <td>10249</td><td>51</td><td>42.4</td><td>40</td>
            </tr><tr>
                <td>10250</td><td>41</td><td>7.7</td><td>10</td>
            </tr><tr>
                <td>10250</td><td>51</td><td>42.4</td><td>35</td>
            </tr><tr>
                <td>10250</td><td>65</td><td>16.8</td><td>15</td>
            </tr><tr>
                <td>10251</td><td>22</td><td>16.8</td><td>6</td>
            </tr><tr>
                <td>10251</td><td>57</td><td>15.6</td><td>15</td>
            </tr><tr>
                <td>10251</td><td>65</td><td>16.8</td><td>20</td>
            </tr><tr>
                <td>10252</td><td>20</td><td>64.8</td><td>40</td>
            </tr><tr>
                <td>10252</td><td>33</td><td>2</td><td>25</td>
            </tr><tr>
                <td>10252</td><td>60</td><td>27.2</td><td>40</td>
            </tr><tr>
                <td>10253</td><td>31</td><td>10</td><td>20</td>
            </tr><tr>
                <td>10253</td><td>39</td><td>14.4</td><td>42</td>
            </tr><tr>
                <td>10253</td><td>49</td><td>16</td><td>40</td>
            </tr>
        </tbody>
    </table>
</div>

This markup will add content for a table.

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({
                allowSorting: true,
                columns: [
                    {
                        sortDirection: "ascending",
                        aggregate: "count",
                        groupInfo: {
                            position: "header",
                            outlineMode: "startCollapsed",
                            headerText: "{1}:{0}, Count={2}"
                        }
                    },
                    {},
                    { dataType: "currency", aggregate: "sum" },
                    { dataType: "number", dataFormatString: "n0", aggregate: "sum" }
                ]
            });
        });
    </script>

This script initializes the grid and sets the aggregate and grouping options.

What You've Accomplished

Press F5 to run the application, observe that the grid contains groups that are initially collapsed. Expand and collapse groups by clicking the triangular icon next to each group.