Ignite UI API Reference
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> <div id="grid"></div> </body> </html>
Related Samples
Related Topics
Dependencies
jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.ui.grid.framework.js
infragistics.ui.shared.js
infragistics.datasource.js
infragistics.util.js
Inherits
The current widget has no options.
The current widget has no events.
-
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).