Kendo Grid Multi PDF Exports, Hidden Field and Formatting

[Brent]

(See attachment)

I have a grid that needs:

1. Two PDF export buttons and 1 Excel export button.

2. Include the hidden or not visible columns.

3. Change the PDF export look. The export looks like a screen shot of the grid and won't fly with the users.

 

TIA

Brent

[Brent]

Scratch #3, the format is good now.

To add clarity to Question #1, I need two PDF export buttons. One that will export ALL rows in the grid and one that will only export out the "current grid" rows.

 

Question #2, I have some hidden and not visible columns that they want on the PDF. 

[Stefan]

Hello Brent,

Regarding the questions:

1) This can be achieved using the toolbar template of the Grid, and to add the desired buttons, which will manually call the API method to save the Grid as PDF and Excell:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-toolbar.template

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveAsPDF

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveAsExcel

Please have in mind that exporting a specific row is not supported by the Grid export features. It can only be achieved by exporting the specific DOM element, but this will require additional custom logic. Notice in the example, how a content of a specific DOM element is exported:

http://demos.telerik.com/kendo-ui/pdf-export/index 

2) Please check the following forum thread demonstrating this. Please have in mind that the approach for the PDF and Excel export is the same, just the events are different:

http://www.telerik.com/forums/export-to-grid-hide-columns

3) I`m glad to hear the styles are as desired.

Regards,
Stefan
Telerik by Progress

[Brent]

Thanks Stefan. 

Concerning Question #2 (how to Export an Excel or PDF, but the columns are hidden on the Grid)

I was able to accomplish this for the Excel Export by hiding the columns (on the top of the view)

<script>
    function onGridDataBound(e) {
        e.sender.hideColumn(2);
        e.sender.hideColumn(3);
        e.sender.hideColumn(4);
        e.sender.hideColumn(7);
    }
</script>

 

After the grid renders, I was able to bind to the excelExport and the add the columns back into the grid for the export:

<script>
    var exportFlag = false;
    $("#grdProviderSearchReport").data("kendoGrid").bind("excelExport", function (e) {
        if (!exportFlag) {
            e.sender.showColumn(2);
            e.sender.showColumn(3);
            e.sender.showColumn(4);
            e.sender.showColumn(7);
            e.preventDefault();
            exportFlag = true;
            setTimeout(function () {
                e.sender.saveAsExcel();
            });
        } else {
            e.sender.hideColumn(2);
            e.sender.hideColumn(3);
            e.sender.hideColumn(4);
            e.sender.hideColumn(7);
            exportFlag = false;
        }
    });

    var exportFlag2 = false;
    $("#grdProviderSearchReport").data("kendoGrid").bind("pdfExport", function (e) {
        if (!exportFlag2) {
            alert("!ExportFlag2");
            e.sender.showColumn(2);
            e.sender.showColumn(3);
            e.sender.showColumn(4);
            e.sender.showColumn(7);
            e.preventDefault();
            exportFlag2 = true;
            setTimeout(function () {
                e.sender.saveAsPDF();
            });
        } else {
            alert("ExportFlag2");
            e.sender.hideColumn(2);
            e.sender.hideColumn(3);
            e.sender.hideColumn(4);
            e.sender.hideColumn(7);
            exportFlag2 = false;
        }
    });


</script>

 

...but the exportPDF doesn't work. :(

 

Ideas why?

 

[Brent]

Concerning the Question #1, 
I have 3 buttons:
- "Print this page" (exports just the page they are on to PDF)
- "Export all records to PDF" (exports all the grid data to PDF)
- "Export all records to Excel" (exports all the grid data to an Excel File)

 

@(Html.Kendo().Grid<ProviderResults>()
                            .Name("grdProviderSearchReport")
                            .Columns(c =>
                            {
                                   //(column info removed)
                              })
                            .Groupable()
                            .Reorderable(reorder => reorder.Columns(true))
                            .Filterable()
                            .ToolBar(tools =>
                            {
                                tools.Pdf().Text("Print this page");
                                tools.Pdf().Text("Export all records to PDF");
                                tools.Excel().Text("Export all records to Excel");
                            }
                            )
                            .Pdf(pdf => pdf
                                .AllPages()
                                .AvoidLinks()
                                .PaperSize("A4")
                                .Scale(0.8)
                                .Margin("2cm", "1cm", "1cm", "1cm")
                                .Landscape()
                                .RepeatHeaders()
                                .TemplateId("page-template")
                                .FileName("ProviderSearch_PageLevel.pdf")
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
                            )
                            .Pdf(pdf => pdf
                                .AllPages()
                                .AvoidLinks()
                                .PaperSize("A4")
                                .Scale(0.8)
                                .Margin("2cm", "1cm", "1cm", "1cm")
                                .Landscape()
                                .RepeatHeaders()
                                .TemplateId("page-template")
                                .FileName("ProviderSearch_AllRecords.pdf")
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
                            )
                            .Excel(excel => excel
                                .FileName("All_Provider_Search_Report.xlsx")
                                .Filterable(true)
                                .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
                                .AllPages(true)
                            )

                            .Pageable()
                            .Sortable()
                            .Groupable()
                            .Pageable(pageable => pageable
                            .Refresh(true)
                            .ButtonCount(3))
                            .Events(events => events
                                .DataBound("onGridDataBound")
                            )
                            .DataSource(d => d.Ajax()
                            .PageSize(12)
                            .Model(m => m.Id(r => r.ProviderId))
                            .Read(read => read.Action("ProviderSearchReportGridData", "ProviderReports").Data("ProviderSearchViewModelData"))
                            .Sort(sort => sort.Add("ProviderId").Ascending())
                            )
//.HtmlAttributes(new { style = "height:500px;" })
)

 

The "Export all records to PDF" doesn't get all the data surly because the "All Pages" is false, but it can't be set to true.

.AllPages()

 

Any suggestions?

Thanks

 

 

 

 

 

 

 

 

 

 

[Stefan]

Hello Brent,

Concerning the Question #1 - The pdf option can be set to export allPages, and then the button which will export only the current page can be a custom button which will export the Grid DOM container. Notice how in the example, a specific DOM element is exported. In this scenario the $(".content-wrapper") element can be replaced with the Grid container:

http://demos.telerik.com/kendo-ui/pdf-export/index

Concerning Question #2 - After additional testing, I can suggest using the following approach for the pdf export:

    $("#grid").data("kendoGrid").bind("pdfExport", function (e) {
        var grid = $("#grid").data("kendoGrid")
        e.promise.then(function () {
            grid.showColumn(2);
        });
        grid.hideColumn(2);
    });
});

Regards,
Stefan
Progress Telerik