TechQA.

How to Export two ig grids in a single excel file with different sheets

944 views Asked by At

I am using Infragistics ig grids to display data in .Net and need to export these grids to excel file.

Infragistics also supports excel export but the problem is, it supports single grid at a time. I want to export these two grids in a single excel file with different sheets. I have searched a lot but can't find anything helpful on the internet.

Is there any way to do this task ?

Here is my Code

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/modules/infragistics.ui.treegrid.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>

    <!-- External files for exporting -->
    <script src="http://www.igniteui.com/js/external/FileSaver.js"></script>
    <script src="http://www.igniteui.com/js/external/Blob.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.documents.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.excel.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.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>
javascript excel infragistics ignite-ui iggrid
Original Q&A
1

There are 1 answers

0
Христо Анастасов On BEST ANSWER

Since exporting multiple grids at a time is not supported, you can handle the exportEnding event, where to call a function to export the second grid. It is important to pass the workbook object as argument to the function that will export the second grid:

$("#exportButton").on("click", function () {
$.ig.GridExcelExporter.exportGrid($("#grid"), {
    fileName: "igGrid"
},
{
    exportEnding: function(sender, args) {
        exportSecondGrid(args.workbook);
        return false;
    }
}
);});



function exportSecondGrid(workbook) {
$.ig.GridExcelExporter.exportGrid($("#grid1"), {
    fileName: "igGrid",
    worksheetName: "Sheet2"
},
{
        headerCellExporting: function(sender, args) {
            if (args.columnIndex === 0) {
                sender._workbook = workbook;
                sender._workbook.worksheets().add(sender._worksheet.name());
                sender._worksheet = sender._workbook.worksheets(1);
                sender._worksheet.rows(0).setCellValue(0, "some text");
            }
        },
}
);}

In the earliest time possible when exporting the second grid (this is the headerCellExporting event) we replace the workbook object with the one that we passed to the function. So this workbook has the first grid in the first worksheet, and the second grid is going to be written in the second sheet.

Related Questions in JAVASCRIPT

Related Questions in EXCEL

Related Questions in INFRAGISTICS

Related Questions in IGNITE-UI

Related Questions in IGGRID

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions