This is a migrated thread and some comments may be shown as answers.

Kendo Grid Multi PDF Exports, Hidden Field and Formatting

5 Answers 256 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brent
Top achievements
Rank 1
Brent asked on 22 May 2017, 04:43 PM

(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

5 Answers, 1 is accepted

Sort by
0
Brent
Top achievements
Rank 1
answered on 22 May 2017, 04:55 PM

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. 

0
Stefan
Telerik team
answered on 24 May 2017, 08:44 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Brent
Top achievements
Rank 1
answered on 25 May 2017, 08:56 PM

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?

 

0
Brent
Top achievements
Rank 1
answered on 25 May 2017, 09:13 PM

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

 

 

 

 

 

 

 

 

 

 

0
Stefan
Telerik team
answered on 29 May 2017, 12:02 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Brent
Top achievements
Rank 1
Answers by
Brent
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or