Export KendoGrid data to Excel and PDF using jQuery in ASP.Net MVC

Last Reply 24 days ago By dharmendr

Posted 25 days ago

How to export kendogrid data in mvc.

I have to export to excel and pdf.

Posted 24 days ago

Hi rani,

KendoGrid has inbuilt functionality for exporting to Excel and PDF.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Namespaces

using System.Configuration;
using System.Data.SqlClient;

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployees()
    {
        List<Employee> employees = new List<Employee>();
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand("SELECT * FROM Employees");
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    employees.Add(new Employee
                    {
                        ID = Convert.ToInt32(sdr["EmployeeID"]),
                        Name = sdr["FirstName"] + " " + sdr["LastName"],
                        Address = sdr["Address"] + "," + sdr["City"] + "," + sdr["Country"],
                        ImageBase64 = ImageToBase64String(sdr["Photo"]),
                    });
                }
            }
            con.Close();
        }

        return Json(employees, JsonRequestBehavior.AllowGet);
    }

    private static string ImageToBase64String(object imageData)
    {
        byte[] bytes = null;
        System.Drawing.ImageConverter converter = new System.Drawing.ImageConverter();
        System.Drawing.Image img = (System.Drawing.Image)converter.ConvertFrom((byte[])imageData);
        using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
        {
            img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
            bytes = ms.ToArray();
        }

        return Convert.ToBase64String(bytes, 0, bytes.Length);
    }

    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string ImageBase64 { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#tblEmployees").kendoGrid({
                toolbar: [
                    { name: 'excel', text: 'Excel' },
                    { name: 'pdf', text: 'PDF'}],
                pdf: {
                    allPages: true,
                    avoidLinks: true,
                    paperSize: "A4",
                    margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                    landscape: true,
                    repeatHeaders: true,
                    scale: 0.8,
                    fileName: "Cusromers.pdf"
                },
                excel: {
                    allPages: true,
                    fileName: "Cusromers.xlsx"
                },
                dataSource: {
                    transport: { read: "/Home/GetEmployees/" },
                    pageSize: 5
                },
                pageable: { refresh: true, pageSizes: [2, 25, 50] },
                groupable: false,
                sortable: true,
                columns: [
                    { field: "ID", title: "ID", width: 30 },
                    { field: "Name", title: "Name", width: 90 },
                    { field: "Address", title: "Address", width: 120 }
                ]
            });
        });
    </script>
</head>
<body>
    <div id="tblEmployees"></div>
</body>
</html>

Screenshot

For more option on exporting to excel refer below link.

Excel Export