У меня есть эта форма:
@*Some form fields here that accept startDate and endDate*@
<div>
<button id = "searchButton">Search</button>
</div>
<div class = "col-md-12 row">
@(Html.Kendo()
.Grid<ProjectName.DataModels.Models.Customer>()
.Name("CustomerGrid")
.Columns(columns =>
{
columns.Bound(e => e.CustomerId);
columns.Bound(e => e.SomeCustomerColumn);
})
.ClientDetailTemplateId("OrderDetails")
.AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch
.DataSource(dataSource => dataSource
.Ajax()
.Events(events=>events.Change("loadChildGrid"))
.PageSize(20)
.Model(model => model.Id("CustomerId", typeof(string)))
.Read(read => read.Action("GetCustomersAsync", "Customer").Data("passArguments"))
)
)
<script id = "OrderDetails" type = "text/kendo-tmpl">
@(Html.Kendo()
.Grid<ProjectName.DataModels.Models.Order>()
.Name("OrderDetails_#=CustomerId#")
.Columns(columns =>
{
columns.Bound(o => o.ProductName);
columns.Bound(o => o.SomeOrderColumn);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model=>model.Id("OrderId"))
.ServerOperation(false)
)
.AutoBind(false)
.ToClientTemplate()
)
</script>
</div>
<script type = "text/javascript">
$("#searchButton").on("click", function () {
// Load the customerGrid here:
$("#CustomerGrid").data("kendoGrid").dataSource.read();
});
function passArguments() {
var startDate = $("#startdate").data("kendoDatePicker").value();
var endDate = $("#enddate").data("kendoDatePicker").value();
return {
start: startDate,
end: endDate
}
}
// QUESTION: How to load the child grid: OrderDetails_123 by using datasource from the parent grid?
// THIS IS WHAT I'VE TRIED SO FAR:
function loadChildGrid() {
var parentData = $("#CustomerGrid").data("kendoGrid").dataSource.data();
//Initialize the child grid
$.each(parentData, childDataFeeder);
}
function childDataFeeder(index, item) {
var childGridName = "#" + "OrderDetails_" + item.CustomerId;
var childGrid = childGridName.data("kendoGrid");
childGrid.dataSource.data(value.Orders)
}
</script>
И метод в контроллере Customer:
public async Task<ActionResult> GetCustomersAsync([DataSourceRequest] DataSourceRequest request, DateTime start, DateTime end)
{
var customersWithOrders = GetDataForParentAndChildGrid(start, end);
return Json(customersWithOrders.ToDataSourceResult(request));
}
private List<Customer> GetDataForParentAndChildGrid(DateTime start, DateTime end)
{
var testData = new List<Customer>();
// Gets required data with those dates filter and perform some mathematical calculations
testData.Add(new Customer
{
CustomerId = "123",
SomeCustomerColumn = "Blah blah",
Orders = new List<Order>()
{
new Order{
OrderId = "123ABC",
CustomerId = "123",
SomeOrderColumn = "Blah Blah Blah"
}
}
});
return testData;
}
Моя цель - установить источник данных дочерней сетки, используя данные, которые уже доступны из основной сетки. Что я пробовал до сих пор, так это то, что я прикрепил событие Change к основной сетке, которая запускает функцию loadChildGrid, где я пытаюсь извлечь данные из основной сетки и передать каждый ее элемент в функцию childDataFeeder для инициализации источника данных дочерней сетки. Проблема здесь в том, что когда он пытается это сделать, дочерняя сетка еще не существует (поскольку она не создается Кендо до тех пор, пока пользователь не щелкнет значок расширения в основной сетке).
Вы можете увидеть, что я пробовал до сих пор в методе childDataFeeder (без какого-либо успеха).
Так что я был бы очень признателен за ваше руководство по этому поводу.
Спасибо!
@LanceMcCarthy Мне понравилось 2 дня назад, но до сих пор не получил ответа. Я только что обновил этот вопрос своими последними обновлениями.
Я рад видеть, что у вас есть решение. По поводу задержки, если у вас нет лицензии на UI для ASP.Net, то получение ответа может занять до 3-х дней (в среднем 1-2 дня). Хотя у вас должна быть лицензия, если вы используете двоичные файлы, что означает, что вы можете открыть 24-часовой приоритетный билет поддержки в будущем.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


После стольких часов ударов и испытаний я наконец решил это. Поэтому я размещаю его здесь, чтобы сэкономить время другим, если они столкнутся с похожей проблемой:
Я добавил событие DetailExpand в основную сетку. И удалил событие Change на dataSource.
@(Html.Kendo()
.Grid<ProjectName.DataModels.Models.Customer>()
.Name("CustomerGrid")
.Columns(columns =>
{
columns.Bound(e => e.CustomerId);
columns.Bound(e => e.SomeCustomerColumn);
})
.ClientDetailTemplateId("OrderDetails")
.AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id("CustomerId", typeof(string)))
.Read(read => read.Action("GetCustomersAsync", "Customer").Data("passArguments"))
)
.Events(events => events.DataBound("dataBound").DetailExpand("onExpand"))
)
Теперь функция обратного вызова onExpand будет вызываться каждый раз, когда мы расширяем строку в родительской сетке. Здесь я сейчас установлю дочернюю сетку dataSource.
// Passing e is also important here because if you don't, this callback gets called
// for every row in the main grid (even when you don't expand them!)
function onExpand(e) {
var customerId = e.sender.dataItem(e.masterRow).CustomerId;
var orders = e.sender.dataItem(e.masterRow).Orders;
//Initialize the child grid as well
var childGridName = "#" + "OrderDetails_" + customerId;
var childGrid = $(childGridName).data("kendoGrid");
if (childGrid !== undefined) {
childGrid.dataSource.data(orders);
}
}
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Я использовал e.sender.dataItem(e.masterRow).PROPERTYNAME для доступа к нужным мне свойствам из основной строки.
Теперь это работает безотказно!
Если вы опубликуете это на форуме пользовательского интерфейса Telerik для ASP.NET Core, кто-нибудь из команды Kendo посмотрит.