剑道网格填充在剑道标签条下答案

【问题标题】：Kendo grid populates under kendo tab strips剑道网格填充在剑道标签条下
【发布时间】：2013-08-30 05:35:29
【问题描述】：

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

【问题讨论】：

演示：demos.kendoui.com/web/grid/detailtemplate.html

标签： kendo-ui kendo-grid kendo-menu

【解决方案1】：

我在标签条内成功使用了剑道网格。除非我删除“”，否则网格不会显示在选项卡内。如果存在 DOCTYPE，则该选项卡始终为空白。我不确定为什么解决了这个问题。 “未正确显示”到底是什么意思？

编辑：我认为我的问题实际上是当我们在标签条内有一个拆分器和网格时引起的。

【讨论】：

【解决方案2】：

我成功地在剑道标签条中添加了剑道网格。引入所需的js文件jquery-3.2.1/kendo.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>

我不必删除。 tabstrip 和 grid 代码都是从 kendo 演示中获取的。这里：https://demos.telerik.com/kendo-ui/tabstrip/index 和这里：https://demos.telerik.com/kendo-ui/grid/index

【讨论】：