Ignite UI™ API Documentation

Ignite UI Home

ui.igGridMultiColumnHeaders

Overview
Options
Events
Methods
Theming

Both the igGrid and igHierarchicalGrid controls feature multi-column headers. The multi-column headers feature provides header grouping and is well integrated with the Hiding, Resizing and ColumnMoving features. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igGrid control with multi-column headers feature.

Click here for more information on how to get started using this API . For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        var products = [
            { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
            { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
            { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
            { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
            { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
            { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
            { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
            { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
            { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
        ];

        $(function () {
            $("#grid").igGrid({
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "Product Data", key: "ProductData", group: [
                        { headerText: "Product Name", key: "Name", dataType: "string" },
                        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
                    ]}
                ],
                features:[
                    {
                        name: "MultiColumnHeaders"
                    }
                ],
                width: "500px",
                dataSource: products
            });
        });
    </script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

Related Samples

Multi-Column Headers (igGrid)

destroy

.igGridMultiColumnHeaders( "destroy" );

Destroys the multicolumn widget.

Code Sample

          $(".selector").igGridMultiColumnHeaders("destroy");

getMultiColumnHeaders

.igGridMultiColumnHeaders( "getMultiColumnHeaders" );

Return Type:

array

Return Type Description:

array of columns.
Returns multicolumn headers array. if there aren"t multicolumn headers returns undefined.
Code Sample
```
 
      var columns = $(".selector").igGridMultiColumnHeaders("getMultiColumnHeaders");
      
```

ui-iggrid-multiheader-cell

Classes applied to the multi-column header cell(group header cell which has children in the multi-column headers).

Ignite UI Home

ui.igGridMultiColumnHeaders

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

inherit

destroy

Code Sample

getMultiColumnHeaders

Code Sample

ui-iggrid-multiheader-cell