Kendo网格填充在kendo标签条下

Posted 2021-05-03

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

答案

我成功地在tabtrip中使用了一个kendo网格。除非我删除了“<！DOCTYPE html>”，否则网格不会显示在选项卡内。如果存在DOCTYPE，则选项卡始终为空白。我不确定为什么要解决这个问题。 “没有正确显示”到底是什么意思？

编辑：我认为我的问题实际上是因为我们在制表符中有一个拆分器和网格。

另一答案

我成功地在kendo标签中添加了一个kendo网格。引入所需的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>

我没有删除<！DOCTYPE html>。标签和网格代码都是从kendo演示中获取的。在这里：https://demos.telerik.com/kendo-ui/tabstrip/index和这里：https://demos.telerik.com/kendo-ui/grid/index