Available in the Full Version
Tree Grid - Excel Exporting

This sample demonstrates how to export the igTreeGrid to Excel as a flat data source and as a hierarchical data source.
Flat Data Source

Employee ID	First Name	Last Name	Reports To
0	Andrew	Fuller
4	Janet	Leverling	0
5	Laura	Callahan	0
6	Margaret	Peacock	0
7	Michael	Suyama	0
1	Jonathan	Smith
2	Nancy	Davolio
11	Peter	Lewis	2
12	Ryder	Zenaida	2
13	Wang	Mercedes	2
3	Steven	Buchanan
14	Theodore	Zia	3
15	Lacota	Mufutau	3
Hierarchical Data Source

ID	Tasks	Start	Finish	Duration	Progress
0	Project Plan	6/2/2014	8/22/2014	60d	32%
1	Planning	6/2/2014	6/4/2014	3d	100%
2	Write a specification	6/5/2014	6/6/2014	2d	100%
3	Create a demo application	6/9/2014	6/11/2014	3d	100%
4	Collect a feedback	6/12/2014	6/12/2014	1d	100%
5	Design	6/13/2014	6/19/2014	5d	60%
6	Development	6/20/2014	8/20/2014	44d	5%
7	Project Complete	8/21/2014	8/22/2014	2d	0%
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Code View

Show In JsFiddle
Copy to Clipboard
HTML
<!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" />

    <!--Required scripts-->
    <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>

    <!-- External files for exporting -->
    <script src="/js/external/FileSaver.js"></script>
    <script src="/js/external/Blob.js"></script>

    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_collections.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_text.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_io.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_ui.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.documents.core_core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_collectionsextended.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.excel_core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_threading.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_web.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.xml.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.documents.core_openxml.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.excel_serialization_openxml.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.gridexcelexporter.js"></script>

</head>
<body>
    <h3>Flat Data Source</h3>
    <table id="treegrid1"></table>
    <br />
    <input type="button" id="exportFlatDS" value="Export Flat Data" />
    <br />
    <br />
    <br />
    <h3>Hierarchical Data Source</h3>
    <table id="treegrid2"></table>
    <br />
    <input type="button" id="exportHierarchicalDS" value="Export Hierarchical Data" />

    <script>
        $(function () {
            var flatDS = [
                { "employeeID": 0, "PID": -1, "firstName": "Andrew", "lastName": "Fuller", "reportsTo": null },
                { "employeeID": 1, "PID": -1, "firstName": "Jonathan", "lastName": "Smith", "reportsTo": null },
                { "employeeID": 2, "PID": -1, "firstName": "Nancy", "lastName": "Davolio", "reportsTo": null },
                { "employeeID": 3, "PID": -1, "firstName": "Steven", "lastName": "Buchanan", "reportsTo": null },
                                // sub of ID 1
                { "employeeID": 4, "PID": 0, "firstName": "Janet", "lastName": "Leverling", "reportsTo": 0 },
                { "employeeID": 5, "PID": 0, "firstName": "Laura", "lastName": "Callahan", "reportsTo": 0 },
                { "employeeID": 6, "PID": 0, "firstName": "Margaret", "lastName": "Peacock", "reportsTo": 0 },
                { "employeeID": 7, "PID": 0, "firstName": "Michael", "lastName": "Suyama", "reportsTo": 0 },
                                // sub of ID 4
                { "employeeID": 8, "PID": 4, "firstName": "Anne", "lastName": "Dodsworth", "reportsTo": 4 },
                { "employeeID": 9, "PID": 4, "firstName": "Danielle", "lastName": "Davis", "reportsTo": 4 },
                { "employeeID": 10, "PID": 4, "firstName": "Robert", "lastName": "King", "reportsTo": 4 },
                                // sub of ID 2
                { "employeeID": 11, "PID": 2, "firstName": "Peter", "lastName": "Lewis", "reportsTo": 2 },
                { "employeeID": 12, "PID": 2, "firstName": "Ryder", "lastName": "Zenaida", "reportsTo": 2 },
                { "employeeID": 13, "PID": 2, "firstName": "Wang", "lastName": "Mercedes", "reportsTo": 2 },
                                // sub of ID 3
                { "employeeID": 14, "PID": 3, "firstName": "Theodore", "lastName": "Zia", "reportsTo": 3 },
                { "employeeID": 15, "PID": 3, "firstName": "Lacota", "lastName": "Mufutau", "reportsTo": 3 },
                                // sub of ID 16
                { "employeeID": 16, "PID": 15, "firstName": "Jin", "lastName": "Elliott", "reportsTo": 16 },
                { "employeeID": 17, "PID": 15, "firstName": "Armand", "lastName": "Ross", "reportsTo": 16 },
                { "employeeID": 18, "PID": 15, "firstName": "Dane", "lastName": "Rodriquez", "reportsTo": 16 },
                                // sub of ID 19
                { "employeeID": 19, "PID": 18, "firstName": "Declan", "lastName": "Lester", "reportsTo": 19 },
                { "employeeID": 20, "PID": 18, "firstName": "Bernard", "lastName": "Jarvis", "reportsTo": 19 },
                                // sub of ID 20
                { "employeeID": 21, "PID": 20, "firstName": "Jeremy", "lastName": "Donaldson", "reportsTo": 2 }
            ];

            var hierarchicalDS = [
                {
                    "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
                        { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
                        { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
                        { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
                        { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
                        {
                            "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
                                { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
                                { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
                                { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
                            ]
                        },
                        {
                            "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
                                { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
                                { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
                                { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
                                { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
                            ]
                        },
                        { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
                    ]
                }
            ];

            $("#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", width: "200px", dataType: "number" },
                    { headerText: "First Name", key: "firstName", width: "220px", dataType: "string" },
                    { headerText: "Last Name", key: "lastName", width: "220px", dataType: "string" },
                    { headerText: "Reports To", key: "reportsTo", width: "130px", dataType: "number" }
                ]
            });


            $("#treegrid2").igTreeGrid({
                width: "100%",
                dataSource: hierarchicalDS, //Project Plan data,
                autoGenerateColumns: false,
                primaryKey: "id",
                columns: [
                    { headerText: "ID", key: "id", width: "120px", dataType: "number" },
                    { headerText: "Tasks", key: "tasks", width: "250px", dataType: "string" },
                    { headerText: "Start", key: "start", width: "130px", dataType: "string" },
                    { headerText: "Finish", key: "finish", width: "130px", dataType: "string" },
                    { headerText: "Duration", key: "duration", width: "100px", dataType: "string" },
                    { headerText: "Progress", key: "progress", width: "130px", dataType: "string" }
                ],
                childDataKey: "products",
                initialExpandDepth: 1,
                renderExpansionIndicatorColumn: true
            });


            $("#exportFlatDS").on("click", function () {
                $.ig.GridExcelExporter.exportGrid($("#treegrid1"), {
                    fileName: "treegrid1"
                });
            });

            $("#exportHierarchicalDS").on("click", function () {
                $.ig.GridExcelExporter.exportGrid($("#treegrid2"), {
                    fileName: "treegrid2"
                });
            });
        });
    </script>
</body>
</html>
Ignite UI for jQuery | Samples

Search Results

Tree Grid - Excel Exporting

Flat Data Source

Hierarchical Data Source

Code View
