Kendo ListView详细信息模板

时间:2013-05-05 14:43:55

标签: .net kendo-ui

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

此致

2 个答案:

答案 0 :(得分:1)

ListView不支持详细信息模板。

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

答案 1 :(得分: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);
            }