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 GetCategories()
{
NorthwindEntities entities = new NorthwindEntities();
List<CategoryDetail> categories = new List<CategoryDetail>();
foreach (Category cat in entities.Categories)
{
categories.Add(new CategoryDetail
{
CategoryID = cat.CategoryID,
CategoryName = cat.CategoryName,
Description = cat.Description,
PictureBase64 = ImageToBase64String(cat.Picture),
IsChecked = true
});
}
return Json(categories, 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 CategoryDetail
{
public int CategoryID { get; set; }
public string CategoryName { get; set; }
public string Description { get; set; }
public string PictureBase64 { get; set; }
public bool IsChecked { 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.categories = [{ "value": 1, "text": "Beverages" },
{ "value": 2, "text": "Condiments" },
{ "value": 3, "text": "Confections" },
{ "value": 4, "text": "Dairy Products" },
{ "value": 5, "text": "Grains/Cereals" },
{ "value": 6, "text": "Meat/Poultry" },
{ "value": 7, "text": "Produce" },
{ "value": 8, "text": "Seafood"}];
$scope.mainGridOptions = {
dataSource: { transport: { read: "/Home/GetCategories/" }, pageSize: 3 },
pageable: { refresh: true, pageSizes: [2, 25, 50] },
groupable: false,
sortable: true,
columns: [
{ field: "CategoryID", title: "Id" },
{ field: "CategoryName", title: "Category", template: RadioButtonTemplate },
{ field: "Description", title: "Description" },
{ template: "<img src='data:image/png;base64,#:data.PictureBase64#' />", title: "Image" },
{
template: function (dateItem) {
return dateItem.IsChecked ?
"<input type='checkbox' ng-click='CheckClick($event,this)' class='checkbox' ng-checked='" + dateItem.IsChecked + "' />" :
"<input type='checkbox' ng-click='CheckClick($event,this)' class='checkbox'/>";
},
title: "Is Active"
}
]
};
function RadioButtonTemplate(dataItem) {
var cell = "";
var category = dataItem.CategoryID - 1;
var categories = $scope.categories;
for (var i = 0; i < categories.length; i++) {
var item = "";
item += "<label>"
if (category === i) {
item += "<input type='radio' name='" + dataItem.CategoryName + "' ng-click='RadioClick($event,this)' checked=checked />";
} else {
item += "<input type='radio' name='" + dataItem.CategoryName + "' ng-click='RadioClick($event,this)' />";
}
item += categories[i].text;
item += "</label>"
item += "</br>";
cell += item;
}
return cell;
};
$scope.CheckClick = function (event, item) {
var isChecked = event.currentTarget.checked;
if (isChecked) {
$window.alert("Category " + item.dataItem.CategoryName + " is checked.");
} else {
$window.alert("Category " + item.dataItem.CategoryName + " is unchecked.");
}
}
$scope.RadioClick = function (event, item) {
var selected = $(event.currentTarget).closest('tr').find('input:checked').closest('label').text();
$window.alert("Category " + selected + " is selected.");
}
})
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid options="mainGridOptions" id="tblCategories"></kendo-grid>
</body>
</html>
Screenshot
