Kendo Grid Multi PDF Exports, Hidden Field and Formatting

6 posts, 0 answers
  1. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 22 May 2017 Link to this post

    (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

  2.
  3. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 22 May 2017 in reply to Brent Link to this post

    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. 

  5. Stefan
    Admin
    Stefan avatar
    2922 posts

    Posted 24 May 2017 Link to this post

    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 visualization (charts) and form elements.
  7. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 25 May 2017 Link to this post

    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?

     

  8.
  9. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 25 May 2017 Link to this post

    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

     

     

     

     

     

     

     

     

     

     

  11. Stefan
    Admin
    Stefan avatar
    2922 posts

    Posted 29 May 2017 Link to this post

    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.
Back to Top