Available in the OSS Version

Splitter - Vertical Splitter

This sample demonstrates how to use the Splitter control to manage a page's vertical layout.

Select a destination from tree.

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 Tree control with continents and countries. The left vertical panel has maximum and minimum ranges that a user can resize the panel. When a node is clicked, the description for the selected item is in the right panel.

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>
        #tree {
            overflow: hidden;
        }
        @media all and (max-width: 480px) {
            #splitter {
                font-size: 16px;
            }
        }
    </style>

    <script src="/data-files/continents-with-countries-and-cities.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="splitter">
        <div style="overflow: auto">
            <ul id="tree"></ul>
        </div>
        <div><p>Select a destination from tree.</p></div>
    </div>
    <style>
        p { padding: 10px; }
    </style>
    
    <script>

        $(function () {
            $("#splitter").igSplitter({ height: "300px", panels: [{ size: 160, min: 100, max: 250 }] });
            $("#tree").igTree({
                dataSource: continentsWithCountries,
                dataSourceType: "json",
                bindings: {
                    textKey: "Text",
                    valueKey: "Text",
                    childDataProperty: "Countries"
                }
            });
            $("#tree").on("igtreeselectionchanged", function (sender, eventArgs) {
                var node = eventArgs.selectedNodes[0];
                if (node.data.Description) {
                    $("#splitter").igSplitter("secondPanel").html($("<p></p>").text(node.data.Description));
                } else {
                    $("#splitter").igSplitter("secondPanel").html($("<p></p>").text("No information found."));
                }
            });
        });

        
    </script>
</body>
</html>