如何在页面加载时单击剑道网格第一行

Question

我有剑道网格id = AddressID。页面加载时如何自动点击第一行？

我尝试了下面的代码，但没有成功

var grid = $("#AddressGrid").data("kendoGrid");
    grid.select("tr:eq(1)");

我试过了，它选择了行，但我想触发点击

$(document).ready(function () {
    var grid = $("#AddressGrid").data("kendoGrid");
    grid.select(grid.tbody.find("tr:eq(1)").click());
});

Answer 1

如果您的数据尚未加载，则select 没有任何内容。您必须指定 dataBound 事件并添加您自己的处理程序。

更新：change 事件会在以编程方式或用户鼠标选择行时触发。

$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
    },
    pageSize: 20
  },
  height: 550,
  sortable: true,
  selectable: "row",
  pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
  columns: [
    { field: "ContactName", title: "Contact Name" },
    { field: "ContactTitle", title: "Contact Title" },
    { field: "CompanyName", title: "Company Name" },
    { field: "Country" }
  ],
  change: onChange,
  dataBound: onDataBind // Callback handler
});

function onDataBind(e) {
  this.select("tr:eq(0)"); // this === $("#grid").data("kendoGrid")
}

function onChange(arg) {
  const selected = [...this.select()].pop(); // multi-select is off
  const record = this.dataItem(selected);
  console.log(record.ContactName);
}

.as-console-wrapper { max-height: 4em !important; }
.as-console .as-console-row .as-console-row-code,
.as-console-row-code, .as-console-row:after { font-size: smaller; }

.k-grid { font-size: 0.667rem; }
.k-grid td { line-height: 1.667rem; }

<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common-material.min.css" rel="stylesheet">
<link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.materialblack.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
<div id="grid"></div>