Question

您好我正在开发一个带有Kendo UI控件的角度2应用程序。我正在关注kendo UI站点的示例来设置Kendo Grid。出于某种原因，没有任何错误，屏幕上没有任何内容。数据存储在本地products.js文件中，该文件在应用程序中引用并绑定到数据源。请参阅以下代码

Product.html

    <!DOCTYPE html>
    <html>



    <head>
        <title></title>

        <link href="../../assets/css/kendo/2016.3.1028/kendo.common.min.css" rel="stylesheet" />
        <link href="../../assets/css/kendo/2016.3.1028/kendo.default.min.css" rel="stylesheet"/>
        <link href="../../assets/css/kendo/2016.3.1028/kendo.default.mobile.min.css" rel="stylesheet" />
        <script src="../../scripts/kendo/2016.3.1028/jquery.min.js"></script>
        <script src="../../scripts/kendo/2016.3.1028/kendo.all.min.js"></script>

    </head>
    <body>

        <script src="../../scripts/shared/products.js"></script>
        <div id="example">





            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" }

                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            { field: "ProductName", title: "Units In Stock", width: "130px" },
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },

                        ]
                    });
                });
            </script>

        </div>


    </body>

    </html>

Products.js

var products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
}, {
    ProductID : 2,
    ProductName : "Chang",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "24 - 12 oz bottles",
    UnitPrice : 19.0000,
    UnitsInStock : 17,
    UnitsOnOrder : 40,
    ReorderLevel : 25,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
}];

我已经验证了对javascript和css文件的所有引用，它们似乎是正确的。我试图使用开发人员工具检查控制台窗口中是否有任何错误。

KendoUI网格未显示屏幕上的数据

0 个答案: