Implementing External Buttons for Export in Kendo UI

To improve UX and layout flexibility, many developers choose to use external controls rather than built‑in toolbar options. An example is using Kendo UI Export Outside Grid so that export buttons lie outside the grid component yet trigger export functions seamlessly in PDF or Excel format.

Why Choose External Export Buttons

Using external buttons for exporting offers more design freedom: you can place them anywhere on the page, style them independently, or integrate them into custom toolbars or panels. When you implement Kendo UI Export Outside Grid, you decouple the grid UI from export operations, which can make layout simpler and more maintainable.

How to Set Up External Export Controls

The process of implementing external export buttons generally includes these steps:

• Create buttons outside of the grid, e.g. <button id="btnExcel">Export to Excel</button> and <button id="btnPdf">Export to PDF</button>.


• Configure the Kendo Grid’s Excel and PDF export settings, including file names, paper size, margins, and optionally proxy URLs. :contentReference[oaicite:0]index=0


• Use client‑side API calls like .saveAsExcel() and .saveAsPDF() in the click handlers of your external buttons. :contentReference[oaicite:1]index=1


• Ensure dependencies like JSZip (for Excel) are included and proxy URL is provided if server side is needed. :contentReference[oaicite:2]index=2

Best Practices and Considerations

When using external button‑based export, here are some best practices:

• Respect grid state: filters, sorting, hidden or visible columns should reflect in the exported file.


• Handle large datasets properly—use proxy or server‑side export if client side starts lagging.


• Use descriptive file names so users know which data they exported.


• Provide user feedback (spinner, progress, or message) when export is happening to improve perception of responsiveness.

Sample Code Snippet

Here’s a minimal example illustrating how to trigger export from external buttons:

// HTML
<button id="btnExcelExport">Export to Excel</button>
<button id="btnPdfExport">Export to PDF</button>
<div id="grid"></div>

// JavaScript (jQuery + Kendo)
$("#btnExcelExport").click(function()
    $("#grid").getKendoGrid().saveAsExcel();
);
$("#btnPdfExport").click(function()
    $("#grid").getKendoGrid().saveAsPDF();
);

// Grid configuration
$("#grid").kendoGrid(
    dataSource:  /* data source settings */ ,
    excel: 
        fileName: "ExportedData.xlsx",
        allPages: true,
        proxyURL: "/Export/Save"
    ,
    pdf: 
        fileName: "ExportedData.pdf",
        allPages: true,
        paperSize: "A4",
        margin:  top: "1cm", bottom: "1cm", left: "1cm", right: "1cm" ,
        proxyURL: "/Export/Save"
    ,
    // other grid settings: columns, sortable, filterable, pageable...
);
    

Potential Pitfalls and How to Avoid Them

Implementing external export has its pitfalls you should watch out for:

• If proxy URLs are misconfigured, PDF/Excel export might fail or return empty files.


• Lack of the required JS libraries (e.g. JSZip for Excel) can break export functionality. :contentReference[oaicite:3]index=3


• Exporting very large datasets on the client side may cause performance bottlenecks or browser crashes.


• Hidden or reordered columns might still appear unless explicitly managed. Always test with edge cases. :contentReference[oaicite:4]index=4

Conclusion

External control over export behavior offers flexibility and design control without sacrificing functionality. By leveraging Kendo UI Export Outside Grid, you can keep your UI clean while giving users powerful export options. If you want a guided tutorial, check out this in‑depth course on export implementation outside the grid to master the setup, configurations, and best practices.