如何在页面加载中单击Kendo网格第一行

时间:2020-09-17 18:22:13

标签: javascript jquery kendo-ui kendo-grid

我有剑道网格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());
});

1 个答案:

答案 0 :(得分:2)

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

更新:每当以编程方式或用户的鼠标选择一行时,就会触发change事件。

                        <Text style={[
                            styles.devicesInfoText,
                            styles.deviceNameText,
                        ]}>
                            {`${x.name}* `}
                        </Text>
                        <Text style={[
                            styles.devicesInfoText,
                            styles.deviceNameText,
                        ]}>
                            {`${x.quantity}`}
                        </Text>
$("#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; }

相关问题