Export Kendo Grid to Pdf and Excel with buttons outside of Grid

This article demonstrates, how to export Kendo Grid to PDF and Excel with button outside of Grid. In the article Crud with Kendo Grid we have already discussed to bind grid with server side data. Please go through that article before going through this article , as here we will only discuss the export functionality of Grid.

Step 1. Add two buttons in the view page to export Grid to Excel and Pdf respectively

 <button id="exportExcel">Export to Excel</button>
 <button id="exportPdf">Export to PDF</button>

Step 2.Define the proxy url and other settings for Excel and PDF as shown below.

      .Excel(excel => excel
            .FileName("Kendo UI Grid Export.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Export_Save", "Home"))
               )
                  .Pdf(pdf => pdf
                .AllPages()
                .AvoidLinks()
                .PaperSize("A4")
                .Scale(0.8)
                .Margin("2cm", "1cm", "1cm", "1cm")
                .Landscape()
                .RepeatHeaders()
                .TemplateId("page-template")
                .FileName("Kendo UI Grid Export.pdf")
                .ProxyURL(Url.Action("Export_Save", "Home"))
            )

Step 3. Create a Method in the controller to download the excel or Pdf , this method goes to the ProxyUrl() extension method of Grid.

     [HttpPost]
        public ActionResult Export_Save(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

Step 4.Add the reference of jszip library in the layout page or view page

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

Step 5. Call SaveAsPdf() or SaveAsExcel() function in the script as shown below

The complete view with Grid including all columns and commands for insert, update, Delete and Read will look like as shown below.

<button id="exportExcel">Export to Excel</button>
<button id="exportPdf">Export to PDF</button>

@(Html.Kendo().Grid<KendoExamples.ViewModel.GridVM>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id).Title("Id").Visible(false);
                columns.Bound(c => c.Name).Title("Name").Width(150);
                columns.Bound(c => c.Salary).Title("Salary").Width(150).Filterable(false);
                columns.Bound(c => c.Department).Title("Department").Width(150).Filterable(false);
                
                
                columns.Command(command => command.Custom("Edit").Click("editDetails")).Title("Modify").Width(30);
                columns.Command(c => { c.Destroy(); }).Title("Remove").Width(30);
                
            }).HtmlAttributes(new { style = "height: 550px;" })
                           .Sortable()
                    .Filterable()
                .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => model.Id(p => p.Id))
                .PageSize(5)
                                                 .Create(update => update.Action("AddEmployee", "Home"))
                                               .Update(update => update.Action("UpdateEmployee", "Home"))
                                                .Read(read => read.Action("GetEmployees", "Home"))
                                          .Destroy(destroy => destroy.Action("DeleteEmployee", "Home"))
                )
                 .Resizable(resize => resize
                 .Columns(true)
              )

               .ToolBar(toolbar =>
                {
                    toolbar.Custom().Name("newAdd").Text("+ Add Employee ").Url("#").HtmlAttributes(new { id = "newAdd" });
                })

                    .Excel(excel => excel
            .FileName("Kendo UI Grid Export.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Export_Save", "Home"))
               )
                  .Pdf(pdf => pdf
                .AllPages()
                .AvoidLinks()
                .PaperSize("A4")
                .Scale(0.8)
                .Margin("2cm", "1cm", "1cm", "1cm")
                .Landscape()
                .RepeatHeaders()
                .TemplateId("page-template")
                .FileName("Kendo UI Grid Export.pdf")
                .ProxyURL(Url.Action("Export_Save", "Grid"))
            )

                .Pageable(pageable =>
                {
                    pageable.Refresh(true);
                    pageable.PageSizes(true);
                })
)

Now run the application and you will be successfully able to download the Grid as PDF and Excel.