Available in the OSS Version

Splitter - Nested Splitter

This sample demonstrates how to manage layout with nested splitters.
NameCountryLatitudeLongitude
Los AngelesUnited States34.0522-118.2434
New YorkUnited States40.7561-73.987
ChicagoUnited States41.84-87.68
HoustonUnited States29.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 panel contains a Tree with continents, countries and cities. When you click on a node the map in the second splitter is centered according node's coordinates. If a country is selected, then a grid is displayed under the map with cities in that country. Panels are not resizable by default.

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>
    <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>