Available in the OSS Version

Splitter - Overview

The igSplitter is a widget based on jQuery UI that manages layout in two panels with a split bar

Name	Country	Latitude	Longitude

Los Angeles	United States	34.0522	-118.2434
New York	United States	40.7561	-73.987
Chicago	United States	41.84	-87.68
Houston	United States	29.77	-95.39

This sample is designed for a larger screen size.

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

The widget provides rich interactions to end users including the abilities to expand/collapse panels and resize panels via the split bar.

Code View

Show In JsFiddle

Copy to Clipboard

<div id="splitter">
    <div>
        <ul id="tree"></ul>
    </div>
    <div id="detailSplitter">
        <div>
            <div id="map"></div>
        </div>
        <div>
            <table id="grid"></table>
        </div>
    </div>
</div>

#map {
    overflow: hidden;
}

<!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>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
    <style>
        #map {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="splitter">
        <div>
            <ul id="tree"></ul>
        </div>
        <div id="detailSplitter">
            <div>
                <div id="map"></div>
            </div>
            <div>
                <table id="grid"></table>
            </div>
        </div>
    </div>
    <script src="/data-files/continents-with-countries-and-cities.js" type="text/javascript"></script>
    <script>

        $(function () {
            $("#splitter").igSplitter({
                height: 700,
                expanded: function (evt, ui) {
                    $("#grid_headers").css("width", "100%");
                    $("#grid").css("width", "100%");
                },
                panels: [
                    { size: 200, min: 100, max: 250 },
                    { collapsible: true }
                ]
            });
            $("#detailSplitter").igSplitter({
                orientation: "horizontal",
                panels: [
                    { size: 500, collapsible: true },
                    { size: 200, collapsible: true }
                ]
            });
            $("#tree").igTree({
                dataSource: continentsWithCountriesAndCitiesCoordinates,
                dataSourceType: "json",
                bindings: {
                    textKey: "Text",
                    valueKey: "Text",
                    childDataProperty: "Countries"
                },
                rendered: onTreeRendered,
                selectionChanged: onTreeSelectionChanged
            });

            function onTreeRendered(evt, ui) {
                var unitedStatesNodeElement = ui.owner.nodeByPath("0_0");
                var unitedStatesNode = ui.owner.nodeFromElement(unitedStatesNodeElement);

                initMap();
                initCitiesGrid(unitedStatesNode.data.Cities);

                ui.owner.expandToNode(unitedStatesNodeElement);
                ui.owner.select(unitedStatesNodeElement);
            }

            function onTreeSelectionChanged (sender, eventArgs) {
                var node = eventArgs.selectedNodes[0];
                zoomMapTo(node.data.Latitude, node.data.Longitude, 23);

                $("#grid").igGrid("dataSourceObject", node.data.Cities);
                $("#grid").igGrid("dataBind");

                $("#detailSplitter").igSplitter("expandAt", 1);
            }
        
            function initMap() {
                var map = $("#map").igMap({
                    width: "100%",
                    height: "100%",
                    crosshairVisibility: "visible",
                    overviewPlusDetailPaneVisibility: "visible",
                    overviewPlusDetailPaneBackgroundImageUri: "/images/samples/splitter/world.png",
                    panModifier: "control",
                    backgroundContent: {
                        type: "openStreet"
                    },
                    windowResponse: "immediate",
                    windowRect: {
                        left: 0.27,
                        top: 0.20,
                        height: 0.45,
                        width: 0.45
                    }
                });
                $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
                return map;
            }

            function initCitiesGrid(dataSource) {
                var grid = $("#grid").igGrid({
                    width: "100%",
                    height: "99%",
                    dataSource: dataSource,
                    defaultColumnWidth: "25%",
                    features: [{
                        name: "Selection",
                        mode: "row",
                        rowSelectionChanged: function (ui, args) {
                            var selectedCity = $("#grid").data("igGrid").dataSource.dataView()[args.row.index];
                            zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
                        }
                    }]
                });

                return grid;
            }

            function zoomMapTo(latitude, longitude, radius) {
                var geographic = geographichFromCentered({
                    latitude: latitude,
                    longitude: longitude,
                    radius: radius
                });

                var zoom = $("#map").igMap("zoomToGeographic", geographic);
            }

            //  Calculates the geographich coordinates of a square around a central point and radius
            function geographichFromCentered(centered) {
                var geographic = {
                    left: centered.longitude - centered.radius,
                    top: centered.latitude - centered.radius,
                    width: centered.radius * 2,
                    height: centered.radius * 2
                };

                return geographic;
            }
        });        
    </script>
</body>
</html>

                    var continentsWithCountries = [{
    Text: "North America",
    Description: "North America is a continent wholly within the Northern Hemisphere and almost wholly within the Western Hemisphere. It is also considered a northern subcontinent of the Americas. It is bordered to the north by the Arctic Ocean, to the east by the Atlantic Ocean, to the west and south by the Pacific Ocean, and to the southeast by South America and the Caribbean Sea.",
    Countries: [{
        Text: "United States",
        Description: "The United States of America (USA), commonly called the United States (US or U.S.) and America, is a federal constitutional republic consisting of fifty states and a federal district. The country is situated mostly in central North America, where its forty-eight contiguous states and Washington, D.C., the capital district, lie between the Pacific and Atlantic Oceans, bordered by Canada to the north and Mexico to the south."
    }, {
        Text: "Canada",
        Description: "Canada is a North American country consisting of ten provinces and three territories. Located in the northern part of the continent, it extends from the Atlantic to the Pacific and northward into the Arctic Ocean. Canada is the world's second-largest country by total area, and its common border with the United States is the world's longest land border."
    }, {
        Text: "Mexico",
        Description: "Mexico , officially the United Mexican States, is a federal constitutional republic in North America. It is bordered on the north by the United States of America; on the south and west by the Pacific Ocean; on the southeast by Guatemala, Belize, and the Caribbean Sea; and on the east by the Gulf of Mexico."
    }]
}, {
    Text: "South America",
    Description: "South America is a continent located in the Western Hemisphere, mostly in the Southern Hemisphere, with a relatively small portion in the Northern Hemisphere.",
    Countries: [{
        Text: "Brazil",
        Description: "Brazil , officially the Federative Republic of Brazil, is the largest country in South America and in the Latin America region. It is the world's fifth largest country, both by geographical area and by population with over 193 million people. It is the largest Lusophone country in the world, and the only one in the Americas."
    }, {
        Text: "Uruguay",
        Description: "Uruguay , officially the Oriental Republic of Uruguay and sometimes called the Eastern Republic of Uruguay, is a country in the southeastern part of South America."
    }]
}, {
    Text: "Europe",
    Description: "Europe is, by convention, one of the world's seven continents. Comprising the westernmost peninsula of Eurasia, Europe is generally divided from Asia by the watershed divides of the Ural and Caucasus Mountains, the Ural River, the Caspian and Black Seas, and the waterways connecting the Black and Aegean Seas. Europe is bordered by the Arctic Ocean to the north, the Atlantic Ocean to the west, the Mediterranean Sea to the south, and the Black Sea and connected waterways to the southeast. Yet the borders of Europe-a concept dating back to classical antiquity-are somewhat arbitrary, as the primarily physiographic term continent can incorporate cultural and political elements.",
    Countries: [{
        Text: "United Kingdom",
        Description: "The United Kingdom of Great Britain and Northern Ireland, commonly known as the United Kingdom (UK) and Britain, is a sovereign state located off the north-western coast of continental Europe. The country includes the island of Great Britain, the north-eastern part of the island of Ireland, and many smaller islands. Northern Ireland is the only part of the UK that shares a land border with another state - the Republic of Ireland."
    }, {
        Text: "Germany",
        Description: "Germany, officially the Federal Republic of Germany , is a federal parliamentary republic in west-central Europe. The country consists of 16 states, and its capital and largest city is Berlin."
    }, {
        Text: "Bulgaria",
        Description: "Bulgaria, officially the Republic of Bulgaria, is a country located in Southeastern Europe. It is bordered by Romania to the north, Serbia and Macedonia to the west, Greece and Turkey to the south and the Black Sea to the east."
    }]
}, {
    Text: "Asia",
    Description: "Asia is the world's largest and most populous continent, located primarily in the eastern and northern hemispheres. It covers 8.7% of the Earth's total surface area and comprises 30% of its land area. With approximately 4.3 billion people, it hosts 60% of the world's current human population. Asia has a high growth rate in the modern era. For instance, during the 20th century, Asia's population nearly quadrupled.",
    Countries: [{
        Text: "Japan",
        Description: "Japan is an island nation in East Asia. Located in the Pacific Ocean, it lies to the east of the Sea of Japan, China, North Korea, South Korea and Russia, stretching from the Sea of Okhotsk in the north to the East China Sea and Taiwan in the south. The characters that make up Japan's name mean 'sun-origin', which is why Japan is sometimes referred to as the 'Land of the Rising Sun'."
    }, {
        Text: "China",
        Description: "China, officially the People's Republic of China (PRC), is a sovereign state located in East Asia. It is the world's most populous country, with a population of over 1.35 billion. The PRC is a single-party state governed by the Communist Party, with its seat of government in the capital city of Beijing.[14] It exercises jurisdiction over 22 provinces, five autonomous regions, four direct-controlled municipalities (Beijing, Tianjin, Shanghai, and Chongqing), and two mostly self-governing special administrative regions (Hong Kong and Macau). The PRC also claims Taiwan - which is controlled by the Republic of China (ROC), a separate political entity - as its 23rd province, a claim controversial due to the complex political status of Taiwan and the unresolved Chinese Civil War."
    }]
}];

var continentsWithCountriesAndCitiesCoordinates = [{
    Text: "North America",
    Latitude: 46.0730555556,
    Longitude: -100.546666667,
    Countries: [{
        Text: "United States",
        Latitude: 38,
        Longitude: -97,
        Cities: [{
            Name: "Los Angeles",
            Country: "United States",
            Latitude: 34.0522,
            Longitude: -118.2434
        }, {
            Name: "New York",
            Country: "United States",
            Latitude: 40.7561,
            Longitude: -73.9870
        }, {
            Name: "Chicago",
            Country: "United States",
            Latitude: 41.840,
            Longitude: -87.680
        }, {
            Name: "Houston",
            Country: "United States",
            Latitude: 29.770,
            Longitude: -95.390
        }]
    }, {
        Text: "Canada",
        Latitude: 60,
        Longitude: -95,
        Cities: [{
            Name: "Toronto",
            Country: "Canada",
            Latitude: 43.650,
            Longitude: -79.380
        }, {
            Name: "Montreal",
            Country: "Canada",
            Latitude: 45.520,
            Longitude: -73.570
        }, {
            Name: "Vancouver",
            Country: "Canada",
            Latitude: 49.280,
            Longitude: -123.130
        }, {
            Name: "Calgary",
            Country: "Canada",
            Latitude: 51.050,
            Longitude: -114.060
        }]
    }, {
        Text: "Mexico",
        Latitude: 23,
        Longitude: -102,
        Cities: [{
            Name: "Mexico City",
            Country: "Mexico",
            Latitude: 19.4270,
            Longitude: -99.1276
        }, {
            Name: "Ecatepec",
            Country: "Mexico",
            Latitude: 19.600,
            Longitude: -99.050
        }, {
            Name: "Guadalajara",
            Country: "Mexico",
            Latitude: 20.670,
            Longitude: -103.350
        }, {
            Name: "Puebla",
            Country: "Mexico",
            Latitude: 19.050,
            Longitude: -98.220
        }]
    }]
}, {
    Text: "South America",
    Latitude: -14.6047222222,
    Longitude: -57.6561111111,
    Countries: [{
        Text: "Brazil",
        Latitude: -10,
        Longitude: -55,
        Cities: [{
            Name: "Sao Paulo",
            Country: "Brasil",
            Latitude: -23.5489,
            Longitude: -46.6388
        }, {
            Name: "Rio de janeiro",
            Country: "Brasil",
            Latitude: -22.910,
            Longitude: -43.200
        }, {
            Name: "Salvador",
            Country: "Brasil",
            Latitude: -12.970,
            Longitude: -38.500
        }]
    }, {
        Text: "Uruguay",
        Latitude: -33,
        Longitude: -56,
        Cities: [{
            Name: "Montevideo",
            Country: "Uruguay",
            Latitude: -34.870,
            Longitude: -56.170
        }, {
            Name: "Salto",
            Country: "Uruguay",
            Latitude: -31.400,
            Longitude: -57.960
        }, {
            Name: "Ciudad de la costa",
            Country: "Uruguay",
            Latitude: -34.820,
            Longitude: -55.950
        }]
    }]
}, {
    Text: "Europe",
    Latitude: 48.6908333333,
    Longitude: 9.14055555556,
    Countries: [{
        Text: "England",
        Latitude: 54,
        Longitude: -2,
        Cities: [{
            Name: "London",
            Country: "England",
            Latitude: 51.50,
            Longitude: 0.12
        }, {
            Name: "Glasgow",
            Country: "England",
            Latitude: 55.870,
            Longitude: -4.270
        }, {
            Name: "Birmingham",
            Country: "England",
            Latitude: 52.480,
            Longitude: -1.910
        }]
    }, {
        Text: "Germany",
        Latitude: 51,
        Longitude: 9,
        Cities: [{
            Name: "Berlin",
            Country: "Germany",
            Latitude: 52.50,
            Longitude: 13.33
        }, {
            Name: "Hamburg",
            Country: "Germany",
            Latitude: 53.550,
            Longitude: 10.000
        }, {
            Name: "Munchen",
            Country: "Germany",
            Latitude: 48.140,
            Longitude: 11.580
        }]
    }, {
        Text: "Bulgaria",
        Latitude: 43,
        Longitude: 25,
        Cities: [{
            Name: "Sofia",
            Country: "Bulgaria",
            Latitude: 42.697845,
            Longitude: 23.321925
        }, {
            Name: "Plovdiv",
            Country: "Bulgaria",
            Latitude: 42.150,
            Longitude: 24.750
        }, {
            Name: "Burgas",
            Country: "Bulgaria",
            Latitude: 42.510,
            Longitude: 27.470
        }]
    }]
}, {
    Text: "Asia",
    Latitude: 29.8405555556,
    Longitude: 89.2966666667,
    Countries: [{
        Text: "Japan",
        Latitude: 36,
        Longitude: 138,
        Cities: [{
            Name: "Tokyo",
            Country: "Japan",
            Latitude: 35.685,
            Longitude: 139.7513889
        }, {
            Name: "Yokohama",
            Country: "Japan",
            Latitude: 35.45,
            Longitude: 139.65
        }, {
            Name: "Osaka",
            Country: "Japan",
            Latitude: 34.6666667,
            Longitude: 135.5
        }]
    }, {
        Text: "China",
        Latitude: 35,
        Longitude: 105,
        Cities: [{
            Name: "Beijing",
            Country: "China",
            Latitude: 39.92889,
            Longitude: 116.38833
        }, {
            Name: "Shanghai",
            Country: "China",
            Latitude: 31.005,
            Longitude: 121.4086111
        }]
    }]
}];

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'nested-splitters.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

import { Component, NgModule } from '@angular/core';
import { IgMapComponent, IgSplitterComponent, IgGridComponent, IgTreeComponent } from 'igniteui-angular-wrappers';
import { Countries } from "./../data/countries-and-cities";
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;
declare var northwindProducts: any[];

@Component({
    selector: 'my-app',
    template: `
        <ig-splitter widgetId="splitter" [(options)]="splitterOptions" (expanded)="expanded($event)">
            <div>
                <ig-tree widgetId="tree" [(options)]="treeOptions"
                         (rendered)="treeRendered($event)"
                         (selectionChanged)="treeSelectionChanged($event)">
                </ig-tree>
            </div>
            <ig-splitter widgetId="detailSplitter" [(options)]="detailSplitterOptions">
                <div>
                    <ig-map widgetId="map" [(options)]="mapOptions"></ig-map>
                </div>
                <div>
                    <ig-grid widgetId="grid" [(options)]="gridOptions"></ig-grid>
                </div>
            </ig-splitter>
        </ig-splitter>
    `
})
export class AppComponent {
    private treeRendered: any;
    private treeSelectionChanged: any;
	private rowSelectionChanged: any;
    private expanded: any;

	private continentsWithCountriesAndCitiesCoordinates: any;

	private splitterOptions: IgSplitter;
	private mapOptions: IgMap;
	private gridOptions: IgGrid;
	private treeOptions: IgTree;
	private detailSplitterOptions: IgSplitter;

    @ViewChild("grid") grid: IgGridComponent;
    @ViewChild("map") map: IgMapComponent;
    @ViewChild("tree") tree: IgTreeComponent;
    @ViewChild("splitter") splitter: IgSplitterComponent;
    @ViewChild("detailSplitter") detailSplitter: IgSplitterComponent;

    private northwindProductsEN: any[] = [
        { "ProductID": 1, "ProductName": "Chai" }, { "ProductID": 2, "ProductName": "Chang" }, { "ProductID": 3, "ProductName": "Aniseed Syrup"}, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning" },
        { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix" }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread" }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears" },
        { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce" }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku" }, { "ProductID": 10, "ProductName": "Ikura" }, { "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products" },
        { "ProductID": 12, "ProductName": "Queso Manchego La Pastora" }, { "ProductID": 13, "ProductName": "Konbu" }, { "ProductID": 14, "ProductName": "Tofu" }, { "ProductID": 15, "ProductName": "Genen Shouyu" },
        { "ProductID": 16, "ProductName": "Pavlova" }, { "ProductID": 17, "ProductName": "Alice Mutton" }, { "ProductID": 18, "ProductName": "Carnarvon Tigers" }, { "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits" },
        { "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade" }, { "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones" }, { "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd" }, { "ProductID": 23, "ProductName": "Tunnbröd" },
        { "ProductID": 24, "ProductName": "Guaraná Fantástica" }, { "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme" }, { "ProductID": 26, "ProductName": "Gumbär Gummibärchen" }, { "ProductID": 27, "ProductName": "Schoggi Schokolade" },
        { "ProductID": 28, "ProductName": "Rössle Sauerkraut" }, { "ProductID": 29, "ProductName": "Thüringer Rostbratwurst" }, { "ProductID": 30, "ProductName": "Nord-Ost Matjeshering" }
    ];

	constructor() {
		this.continentsWithCountriesAndCitiesCoordinates  = Countries.getContinentsWithCountriesAndCitiesCoordinates();

        this.treeRendered = function(evt) {
                let unitedStatesNodeElement = evt.ui.owner.nodeByPath("0_0");
                let unitedStatesNode = evt.ui.owner.nodeFromElement(unitedStatesNodeElement);

                this.initMap();
                this.initCitiesGrid(unitedStatesNode.data.Cities);

                evt.ui.owner.expandToNode(unitedStatesNodeElement);
                evt.ui.owner.select(unitedStatesNodeElement);
        }

        this.treeSelectionChanged = function (evt) {
                var node = evt.ui.selectedNodes[0];
                this.zoomMapTo(node.data.Latitude, node.data.Longitude, 23);

                this.grid.igGrid.dataSourceObject(node.data.Cities);
                this.grid.dataBind();

                this.detailSplitter.expandAt(1);
        }

        this.expanded = function (evt) {
            $("#grid_headers").css("width", "100%");
            this.grid.widget().css("width", "100%");
        }

        this.splitterOptions = {
                height: 700,
                panels: [
                    { size: 200, min: 100, max: 250 },
                    { collapsible: true }
                ]
        };

        this.detailSplitterOptions = {
                orientation: "horizontal",
                panels: [
                    { size: 500, collapsible: true },
                    { size: 200, collapsible: true }
                ]
        };

        this.gridOptions = {
            width: "100%",
            height: "99%",
            dataSource: this.northwindProductsEN,
            defaultColumnWidth: "25%",
            features: [{
                name: "Selection",
                mode: "row",
                rowSelectionChanged: function (ui, args) {
                    let selectedCity = this.grid.dataSource.dataView()[args.row.index];
                    this.zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
                }
            }]
        };

        this.mapOptions = {
            width: "100%",
            height: "100%",
            crosshairVisibility: "visible",
            overviewPlusDetailPaneVisibility: "visible",
            overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
            panModifier: "control",
            backgroundContent: {
                type: "openStreet"
            },
            windowResponse: "immediate",
            windowRect: {
                left: 0.27,
                top: 0.20,
                height: 0.45,
                width: 0.45
            }
        }

        this.treeOptions = {
            dataSource: this.continentsWithCountriesAndCitiesCoordinates,
            dataSourceType: "json",
            bindings: {
                textKey: "Text",
                valueKey: "Text",
                childDataProperty: "Countries"
            }
        };
	}

    initMap() {
        let map = $("#map").igMap({
            width: "100%",
            height: "100%",
            crosshairVisibility: "visible",
            overviewPlusDetailPaneVisibility: "visible",
            overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
            panModifier: "control",
            backgroundContent: {
                type: "openStreet"
            },
            windowResponse: "immediate",
            windowRect: {
                left: 0.27,
                top: 0.20,
                height: 0.45,
                width: 0.45
            }
        });
        $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
        return map;
    }

    initCitiesGrid(dataSource) {
        let grid = $("#grid").igGrid({
            width: "100%",
            height: "99%",
            dataSource: dataSource,
            defaultColumnWidth: "25%",
            features: [{
                name: "Selection",
                mode: "row",
                rowSelectionChanged: function (ui, args) {
                    let selectedCity =this.grid.dataSource.dataView()[args.row.index];
                    this.zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
                }
            }]
        });

        return grid;
    }

    zoomMapTo(latitude, longitude, radius) {
        let geographic = this.geographichFromCentered({
            latitude: latitude,
            longitude: longitude,
            radius: radius
        });

        let zoom = this.map.zoomToGeographic(geographic);
    }

    //  Calculates the geographich coordinates of a square around a central point and radius
    geographichFromCentered(centered) {
        let geographic = {
            left: centered.longitude - centered.radius,
            top: centered.latitude - centered.radius,
            width: centered.radius * 2,
            height: centered.radius * 2
        };

        return geographic;
    }
}


@NgModule({
    bootstraps: [AppComponent],
    declarations: [AppComponent, IgGridComponent, IgMapComponent, IgSplitterComponent, IgTreeComponent],
    imports: [BrowserModule]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script src="/js-data/continents-with-countries-and-cities.js"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
    <div id="app">
        <script type="text/babel">
            var App = React.createClass({
                render: function() {
                    let northwindProductsEN = [
                        { "ProductID": 1, "ProductName": "Chai" }, { "ProductID": 2, "ProductName": "Chang" }, { "ProductID": 3, "ProductName": "Aniseed Syrup"}, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning" },
                        { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix" }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread" }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears" },
                        { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce" }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku" }, { "ProductID": 10, "ProductName": "Ikura" }, { "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products" },
                        { "ProductID": 12, "ProductName": "Queso Manchego La Pastora" }, { "ProductID": 13, "ProductName": "Konbu" }, { "ProductID": 14, "ProductName": "Tofu" }, { "ProductID": 15, "ProductName": "Genen Shouyu" },
                        { "ProductID": 16, "ProductName": "Pavlova" }, { "ProductID": 17, "ProductName": "Alice Mutton" }, { "ProductID": 18, "ProductName": "Carnarvon Tigers" }, { "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits" },
                        { "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade" }, { "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones" }, { "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd" }, { "ProductID": 23, "ProductName": "Tunnbröd" },
                        { "ProductID": 24, "ProductName": "Guaraná Fantástica" }, { "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme" }, { "ProductID": 26, "ProductName": "Gumbär Gummibärchen" }, { "ProductID": 27, "ProductName": "Schoggi Schokolade" },
                        { "ProductID": 28, "ProductName": "Rössle Sauerkraut" }, { "ProductID": 29, "ProductName": "Thüringer Rostbratwurst" }, { "ProductID": 30, "ProductName": "Nord-Ost Matjeshering" }
                    ];
                    
                    rowSelectionChanged: function (event, ui) {
                        var selectedCity = $("#grid").data("igGrid").dataSource.dataView()[args.row.index];
                        this.zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
                    });

                    expanded: function() {
                        $("#grid_headers").css("width", "100%");
                        $("#grid").css("width", "100%");
                    }

                    treeRendered: function(evt, ui) {
                        let unitedStatesNodeElement = ui.owner.nodeByPath("0_0");
                        let unitedStatesNode = ui.owner.nodeFromElement(unitedStatesNodeElement);

                        this.initMap();
                        this.initCitiesGrid(unitedStatesNode.data.Cities);

                        ui.owner.expandToNode(unitedStatesNodeElement);
                        ui.owner.select(unitedStatesNodeElement);
                    }

                    treeSelectionChanged: function (evt, ui) {
                        let node = ui.selectedNodes[0];
                        this.zoomMapTo(node.data.Latitude, node.data.Longitude, 23);

                        $("#grid").igGrid("dataSourceObject", node.data.Cities);
                        $("#grid").igGrid("dataBind");

                        $("#detailSplitter").igSplitter("expandAt", 1);
                    }

                    initMap(): function() {
                        let map = $("#map").igMap({
                            width: "100%",
                            height: "100%",
                            crosshairVisibility: "visible",
                            overviewPlusDetailPaneVisibility: "visible",
                            overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
                            panModifier: "control",
                            backgroundContent: {
                                type: "openStreet"
                            },
                            windowResponse: "immediate",
                            windowRect: {
                                left: 0.27,
                                top: 0.20,
                                height: 0.45,
                                width: 0.45
                            }
                        });
                        $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
                        return map;
                    }

                    initCitiesGrid: function (dataSource) {
                        let grid = $("#grid").igGrid({
                            width: "100%",
                            height: "99%",
                            dataSource: dataSource,
                            defaultColumnWidth: "25%",
                            features: [{
                                name: "Selection",
                                mode: "row"
                            }]
                        });

                        return grid;
                    }

                    zoomMapTo: function (latitude, longitude, radius) {
                        let geographic = this.geographichFromCentered({
                            latitude: latitude,
                            longitude: longitude,
                            radius: radius
                        });

                        let zoom = this.map.zoomToGeographic(geographic);
                    }

                    //  Calculates the geographich coordinates of a square around a central point and radius
                    geographichFromCentered(centered) {
                        let geographic = {
                            left: centered.longitude - centered.radius,
                            top: centered.latitude - centered.radius,
                            width: centered.radius * 2,
                            height: centered.radius * 2
                        };

                        return geographic;
                    }

                    let splitterOptions = {
                        height: 700,
                        expanded: this.expanded,
                        panels: [
                            { size: 200, min: 100, max: 250 },
                            { collapsible: true }
                        ]
                    }

                    let detailSplitterOptions = {
                        orientation: "horizontal",
                        panels: [
                            { size: 500, collapsible: true },
                            { size: 200, collapsible: true }
                        ]
                    }

                    let gridOptions = {
                        width: "100%",
                        height: "99%",
                        dataSource: this.northwindProductsEN,
                        defaultColumnWidth: "25%",
                        features: [{
                            name: "Selection",
                            mode: "row",
                            rowSelectionChanged: this.rowSelectionChanged
                        }]
                    }

                    let mapOptions = {
                        width: "100%",
                        height: "100%",
                        crosshairVisibility: "visible",
                        overviewPlusDetailPaneVisibility: "visible",
                        overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
                        panModifier: "control",
                        backgroundContent: {
                            type: "openStreet"
                        },
                        windowResponse: "immediate",
                        windowRect: {
                            left: 0.27,
                            top: 0.20,
                            height: 0.45,
                            width: 0.45
                        }
                    }

                    let treeOptions = {
                        dataSource: this.continentsWithCountriesAndCitiesCoordinates,
                        dataSourceType: "json",
                        rendered: this.treeRendered,
                        selectionChanged: this.treeSelectionChanged,
                        bindings: {
                            textKey: "Text",
                            valueKey: "Text",
                            childDataProperty: "Countries"
                        }
                    }

                    return (
                        <IgUpload id="igUpload1" mode="single"
                                  autostartupload={true}
                                  progressUrl="/IGUploadStatusHandler.ashx"
                                  controlId="serverID1"
                                  onError={function (e, args) {showAlert(args);}}></IgUpload>
                        }


                        <IgSplitter id="splitter" options={splitterOptions}>
                            <div><IgTree id="tree" options="{treeOptions}" /></div>
                            <IgSplitter id="detailSplitter" options={detailSplitterOptions} >
                                <div><IgMap id="map" options={mapOptions} /></div>
                                <div><IgGrid id="grid" options={gridOptions} /></div>
                            </IgSplitter>
                        </IgSplitter>
                    );
                }
            });

            ReactDOM.render(
                <App />,
                document.getElementById("app")
            );
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Splitter - Overview

Code View