Hi rani,
Refer below code.
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"]
});
}
}
con.Close();
}
return Json(employees, JsonRequestBehavior.AllowGet);
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Address { 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({
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
scale: 0.8,
fileName: "Employees.pdf"
},
excel: {
allPages: true,
fileName: "Employees.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 }
]
});
$("#btnExportExcel").kendoButton({
click: function () {
$("#tblEmployees").getKendoGrid().saveAsExcel();
}
});
$("#btnExportPDF").kendoButton({
click: function () {
$("#tblEmployees").getKendoGrid().saveAsPDF();
}
});
});
</script>
</head>
<body>
<div id="tblEmployees"></div>
<input type="button" id="btnExportExcel" value="Export Excel" />
<input type="button" id="btnExportPDF" value="Export PDF" />
</body>
</html>
