0

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

1 回答 1

5

由于不支持一次导出多个网格，您可以处理 exportEnding 事件，在该事件中调用函数以导出第二个网格。将工作簿对象作为参数传递给将导出第二个网格的函数很重要：

$("#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");
            }
        },
}
);}

在导出第二个网格（这是 headerCellExporting 事件）的最早时间，我们将工作簿对象替换为我们传递给函数的对象。所以这个工作簿在第一个工作表中有第一个网格，第二个网格将写在第二个工作表中。

于 2017-01-04T12:24:35.410 回答