Блог

Главная - Вопросы по программированию - Как я могу щелкнуть первую строку сетки кендо при загрузке страницы

Как я могу щелкнуть первую строку сетки кендо при загрузке страницы

#javascript #jquery #kendo-ui #kendo-grid

#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:

Если ваши данные еще не были загружены, делать нечего 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>

Комментарии:

1. Спасибо! Есть ли возможность щелкнуть по первой строке?

2. @kukamuk Вы всегда можете добавить свое собственное событие щелчка в сетку, но правильный способ прослушивания события изменения — использовать собственные события фреймворков. Я обновил приведенный выше ответ.

3. Спасибо. вот моя проблема, куда добавить событие щелчка в первой строке вашего решения

4. @kukamuk Почему ты вызываешь click строку? Как вы назначаете слушателя за пределами Kendo?