Export Multiple TreeLists to Excel

Environment

Product	TreeList for Telerik UI for ASP.NET Core
Product Version	Created with version 2024.4.1112

Description

How can I export multiple ASP.NET Core TreeList components to a single Excel document?

Solution

In this example, each TreeList is exported to a separate Excel sheet. For more information on the Excel generation, refer to the Excel export overview article.

1. Create an external button to export the TreeLists data when it is clicked.
2. Use the client-side saveAsExcel() method to trigger the data export of each TreeList.
3. Handle the ExcelExport event of the TreeLists and prevent its default action.
4. Create a new Workbook that contains the sheets with the TreeLists data and save it through the kendo.saveAs() method.

Razor

<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>

<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="export">Export TreeLists to Excel</button>

<h3>Designers</h3>
@(Html.Kendo().TreeList<Telerik.Examples.Mvc.Areas.TreeListExportingMultiple.Models.EmployeeDirectoryModel>()
    .Name("designers")
    .Events(e => e.ExcelExport("onExcelExportDesigners"))
    ... // Additional configuration.
)
<h3>Lead personnel</h3>
@(Html.Kendo().TreeList<Telerik.Examples.Mvc.Areas.TreeListExportingMultiple.Models.EmployeeDirectoryModel>()
    .Name("leads")
    .Events(e => e.ExcelExport("onExcelExportLead"))
    ... // Additional configuration.
)

Razor

@addTagHelper *, Kendo.Mvc

<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>

<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="export">Export TreeLists to Excel</button>

<h3>Designers</h3>
<kendo-treelist name="designers" on-excel-export="onExcelExportDesigners">
    <!-- Additional configuration.-->
</kendo-treelist>

<h3>Lead personnel</h3>
<kendo-treelist name="leads" on-excel-export="onExcelExportLead">
    <!-- Additional configuration.-->
</kendo-treelist>

JS

<script>
    function onExcelExportDesigners(e) {
        e.preventDefault();
        promises[0].resolve(e.workbook);
    }

    function onExcelExportLead(e) {
        e.preventDefault();
        promises[1].resolve(e.workbook);
    }

    // Used to sync the exports.
    var promises = [
        $.Deferred(),
        $.Deferred()
    ];

    $(document).ready(function(){
        $("#export").click(function (e) {
            // Trigger the export of the "designers" TreeList.
            $("#designers").data("kendoTreeList").saveAsExcel();
            // Trigger the export of the "leads" TreeList.
            $("#leads").data("kendoTreeList").saveAsExcel();
            // Wait for both exports to finish.
            $.when.apply(null, promises)
                .then(function (designersWorkbook, leadsWorkbook) {

                    // Create a new workbook using the sheets of the "designers" and "leads" workbooks.
                    var sheets = [
                        designersWorkbook.sheets[0],
                        leadsWorkbook.sheets[0]
                    ];

                    sheets[0].title = "Designers";
                    sheets[1].title = "Leads";

                    var workbook = new kendo.ooxml.Workbook({
                        sheets: sheets
                    });

                    promises = [
                        $.Deferred(),
                        $.Deferred()
                    ];

                    // Save the new workbook.
                    kendo.saveAs({
                        dataURI: workbook.toDataURL(),
                        fileName: "DesignersAndLeaders.xlsx"
                    });
                });
        });
    });
</script>

For a runnable example, refer to the ASP.NET MVC application on how to export the data of multiple TreeLists in a single Excel document. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

More ASP.NET Core TreeList Resources

• ASP.NET Core TreeList Documentation

• ASP.NET Core TreeList Demos

• ASP.NET Core TreeList Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Getting Started with Excel Export

• Server-Side API Reference of the TreeList for ASP.NET Core

• Server-Side TagHelper API Reference of the TreeList for ASP.NET Core

• Client-Side API Reference of the TreeList for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base