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
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomers()
{
NorthwindEntities entities = new NorthwindEntities();
List<Customer> customers = entities.Customers.Take(10)
.Select(x => new Customer
{
CustomerId = x.CustomerID,
Name = x.ContactName,
Country = x.Country
}).ToList();
return Json(customers, JsonRequestBehavior.AllowGet);
}
public JsonResult GetOrders()
{
NorthwindEntities entities = new NorthwindEntities();
List<Order> orders = new List<Order>();
foreach (var order in entities.Orders)
{
orders.Add(new Order
{
CustomerId = order.CustomerID,
OrderID = order.OrderID,
RequiredDate = Convert.ToDateTime(order.RequiredDate).ToShortDateString(),
ShippedDate = Convert.ToDateTime(order.ShippedDate).ToShortDateString(),
Freight = order.Freight
});
}
return Json(orders, JsonRequestBehavior.AllowGet);
}
public class Customer
{
public string CustomerId { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
public class Order
{
public string CustomerId { get; set; }
public int OrderID { get; set; }
public string RequiredDate { get; set; }
public string ShippedDate { get; set; }
public decimal? Freight { 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.customersGridOptions = {
dataSource: {
transport: { read: "Home/GetCustomers" },
pageSize: 5,
serverPaging: false,
serverSorting: false
},
sortable: true,
pageable: true,
dataBound: function () { this.expandRow(this.tbody.find("tr.k-master-row").first()); },
columns: [{ field: "CustomerId", title: "ID" },
{ field: "Name", title: "Name" },
{ field: "Country", title: "Country"}]
};
$scope.ordersGridOptions = function (dataItem) {
return {
dataSource: {
transport: { read: "Home/GetOrders" },
serverPaging: false,
serverSorting: false,
serverFiltering: false,
pageSize: 5,
filter: { field: "CustomerId", operator: "eq", value: dataItem.CustomerId }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [{ field: "OrderID", title: "Order ID" },
{ field: "RequiredDate", title: "Required Date" },
{ field: "ShippedDate", title: "Shipped Date" },
{ field: "Freight", title: "Freight"}]
};
};
})
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<kendo-grid options="customersGridOptions">
<div k-detail-template>
<kendo-grid k-options="ordersGridOptions(dataItem)">
</kendo-grid>
</div>
</kendo-grid>
</body>
</html>
Screenshot
