Add Column Bands

You can easily add a custom header column bands to the wijgrid widget. Bands let you group similar columns in the grid; you can create bands to organize columns into hierarchical structure implementing multilevel column headers. The text is assigned to each band using the headerText option. See the grid > Bands sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/grid/Bands 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>ID</th><th>Company</th><th>Name</th><th>Title</th><th>Address</th><th>City</th><th>Country</th><th>Phone</th><th>Fax</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ALFKI</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>Berlin</td><td>Germany</td><td>030-0074321</td><td>030-0076545</td>
            </tr>
            <tr>
                <td>ANATR</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td><td>Owner</td><td>Avda. de la Constitucion 2222</td><td>Mexico D.F.</td><td>Mexico</td><td>(5) 555-4729</td><td>(5) 555-3745</td>
            </tr>
            <tr>
                <td>ANTON</td><td>Antonio Moreno Taqueria</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos 2312</td><td>Mexico D.F.</td><td>Mexico</td><td>(5) 555-3932</td><td> </td>
            </tr>
            <tr>
                <td>AROUT</td><td>Around the Horn</td><td>Thomas Hardy</td><td>Sales Representative</td><td>120 Hanover Sq.</td><td>London</td><td>UK</td><td>(171) 555-7788</td><td>(171) 555-6750</td>
            </tr>
            <tr>
                <td>BERGS</td><td>Berglunds snabbkop</td><td>Christina Berglund</td><td>Order Administrator</td><td>Berguvsvagen 8</td><td>Lulea</td><td>Sweden</td><td>0921-12 34 65</td><td>0921-12 34 67</td>
            </tr>
        </tbody>
    </table>
</div>
This markup will add content for a table.
5.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,
                selectionMode: "singleCell",
                columns: [
                    {}, // id
                    {}, // company
                    {
                        headerText: "Additional information",
                        columns: [
                            {
                                headerText: "Contact",
                                columns: [
                                    {}, // name
                                    {} // title
                                ]
                            },
                            {
                                headerText: "Regional information",
                                columns: [
                                    {
                                        headerText: "Address information",
                                        columns: [
                                            {}, // address
                                            {}, // city
                                            {} // country
                                        ]
                                    },
                                    {
                                        headerText: "Communication",
                                        columns: [
                                            {}, // phone
                                            {} // fax
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
        });
    </script>

This will setup the column data bands, grouping contact and regional information.

What You've Accomplished

Press F5 to run the application, observe that columns are grouped together with column bands in the header. For example, address information is grouped together.