Available in the OSS Version

Splitter - Horizontal Splitter

This sample demonstrates how to use the Splitter control to manage master/detail grid with horizontal layout.
Customer IDCompany NameContact NameContact Title
ALFKIAlfreds FutterkisteMaria AndersSales Representative
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwner
ANTONAntonio Moreno TaqueríaAntonio MorenoOwner
AROUTAround the HornThomas HardySales Representative
BERGSBerglunds snabbköpChristina BerglundOrder Administrator
BLAUSBlauer See DelikatessenHanna MoosSales Representative
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager
BOLIDBólido Comidas preparadasMartín SommerOwner
BONAPBon app'Laurence LebihanOwner
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager
BSBEVB's BeveragesVictoria AshworthSales Representative
Order IDCustomer IDShip Name
10643ALFKIAlfreds Futterkiste
10692ALFKIAlfred's Futterkiste
10702ALFKIAlfred's Futterkiste
10835ALFKIAlfred's Futterkiste
10952ALFKIAlfred's Futterkiste
11011ALFKIAlfred's Futterkiste

This sample is designed for a larger screen size.

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

The first container contains a master grid with customers. After a row is clicked in master grid, in the second container is shown grid with orders that are made by this customer.

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>

    <style>
        @media all and (max-width: 480px) {
            #mainGrid_container, #detailGrid_container {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    
    <div id="splitter">
        <div>
            <table id="mainGrid"></table>
        </div>
        <div>
            <table id="detailGrid"></table>
        </div>
    </div>
    <script src="/data-files/nw-customers-with-orders.js"></script>
    <script>

        $(function () {
            $("#splitter").igSplitter({ height: "700px", orientation: "horizontal", panels: [{ collapsible: false }, { size: 200, collapsed: true, collapsible: true}] });
            $("#mainGrid").igGrid({
                width: "100%",
                height: "100%",
                autoGenerateColumns: false,
                dataSource: nwCustomersWithOrders,
                columns: [{
                    headerText: "Customer ID",
                    key: "ID"
                }, {
                    headerText: "Company Name",
                    key: "CompanyName"
                }, {
                    headerText: "Contact Name",
                    key: "ContactName"
                }, {
                    headerText: "Contact Title",
                    key: "ContactTitle"
                }],
                dataRendered: function(evt, ui) {
                    $("#mainGrid").igGridSelection("selectRow", 0);
                    selectRowAndExpandSecondPane(0);
                },
                features: [{
                    name: "Selection",
                    mode: "row",
                    rowSelectionChanged: function (ui, args) {
                        selectRowAndExpandSecondPane(args.row.index);
                    }
                }]
            });

            function selectRowAndExpandSecondPane(rowIndex) {
                $("#detailGrid").igGrid({
                    width: "100%",
                    height: "100%",
                    autoGenerateColumns: false,
                    columns: [{
                        headerText: "Order ID",
                        key: "OrderID"
                    }, {
                        headerText: "Customer ID",
                        key: "CustomerID"
                    }, {
                        headerText: "Ship Name",
                        key: "ShipName"
                    }],
                    dataSource: nwCustomersWithOrders[rowIndex].Orders || []
                });
                $("#splitter").igSplitter("expandAt", 1);
            }
        });
    </script>
</body>
</html>