kendoui 网格，当 autoBind 配置设置为 false 时绑定数据答案

【问题标题】：kendoui grid, bind data when autoBind config is set to falsekendoui 网格，当 autoBind 配置设置为 false 时绑定数据
【发布时间】：2016-06-05 10:10:59
【问题描述】：

我正在使用自动绑定配置设置为 false 的 kendoui 网格。我想在单击按钮时绑定数据。我不想使用 datasource.read() 因为它会进行额外的服务器端调用。我已经有了要绑定到网格的可用数据。

查看fiddle了解更多信息

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
        <script src="../content/shared/js/products.js"></script>

        <div id="example">
           <div id="buttonGrid" style="height:100px;width:100px">Click me</div>

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

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            //data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "boolean" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        autoBind: false,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" }
                        ]
                    });
                });

              $("#buttonGrid").click(function(){
                            //How to bind the data available as products 

                });

            </script>
</div>


</body>
</html>

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-ui-grid

【解决方案1】：

改用data()：

$("#buttonGrid").click(function(){
    //How to bind the data available as products 
    $("#grid").data("kendoGrid").dataSource.data([
        { ProductName: "Test1", UnitPrice: 1, UnitsInStock: 1, Discontinued: false }
    ]);
});

Demo

【讨论】：

感谢您的快速回复。这就是我想要的。但我遇到了另一个问题。我的网格也使用分页，我怎样才能将total row count 与数据一起传递？
@OpenStack 不grid.dataSource.data().length 返回总数？
我想SET 总资产。所以基本上我试图通过点击一个按钮来加载网格。当我收到回复时，我会收到 data 和 totalRowCount。我可以在您的帮助下设置数据。如何设置将正确设置分页工具栏的 totalRowCount。
@OpenStack 你能用你的问题更新演示吗？我已经测试过，它在代码中没有任何更改的情况下工作：dojo.telerik.com/ACoJa/5
感谢您的快速回复。这里的问题是您已经将整个数据设置到数据源中。即使我们在网格上只显示 20 条记录，数据源也有超过 20 行。在我的例子中，我最初只会得到 20 行，当用户点击第 2 页时，我会得到接下来的 20 行。我的数据源有接近 100000 行，我无法绑定所有行。所以在我的情况下，数据将是 20 行的数组，并且 totalRowCount = 100000