.net - 剣道一覧詳細テンプレート

Question

やあ、剣道 listiview は詳細テンプレートをサポートしているか、剣道グリッドが好きではありません。そうでない場合は、剣道リストビューで詳細テンプレートを実装する方法を教えてください。

よろしく

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