Export Kendo Grid to Pdf and Excel

This article demonstrates, how to export Kendo Grid to PDF and Excel. Kendo UI gives us the built-in functionality to export the Grid to Excel or Pdf and we just need to configure the Grid correctly. 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 the Excel and Pdf command to the toolbar of Grid as shown below.

               .ToolBar(toolbar =>
                {
                    toolbar.Excel();
                    toolbar.Pdf();
                })

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", "Grid"))
            )

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>

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
  @(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" });
                    toolbar.Excel();
                    toolbar.Pdf();
                })

                    .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.