Available in the Full Version

Data Grid - Cell Merging

Employee IDFirst NameLast NameTitleAddressCityRegionCountryPostal Code
1DavolioNancySales Representative507 - 20th Ave. E. Apt. 2ASeattleWAUSA98122
2FullerAndrewVice President, Sales908 W. Capital WayTacomaWAUSA98401
3LeverlingJanetSales Representative722 Moss Bay Blvd.KirklandWAUSA98033
4PeacockMargaretSales Representative4110 Old Redmond Rd.RedmondWAUSA98052
5BuchananStevenSales Manager14 Garrett HillLondon UKSW1 8JR
6SuyamaMichaelSales RepresentativeCoventry House Miner Rd.London UKEC2 7JR
7KingRobertSales RepresentativeEdgeham Hollow Winchester WayLondon UKRG1 9SP
8CallahanLauraInside Sales Coordinator4726 - 11th Ave. N.E.SeattleWAUSA98105
9DodsworthAnneSales Representative7 Houndstooth Rd.London UKWG2 7LT
 

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates Cell Merging feature of igGrid in combination with the Sorting feature. Cells are merged on initial load.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />   

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    
</head>
<body>
        
    <!-- Target element for the igGrid -->
    <table id="grid">
    </table>    

    <!--Sample JSON Data-->
    <script src="/data-files/northwind.js"></script>

    <script>
        $(function () {
            $("#grid").igGrid({
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                columns: [
                   { key: "EmployeeID", headerText: "Employee ID", dataType: "number" },
                   { key: "LastName", headerText: "First Name", dataType: "string" },
                   { key: "FirstName", headerText: "Last Name", dataType: "string" },
                   { key: "Title", headerText: "Title", dataType: "string" },
                   { key: "Address", headerText: "Address", dataType: "string" },
                   { key: "City", headerText: "City", dataType: "string" },
                   { key: "Region", headerText: "Region", dataType: "string" },
                   { key: "Country", headerText: "Country", dataType: "string" },
                   { key: "PostalCode", headerText: "Postal Code", dataType: "string" }
                ],
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "EmployeeID",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "LastName",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Region",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Country",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "PostalCode",
                                classes: "ui-visible-phone"
                            }
                        ]
                    },
                    {
                        name: "CellMerging",
                        mergeOn: "always"
                    },
                    {
                        name: "Sorting",
                        type: "local",
                        applySortedColumnCss: false
                    }
                ]
            });
        });
    </script>
</body>
</html>