Hi rani,
To set the footer value first set the footerTemplate for the column you want to set.
Then find the footer control and set the value.
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
List<Employee> employees = new List<Employee>();
employees.Add(new Employee
{
ID = 1,
Name = "Nancy Davolio",
Address = "507 - 20th Ave. E. Apt. 2A,Seattle,USA"
});
employees.Add(new Employee
{
ID = 2,
Name = "Andrew Fuller",
Address = "908 W. Capital Way,Tacoma,USA"
});
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">
$(function () {
$("#tblEmployees").kendoGrid({
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,
footerTemplate: '<a id="lnkSnippets"></a>'
},
{
field: "Address",
title: "Address",
width: 120,
footerTemplate: '<a id="lnkForums"></a>'
}
]
});
$('#btnSetFooter').on('click', function () {
var grid = $('#tblEmployees').data('kendoGrid');
var snippetsUrl = 'https://www.aspsnippets.com/';
grid.footer.find('#lnkSnippets').attr('href', snippetsUrl).html('aspsnippets');
var forumsUrl = 'https://www.aspforums.net/';
grid.footer.find('#lnkForums').attr('href', forumsUrl).html('aspforums');
});
});
</script>
</head>
<body>
<div id="tblEmployees"></div><br />
<input type="button" id="btnSetFooter" value="Set Footer Value" />
</body>
</html>
Screenshot
