Hi rani,
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
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>
<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,
selectable: "row",
change: function () {
var row = this.select();
var dataItem = this.dataItem(row);
$scope.ImageBase64 = dataItem.ImageBase64;
$scope.ImagePath = dataItem.ImagePath;
$scope.$apply();
},
columns: [
{ template: "<img src='#:data.ImagePath#' style='width:50px;height:50px;border-radius: 30%;' />", title: "Image", width: "35px" },
{ template: "<img src='data:image/png;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><hr />
<table>
<tr>
<td><img ng-src="{{'data:image/png;base64,'+ImageBase64}}" ng-show="ImageBase64 != null"
style='width: 100px; height: 100px;' /></td>
<td><img ng-src="{{ImagePath}}" ng-show="ImagePath != null" style='width: 100px; height: 100px;' /></td>
</tr>
</table>
</body>
</html>
Screenshot
