Hi rani,
To display image you need to use template column.
Check this example. Now please take its reference and correct your code.
In the example 1st column is displayed using image path based on id and 2nd column is displayed from binary image.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
NorthwindEntities entities = new NorthwindEntities();
List<EmployeeDetail> employees = new List<EmployeeDetail>();
foreach (Employee emp in entities.Employees)
{
employees.Add(new EmployeeDetail
{
EmployeeID = Convert.ToInt32(emp.EmployeeID),
Name = emp.FirstName + " " + emp.LastName,
City = emp.City,
Country = emp.Country,
ImagePath = "Content/Images/" + emp.EmployeeID + ".jpg",//Content/Images/#:data.EmployeeID#.jpg
ImageBase64 = ImageToBase64String(emp.Photo),
});
}
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 EmployeeDetail
{
public int EmployeeID { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string ImagePath { get; set; }
public string ImageBase64 { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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/angular.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">
var app = angular.module("MyApp", ["kendo.directives"]);
app.controller("MyController", function ($scope, $window, $http) {
$scope.mainGridOptions = {
dataSource: { transport: { read: "/Home/GetEmployees/" }, pageSize: 5 },
pageable: { refresh: true, pageSizes: [2, 25, 50] },
groupable: false,
sortable: true,
columns: [
{ template: "<img src='#:data.ImagePath#' style='width:50px;height:50px;border-radius: 30%;' />", title: "Image", width: "35px" },
{ template: "<img src='data:image/jpg;base64,#:data.ImageBase64#' style='width:50px;height:50px;border-radius: 30%;' />", title: "Photo", width: "35px" },
{ field: "EmployeeID", title: "Id", width: "20px" },
{ field: "Name", title: "Name", width: "70px" },
{ field: "City", title: "City", width: "40px" },
{ field: "Country", title: "Country", width: "40px" }
]
};
})
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid options="mainGridOptions"></kendo-grid>
</body>
</html>
Screenshot
