Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomers()
{
return Json(Customers(), JsonRequestBehavior.AllowGet);
}
public JsonResult GetCustomerDetails(int id)
{
List<UploadFile> files = UploadFiles().FindAll(x => x.CustomerId == id);
return Json(files, JsonRequestBehavior.AllowGet);
}
private List<Customer> Customers()
{
List<Customer> customers = new List<Customer>();
customers.Add(new Customer { CustomerId = 1, Name = "aaaaa" });
customers.Add(new Customer { CustomerId = 2, Name = "bbbbb" });
customers.Add(new Customer { CustomerId = 3, Name = "ccccc" });
return customers;
}
private List<UploadFile> UploadFiles()
{
List<UploadFile> uploadFiles = new List<UploadFile>();
uploadFiles.Add(new UploadFile { UploadId = 1, FileName = "F:/FilePreview/Uplodads/Test.jpg", CustomerId = 1 });
uploadFiles.Add(new UploadFile { UploadId = 2, FileName = "F:/FilePreview/Uplodads/Test.txt", CustomerId = 1 });
uploadFiles.Add(new UploadFile { UploadId = 3, FileName = "F:/FilePreview/Uplodads/Test.pdf", CustomerId = 2 });
return uploadFiles;
}
public class Customer
{
public int CustomerId { get; set; }
public string Name { get; set; }
}
public class UploadFile
{
public int UploadId { get; set; }
public string FileName { get; set; }
public int CustomerId { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", ["kendo.directives"]);
app.controller("MyController", function ($scope, $http) {
$scope.mainGridOptions = {
dataSource: { transport: { read: "/Home/GetCustomers/" }, pageSize: 5 },
pageable: { refresh: true, pageSizes: [2, 25, 50] },
groupable: false,
sortable: true,
columns: [
{ field: "CustomerId", title: "Id", width: 40 },
{ field: "Name", title: "Name", width: 150 },
{
title: "View Files",
width: '200px',
command: {
text: "View",
iconClass: "k-icon k-i-preview",
click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$http({
method: "GET",
url: "/Home/GetCustomerDetails",
params: { id: dataItem.CustomerId },
headers: { "Content-Type": "application/json" }
}).then(function (response) {
$scope.Files = response.data;
$('#popup').modal('show');
});
}
}
}
]
};
})
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid k-options="mainGridOptions" id="tblGrid"></kendo-grid>
<div class="modal fade" id="popup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align: center;">Customer File Details</h4>
</div>
<div class="modal-body">
<table class="table table-condensed">
<thead>
<tr>
<th>Id</th>
<th>File Name</th>
</tr>
</thead>
<tbody ng-repeat="file in Files">
<tr>
<td>{{file.UploadId}}</td>
<td>{{file.FileName}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
