.net - Kendo ListView Detail Template

Question

Hi does kendo listiview support detail template or not like kendo Grid. If not how i can implemented detail template with kendo listview.

Regards

Answer 1

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);
            }

Answer 2

ListView does not support detail template.

Better take a look how templates are working and inside of main template put an element which you can find when the dataBound event occurs and again turn into template.