Available in the Full Version

Tree Grid - Paging

The sample demonstrates igTreeGrid contextRowMode option with two of the three possible modes.

Paging with contextRowMode: parent

Show
records
First NameLast NameTitle
DaneRodriquezTeam Leader
BernardJarvisSenior Software Developer
JeremyDonaldsonSoftware Developer
JasonClarkQA
MarkYoungQA


Paging with contextRowMode: breadcrumb

Show
records
First NameLast NameTitle
Steven > Lacota > Dane > Bernard
BernardJarvisSenior Software Developer
JeremyDonaldsonSoftware Developer
JasonClarkQA
MarkYoungQA

This sample is designed for a larger screen size.

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

The three possible modes for igTreeGrid contextRowMode option are "none," "parent," and "breadcrumb." These modes allow rendering of a context row below the grid headers that contains information about the parent(s) of the first row in the page. The top grid shows contextRowMode option set to "parent," which will render a representation of the immediate parent row. The bottom grid shows contextRowMode option set to "breadcrumb," which will render a breadcrumb trail representing the full path through all ancestors of the first row. By default the option is set to "none," in which case no context row is rendered.

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>
    <h3>Paging with contextRowMode: parent</h3>
    <table id="treegrid1"></table>
    <br />
    <br />
    <h3>Paging with contextRowMode: breadcrumb</h3>
    <table id="treegrid2"></table>

    <script>

        $(function () {
            var flatDS = [
                { "employeeID": 0, "PID": -1, "firstName": "Andrew", "lastName": "Fuller", "Title": "Vice President, Sales" },
                { "employeeID": 1, "PID": -1, "firstName": "Jonathan", "lastName": "Smith", "Title": "Human resources" },
                { "employeeID": 2, "PID": -1, "firstName": "Nancy", "lastName": "Davolio", "Title": "CFO" },
                { "employeeID": 3, "PID": -1, "firstName": "Steven", "lastName": "Buchanan", "Title": "CTO" },
                // sub of ID 1
                { "employeeID": 4, "PID": 0, "firstName": "Janet", "lastName": "Leverling", "Title": "Sales Manager" },
                { "employeeID": 5, "PID": 0, "firstName": "Laura", "lastName": "Callahan", "Title": "Inside Sales Coordinator" },
                { "employeeID": 6, "PID": 0, "firstName": "Margaret", "lastName": "Peacock", "Title": "Sales Representative" },
                { "employeeID": 7, "PID": 0, "firstName": "Michael", "lastName": "Suyama", "Title": "Sales Representative" },
                // sub of ID 4
                { "employeeID": 8, "PID": 4, "firstName": "Anne", "lastName": "Dodsworth", "Title": "Sales Representative" },
                { "employeeID": 9, "PID": 4, "firstName": "Danielle", "lastName": "Davis", "Title": "Sales Representative" },
                { "employeeID": 10, "PID": 4, "firstName": "Robert", "lastName": "King", "Title": "Sales Representative" },
                // sub of ID 2
                { "employeeID": 11, "PID": 2, "firstName": "Peter", "lastName": "Lewis", "Title": "Chief Accountant" },
                { "employeeID": 12, "PID": 2, "firstName": "Ryder", "lastName": "Zenaida", "Title": "Accountant" },
                { "employeeID": 13, "PID": 2, "firstName": "Wang", "lastName": "Mercedes", "Title": "Accountant" },
                // sub of ID 3
                { "employeeID": 14, "PID": 3, "firstName": "Theodore", "lastName": "Zia", "Title": "Software Architect" },
                { "employeeID": 15, "PID": 3, "firstName": "Lacota", "lastName": "Mufutau", "Title": "Product Manager" },
                // sub of ID 16
                { "employeeID": 16, "PID": 15, "firstName": "Jin", "lastName": "Elliott", "Title": "Product Owner" },
                { "employeeID": 17, "PID": 15, "firstName": "Armand", "lastName": "Ross", "Title": "Product Owner" },
                { "employeeID": 18, "PID": 15, "firstName": "Dane", "lastName": "Rodriquez", "Title": "Team Leader" },
                // sub of ID 19
                { "employeeID": 19, "PID": 18, "firstName": "Declan", "lastName": "Lester", "Title": "Senior Software Developer" },
                { "employeeID": 20, "PID": 18, "firstName": "Bernard", "lastName": "Jarvis", "Title": "Senior Software Developer" },
                { "employeeID": 21, "PID": 18, "firstName": "Jason", "lastName": "Clark", "Title": "QA" },
                { "employeeID": 22, "PID": 18, "firstName": "Mark", "lastName": "Young", "Title": "QA" },
                // sub of ID 20
                { "employeeID": 23, "PID": 20, "firstName": "Jeremy", "lastName": "Donaldson", "Title": "Software Developer" }
            ];


            $("#treegrid1").igTreeGrid({
                width: "100%",
                dataSource: flatDS, //bound to flat data source,
                autoGenerateColumns: false,
                primaryKey: "employeeID",
                foreignKey: "PID",
                initialExpandDepth: -1,
                columns: [
                    { headerText: "Employee ID", key: "employeeID", dataType: "number", hidden: true },
                    { headerText: "First Name", key: "firstName", dataType: "string" },
                    { headerText: "Last Name", key: "lastName", dataType: "string" },
                    { headerText: "Title", key: "Title", dataType: "string" }
                ],
                features: [
                    {
                        name: "Paging",
                        mode: "allLevels",
                        pageSize: 10,
                        currentPageIndex: 2,
                        contextRowMode: "parent"
                    }
                ]
            });

            $("#treegrid2").igTreeGrid({
                width: "100%",
                dataSource: flatDS, //bound to flat data source,
                autoGenerateColumns: false,
                primaryKey: "employeeID",
                foreignKey: "PID",
                initialExpandDepth: -1,
                columns: [
                    { headerText: "Employee ID", key: "employeeID", dataType: "number", hidden: true },
                    { headerText: "First Name", key: "firstName", dataType: "string" },
                    { headerText: "Last Name", key: "lastName", dataType: "string" },
                    { headerText: "Title", key: "Title", dataType: "string" }
                ],
                features: [
                    {
                        name: "Paging",
                        mode: "allLevels",
                        pageSize: 10,
                        currentPageIndex: 2,
                        contextRowMode: "breadcrumb",
                        breadcrumbKey: "firstName"
                    }
                ]
            });
        });

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