Возможно ли объединить столбцы в KendoGrid? - PullRequest
Новая
       45

Возможно ли объединить столбцы в KendoGrid?

0 голосов
/ 06 июня 2018

Ниже приведена HTML-разметка KendoGrid в моем проекте MVC: 

@(Html.Kendo().Grid<ZCW.MVC.ViewModels.AdminEngagementSearchViewModel>()
    .Name("ContactsGrid")
    .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("ContactsSearchData", "Contact").Data("additionalInfo").Type(HttpVerbs.Post))
            .ServerOperation(true)
            )
    .Columns(columns =>
    {
        columns.Bound(p => p.ContactID).Title("ID");
        columns.Bound(p => p.FirstName).Title("First name");
        columns.Bound(p => p.MiddleName).Title("Middle initials");
        columns.Bound(p => p.LastName).Title("Last name");
    })
    .AutoBind(false)
    .Sortable()
    .EnableCustomBinding(true)
)

Все это прекрасно работает, однако я не могу найти решение следующего требования:

Всякий раз, когда пользователь нажимает на ContactID, он должен расширить строку и объединить все столбцы для этой конкретной строки.Нам нужно отобразить много подробностей об этом конкретном контакте в расширенной строке.

Я знаю, что мы можем использовать «ClientTemplate» для каждого столбца и писать javascripts, чтобы расширить строку.Но он отображает данные в формате столбцов, тогда как нам нужно объединить все видимые столбцы здесь.

Может кто-нибудь подсказать, возможно ли это в KendoGrid?

Пожалуйста, прокомментируйте, если что-то неясно изОригинальный вопрос.

1 Ответ

0 голосов
/ 06 июня 2018

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

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/detailtemplate

Вот простая демонстрация (в jquery,не MVC), который пытается сделать то, что вы описали: https://dojo.telerik.com/@Stephen/AMAcatiB

Если определяет шаблон кендо с желаемым пользовательским интерфейсом: 

<script id="detail-template" type="text/x-kendo-template">
    <div>
        Contact ID: #: ContactID #
    </div>
    <div>
        First Name: #: FirstName #
    </div>
    <div>
        Middle Name: #: MiddleName #
    </div>
    <div>
        Last Name: #: LastName #
    </div>
</script>

А затем настраивает опцию detailTemplate сетки дляиспользуйте его: 

$("#grid").kendoGrid({
    ...,
    detailTemplate: kendo.template($("#detail-template").html())
})

И затем присоедините обработчик события щелчка к первому столбцу, чтобы развернуть / свернуть связанную строку (взято из https://docs.telerik.com/kendo-ui/knowledge-base/grid-master-row-click-expand-collapse-detail):

$(".k-master-row").on("click", "td:eq(1)", function (e) {
    var target = $(e.target);
    if ((target.hasClass("k-i-expand")) || (target.hasClass("k-i-collapse"))) {
        return;
    }

     var row = target.closest("tr.k-master-row");
     var icon = row.find(".k-i-expand");

     if (icon.length) {
        grid.expandRow(row);
     } else {
        grid.collapseRow(row);
     }
});
...