我正在实现一个asp.net MVC应用程序，该应用程序包括带有嵌套数据网格的页面。目前，我正在使用单个复杂数据对象绑定数据，并且可以正确加载数据。
但是问题是内部网格中的数据太多时，需要一些时间才能从数据库中获取数据并为所有行创建数据对象。
我需要做的是在用户展开所选行时获取并绑定内部网格数据。
<div class="panel panel-default">
<div class="panel-body">
<div id="purchase-order-grid"></div>
</div>
</div>
$(document).ready(function () {
$("#purchase-order-grid").kendoGrid({
columns: [
{
field: "PurchaseOrderNumber",
title: "Purchase Order",
width: 80,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
},
{
field: "Store",
title: "Store",
width: 100,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
}
],
detailTemplate: '<div class="second-level-grid"></div>',
detailInit: function (e) {
e.detailRow.find(".second-level-grid").kendoGrid({
dataSource: e.data.Products,
columns: [
{
field: "PartNumber",
title: "Part",
width: 70
},
{
field: "Description",
title: "Description",
width: 150
}
]
})
},
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("List", "PurchasingPurchaseOrder"))",
type: "POST",
dataType: "json",
data: additionalData
}
}
}
});
}
function additionalData() {
var data = {
StoreId: $('#@Html.IdFor(model => model.StoreId)').val()
};
addAntiForgeryToken(data);
return data;
}[HttpPost]
public virtual IActionResult List(PurchaseOrderSearchModel model, DataSourceRequest command)
{
int totalCount = 0;
var purchaseOrder = _purchaseOrderService.GetPurchaseOrdersWithSearchOption(model, out totalCount, command.Page - 1, command.PageSize);
return Json(new DataSourceResult { Data = purchaseOrder, Total = totalCount });
}
我终于找到了解决方案。添加完整的代码以供将来参考。
<div class="panel panel-default">
<div class="panel-body">
<div id="purchase-order-grid"></div>
</div>
</div>
var expanded = {};
var grid, id;
$(document).ready(function () {
var element = $("#purchase-order-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("List", "PurchasingPurchaseOrder"))",
type: "POST",
dataType: "json",
data: additionalData
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function (e) {
grid = this;
grid.tbody.find("tr[role='row']").each(function () {
var id = grid.dataItem(this).PurchaseOrderNumber;
if (expanded.hasOwnProperty(id) && expanded[id]) {
grid.expandRow(this);
}
});
},
detailExpand: function (e) {
id = this.dataItem(e.masterRow).PurchaseOrderNumber;
expanded[id] = true;
},
detailCollapse: function (e) {
id = this.dataItem(e.masterRow).PurchaseOrderNumber;
expanded[id] = false;
},
columns: [
{
field: "Store",
title: "Store",
width: 100,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
},
{
field: "POCreatedOn",
title: "PO Created On",
width: 100,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
},
{
field: "SalesOrderTotal",
title: "Sales Order Total",
width: 80,
headerAttributes: { style: "text-align:right" },
attributes: { style: "text-align:right" }
},
{
field: "TotalPOCost",
title: "Total PO Cost (€)",
width: 100,
headerAttributes: { style: "text-align:right" },
attributes: { style: "text-align:right" }
},
{
field: "ShipmentStatus",
title: "Shipment Status",
width: 100,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
},
{
field: "PaymentStatus",
title: "Payment Status",
width: 90,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
}
]
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("GetPurchaseOrderByPurchaseOrderNumber", "PurchasingPurchaseOrder"))",
type: "POST",
dataType: "json",
data: nestedGridData(e.data.PurchaseOrderNumber)
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "PurchaseOrderNumber", operator: "eq", value: e.data.PurchaseOrderNumber }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{
field: "Description",
title: "Description",
width: 150
},
{
field: "SalesOrderId",
title: "Order",
width: 80,
template:'#=formatSalesOrderIds(SalesOrderId)#',
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
},
{
field: "QuantityOrdered",
title: "Qty Order",
width: 70,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
},
{
field: "QuantityDispatched",
title: "Qty Shipped",
width: 70,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" }
}
]
});
}
function nestedGridData(purchaseOrderNumber) {
var data = {
GoDirectlyToPurchaseOrderId: purchaseOrderNumber
};
addAntiForgeryToken(data);
return data;
}public class PurchasingPurchaseOrderController
{
[HttpPost]
public virtual IActionResult List(PurchaseOrderSearchModel model, DataSourceRequest command)
{
int totalCount = 0;
var purchaseOrder = GetPurchaseOrdersWithSearchOption(model, out totalCount, command.Page - 1, command.PageSize);
return Json(new DataSourceResult { Data = purchaseOrder, Total = totalCount
});
}
[HttpPost]
public virtual IActionResult GetPurchaseOrderByPurchaseOrderNumber(PurchaseOrderSearchModel model, DataSourceRequest command)
{
int totalCount = 0;
var products= GetPurchaseOrderByPurchaseOrderNumber(model, out totalCount, command.Page - 1, command.PageSize);
return Json(new DataSourceResult { Data = products, Total = totalCount });
}
}
public class DataSourceRequest
{
public DataSourceRequest()
{
this.Page = 1;
this.PageSize = 10;
}
public int Page { get; set; }
public int PageSize { get; set; }
public List<Sort> Sort { get; set; }
}