如何为Kendo详情网格实现三列布局的任务展示模板？

我想在Kendo父网格的详情区域实现三列分段展示任务（Assignment）数据的模板，目前代码只能把所有任务渲染成单列，没法分成三个区域。我已经提供了父网格和detailInit函数的代码，请问能不能在网格内用Kendo ListView实现这个需求？detailInit函数通过Handler获取数据并传入ID完成功能。

现有代码：

export function configureSearchGrid() {
    $("#parentgrid").kendoGrid({
        autoBind: true,
        dataSource: data,
        scrollable: false,
        sortable: false,
        filterable: {
            mode: "row"
        },
        pageable: {
            refresh: false,
            pageSize: 10,
            pageSizes: [15, 30, 50],
            buttonCount: 4
        },
        noRecords: { "template": "\u003cdiv class=\u0027grid-norecords\u0027\u003eNo Records were found.\u003c/div\u003e" },
        detailInit: detailInit,
        columns: [
            { field: "ShiftId", title: "Shift", width: "55px", filterable: false, attributes: { style: 'text-align: center' }},
        ],
    });
}
function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        autoBind: true,
        resizable: false,
        scrollable: false,
        columns: [
            { field: "Assignment", title: "Shift Assignment", width: "150px"}, //TODO NEED TO CREATE CUSTOM TEMPLATE 
        ],
        noRecords: {
            template: "<div class='grid-norecords'>No records were found.</div>"
        },
        dataSource: {
            transport: {
                read: {
                    url: "?handler=LoadAssignment",
                    data: function () {
                        return { shiftId: e.data.ShiftId, establishmentId: e.data.EstablishmentId };
                    }
                }
            },
            schema: {
                data: "Data",
                total: "Total",
            },
            data: function (data) {
                return data.Data
            },
            total: function (data) {
                return data.Total
            },
        }
    });
}

完全可以用Kendo ListView实现三列布局，替换当前详情区域的单列网格即可。具体实现步骤如下：

1. 修改detailInit函数，替换为ListView #

将原有的详情网格替换为ListView，保留原数据源读取逻辑，同时自定义模板渲染单个任务项：

function detailInit(e) {
    // 创建ListView容器并添加到详情单元格
    const listViewContainer = $("<div class='assignment-list'></div>").appendTo(e.detailCell);
    
    listViewContainer.kendoListView({
        autoBind: true,
        noRecords: {
            template: "<div class='grid-norecords'>No records were found.</div>"
        },
        dataSource: {
            transport: {
                read: {
                    url: "?handler=LoadAssignment",
                    data: function () {
                        return { shiftId: e.data.ShiftId, establishmentId: e.data.EstablishmentId };
                    }
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            }
        },
        // 自定义单个任务项的模板
        template: "<div class='assignment-item'>#: Assignment #</div>"
    });
}

2. 添加CSS实现三列布局 #

通过CSS Grid实现自动三列均分，调整间距和样式：

.assignment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三等分列 */
    gap: 12px; /* 列之间的间距 */
    padding: 10px;
}

.assignment-item {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f8f9fa;
}

关键说明 #

• 用CSS Grid的repeat(3,1fr)实现三列等宽布局，若需要不同列宽可直接修改参数（比如150px 1fr 1fr）
• 保留了原有的数据源读取逻辑，确保能正确获取对应Shift的任务数据
• ListView模板负责渲染单个任务项，CSS控制整体布局结构，后续调整样式只需修改CSS即可

内容的提问来源于stack exchange，提问作者John S.