剑道网格填充在剑道选项卡条下

Question

我没有看到任何剑道网格与剑道标签条做的例子。这不可能吗？我尝试了kendo-tabstrip演示和kendo-grid演示。两者单独工作很酷，但是当我合并代码时，标签条不能正确显示。

Answer 1

我成功地在选项卡条中使用了kendo网格。除非我删除了"“，否则网格不会显示在选项卡的内部。如果DOCTYPE存在，则选项卡始终为空。我不确定为什么这解决了这个问题。你说的“显示不正确”到底是什么意思？

编辑:我认为我的问题实际上是因为我们在选项卡条中使用了拆分器和网格。

Answer 2

我成功地在剑道选项卡条中添加了剑道网格。在引入所需的js文件jquery-3.2.1/kdo.all.min.js和所需的css文件kendo.common-bootstrap.min.css/kendo.black.min.css.之后

我的Html

$(document).ready(function () {
    $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });
    $("#grid1").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 20
        },
        height: 550,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{
            template: "<div class='customer-photo'" +
                            "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                        "<div class='customer-name'>#: ContactName #</div>",
            field: "ContactName",
            title: "Contact Name",
            width: 240
        }, {
            field: "ContactTitle",
            title: "Contact Title"
        }, {
            field: "CompanyName",
            title: "Company Name"
        }, {
            field: "Country",
            width: 150
        }]
    });

});

<div id="tabstrip">
    <ul>
        <li>Tab with Grid</li>
        <li>Tab without Grid</li>
    </ul>
    <div>
        <div id="grid1"></div>
    </div>
    <div>
        <div>Normal content</div>
    </div>
</div>

我不需要移除。选项卡条和网格代码都是从kendo演示中获取的。这里：https://demos.telerik.com/kendo-ui/tabstrip/index和这里：https://demos.telerik.com/kendo-ui/grid/index