Установите источник данных дочерней сетки, используя источник данных родительской сетки в пользовательском интерфейсе Kendo

У меня есть эта форма:

@*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 (без какого-либо успеха). Так что я был бы очень признателен за ваше руководство по этому поводу.

Спасибо!

Если вы опубликуете это на форуме пользовательского интерфейса Telerik для ASP.NET Core, кто-нибудь из команды Kendo посмотрит.

Lance McCarthy 23.12.2020 10:40

@LanceMcCarthy Мне понравилось 2 дня назад, но до сих пор не получил ответа. Я только что обновил этот вопрос своими последними обновлениями.

Ash K 23.12.2020 17:21

Я рад видеть, что у вас есть решение. По поводу задержки, если у вас нет лицензии на UI для ASP.Net, то получение ответа может занять до 3-х дней (в среднем 1-2 дня). Хотя у вас должна быть лицензия, если вы используете двоичные файлы, что означает, что вы можете открыть 24-часовой приоритетный билет поддержки в будущем.

Lance McCarthy 24.12.2020 18:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
817
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После стольких часов ударов и испытаний я наконец решил это. Поэтому я размещаю его здесь, чтобы сэкономить время другим, если они столкнутся с похожей проблемой:

Я добавил событие 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 для доступа к нужным мне свойствам из основной строки.

Теперь это работает безотказно!

Другие вопросы по теме