Question

我似乎无法通过选择kendo ui grid（web）方法来选择行（或任何事情）。我在另一篇文章中读到了在选择器中包含div id，但这也无济于事。为简单起见，我试图在telerick的示例中执行此操作：http://dojo.telerik.com/oNeR

我希望通过添加以下内容自动选择第一行：

          var gridRow = $("#rowSelection").data("kendoGrid");
          gridRow.select("tr:eq(0)");

完整示例：

<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/selection">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css"      rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
</head>
<body>
        <script src="../content/shared/js/orders.js"></script>

    <div id="example">

        <div class="demo-section k-header">
            <h4>Grid with multiple row selection enabled</h4>
            <div id="rowSelection"></div>
        </div>

        <div class="demo-section k-header">
            <h4>Grid with multiple cell selection enabled</h4>
            <div id="cellSelection"></div>
        </div>

        <script>
            $(document).ready(function () {
                $("#rowSelection").kendoGrid({
                    dataSource: {
                        data: orders,
                        pageSize: 6
                    },
                    selectable: "single",
                    pageable: {
                        buttonCount: 5
                    },
                    scrollable: false,
                    navigatable: true,
                    columns: [
                        {
                            field: "ShipCountry",
                            title: "Ship Country",
                            width: 300
                        },
                        {
                            field: "Freight",
                            width: 300
                        },
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            format: "{0:dd/MM/yyyy}"
                        }
                    ]
                });

                $("#cellSelection").kendoGrid({
                    dataSource: {
                        data: orders,
                        pageSize: 6
                    },
                    selectable: "multiple cell",
                    pageable: {
                        buttonCount: 5
                    },
                    scrollable: false,
                    navigatable: true,
                    columns: [
                        {
                            field: "ShipCountry",
                            title: "Ship Country",
                            width: 300
                        },
                        {
                            field: "Freight",
                            width: 300
                        },
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            format: "{0:dd/MM/yyyy}"
                        }
                    ]
                });
            });
          var gridRow = $("#rowSelection").data("kendoGrid");
          gridRow.select("tr:eq(0)");
        </script>
    </div>


</body>
</html>

Answer 1

乍一看，网格代码是正确的。我几乎可以肯定你的问题是你的脚本正在执行并在它被初始化之前调用网格上的方法 - 当然在它被绑定之前。在第一种情况下，我希望在控制台中看到错误，因为gridRow将被定义，在第二种情况下我会期望它无声地失败，因为选择器tr：eq（0）将不匹配任何东西。

尝试将函数附加到网格的databound event，如下所示 -

<script>
    $(document).ready(function () {
        function selectFirstRow(event) {
            event.sender.select("tr:eq(0)");
        }

        $("#rowSelection").kendoGrid({
            dataBound: selectFirstRow,
            dataSource: {
                data: orders,
                pageSize: 6
            },
            selectable: "single",
            pageable: {
                buttonCount: 5
            },
            scrollable: false,
            navigatable: true,
            columns: [
                {
                    field: "ShipCountry",
                    title: "Ship Country",
                    width: 300
                },
                {
                    field: "Freight",
                    width: 300
                },
                {
                    field: "OrderDate",
                    title: "Order Date",
                    format: "{0:dd/MM/yyyy}"
                }
            ]
        });

        $("#cellSelection").kendoGrid({
            dataSource: {
                data: orders,
                pageSize: 6
            },
            selectable: "multiple cell",
            pageable: {
                buttonCount: 5
            },
            scrollable: false,
            navigatable: true,
            columns: [
                {
                    field: "ShipCountry",
                    title: "Ship Country",
                    width: 300
                },
                {
                    field: "Freight",
                    width: 300
                },
                {
                    field: "OrderDate",
                    title: "Order Date",
                    format: "{0:dd/MM/yyyy}"
                }
            ]
        });
    });
</script>

选择方法不选择Kendo UI Grid行

1 个答案: