Ignite UI™ API Documentation

ui.igGridMultiColumnHeaders

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>
    <table id="grid"></table>
</body>
</html>

Related Samples

Multi-Column Headers (igGrid)

groupCollapsed

Cancellable:: false

Event fired after the group collapsing has been executed and results are rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("iggridmulticolumnheadersgroupcollapsed", ".selector", function (evt, ui) {
    // return the triggered event
    evt;
 
    // a reference to the igGridMultiColumnHeaders widget
    ui.owner;
 
    // the column object for the current group that is collapsed
    ui.column;
 
    // a reference to the jQuery object for the column being collapsed (th)
    ui.element
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "MultiColumnHeaders",
            groupCollapsed: function (evt, ui) { ... }
        }
    ]
});

groupCollapsing

Cancellable:: true

Event fired before a group collapsing operation is executed.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("iggridmulticolumnheadersgroupcollapsing", ".selector", function (evt, ui) {
    // return the triggered event
    evt;
 
    // a reference to the igGridMultiColumnHeaders widget
    ui.owner;
 
    // the column object for the current group that is collapsing
    ui.column;
 
    // a reference to the jQuery object for the column being collapsing (th)
    ui.element
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "MultiColumnHeaders",
            groupCollapsing: function (evt, ui) { ... }
        }
    ]
});

groupExpanded

Cancellable:: false

Event fired after the group expanding has been executed and results are rendered.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("iggridmulticolumnheadersgroupexpanded", ".selector", function (evt, ui) {
    // return the triggered event
    evt;
 
    // a reference to the igGridMultiColumnHeaders widget
    ui.owner;
 
    // the column object for the current group that is expanded
    ui.column;
 
    // a reference to the jQuery object for the column being expanded (th)
    ui.element
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "MultiColumnHeaders",
            groupExpanded: function (evt, ui) { ... }
        }
    ]
});

groupExpanding

Cancellable:: true

Event fired before a group expanding operation is executed.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

//Bind after initialization
$(document).on("iggridmulticolumnheadersgroupexpanded", ".selector", function (evt, ui) {
    // return the triggered event
    evt;
 
    // a reference to the igGridMultiColumnHeaders widget
    ui.owner;
 
    // the column object for the current group that is expanding
    ui.column;
 
    // a reference to the jQuery object for the column being expanded (th)
    ui.element
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "MultiColumnHeaders",
            groupExpanded: function (evt, ui) { ... }
        }
    ]
});

Show Details

changeLocale

.igGridMultiColumnHeaders( "changeLocale" );
Changes the all locales into the widget element to the language specified in options.language
Note that this method is for rare scenarios, see language or locale option setter.
Code Sample

$(".selector").igGridMultiColumnHeaders("changeLocale");
collapseGroup

.igGridMultiColumnHeaders( "collapseGroup", groupKey:string, [callback:function] );
Collapses an expanded group. If the group is collapsed, the method does nothing.
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
- groupKey
- Type:string
- Group key.
- callback
- Type:function
- Optional
- Specifies a custom function to be called when the group is collapsed.
Code Sample

$(".selector").igGridMultiColumnHeaders("collapseGroup", "groupKey");
destroy

.igGridMultiColumnHeaders( "destroy" );
Destroys the multicolumn widget.
Code Sample

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

.igGridMultiColumnHeaders( "expandGroup", groupKey:string, [callback:function] );
Expands a collapsed group. If the group is expanded, the method does nothing.
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
- groupKey
- Type:string
- Group key.
- callback
- Type:function
- Optional
- Specifies a custom function to be called when the group is expanded.
Code Sample

$(".selector").igGridMultiColumnHeaders("expandGroup", "groupKey");
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");
toggleGroup

.igGridMultiColumnHeaders( "toggleGroup", groupKey:string, [callback:function] );
Toggles a collapsible group.
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
- groupKey
- Type:string
- Group key.
- callback
- Type:function
- Optional
- Specifies a custom function to be called when the group is toggled.
Code Sample

$(".selector").igGridMultiColumnHeaders("toggleGroup", "groupKey");

ui-iggrid-multiheader-collapsed

Classes applied to collapsed header button.
ui-iggrid-indicatorcontainer ui-iggrid-collapsibleindicatorcontainer

Classes applied to the container of the collapsible header button.
ui-iggrid-multiheader-expanded

Classes applied to expanded header button.
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 for jQuery | API Reference

ui.igGridMultiColumnHeaders

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

inherit

groupCollapsed

Code Sample

groupCollapsing

Code Sample

groupExpanded

Code Sample

groupExpanding

Code Sample

changeLocale

Code Sample

collapseGroup

Code Sample

destroy

Code Sample

expandGroup

Code Sample

getMultiColumnHeaders

Code Sample

toggleGroup

Code Sample

ui-iggrid-multiheader-collapsed

ui-iggrid-indicatorcontainer ui-iggrid-collapsibleindicatorcontainer

ui-iggrid-multiheader-expanded

ui-iggrid-multiheader-cell