Question

你好kendo listview支持详细模板或不喜欢kendo Grid。如果不是我如何使用kendo listview实现详细模板。

此致

Answer 1

ListView不支持详细信息模板。

最好看看templates是如何工作的，在主模板内部放置一个元素，当 dataBound 事件发生时，您可以找到该元素，然后再转换为模板。< / p>

Answer 2

Kendo Ui Listview不支持详细信息模板，但可以使用相同的用户

界面自定义kendo Gridview详细信息模板。

这里是简单的代码：

<div id="listView"></div>

<script type="text/x-kendo-template" id="template">
    <div style="height:150px;width:30%;float:left;background-color:gray">
    </div>
    <div style="width:65%;float:left" class="customGrid"></div>
</script>

this.List = $("#listView").kendoGrid({
                dataSource: [{ Id: 1, Name: 'A' }, { Id: 2, Name: 'B' }, { Id: 3, Name: 'C' }, { Id: 4, Name: 'D' }],                
                detailTemplate: kendo.template($("#template").html()),
                detailInit: detailInit,
                scrollable:false
            }).data('kendoGrid');
            var selectTr;
            function detailInit(e) {
                alert(e.data.Id);
                var detailRow = e.detailRow;

                var gg = detailRow.find(".customGrid").kendoGrid({
                    dataSource: [{ Id: 1, Name: 'A' }, { Id: 2, Name: 'B' }, { Id: 3, Name: 'C' }, { Id: 4, Name: 'D' }],
                    scrollable: false,
                    selectable: 'row',
                    change: function () {
                        selectTr = this.select();
                        console.log(selectTr.closest('.customGrid').data('grid').dataItem(selectTr));

                    }

                }).data('kendoGrid');
                detailRow.find(".customGrid").data('grid', gg);
            }

Kendo ListView详细信息模板

2 个答案: