kendo ui Кликабельная строка

Question

Я создал представление Kendo UI Grid, и оно отображает данные правильно, теперь я пытаюсь добиться этого; Когда я нажимаю на строку, я хочу получить первичный ключ этой строки и использовать его в другом месте, я пробовал много решений в сети, но у меня ничего не вышло. Кто-нибудь знает, как этого добиться.

вот мой код:

  function FondsGrid() {
  var sharedDataSource = new kendo.data.DataSource({
  transport: {
  read: {
  url: 
  "http://localhost:...........",
   dataType: "json"

  }
  },
  pageSize: 20
  });

  var accountGrid = $("#grid-fonds").kendoGrid({
  dataSource: sharedDataSource,
  sortable: true,
  pageable: false,
  columns: [
  {
  field: "CodIsin",
  title: " ",
  template: '<span class="categ #= CodIsin #"></span>',
  attributes: {
  class: "text-center"
  },
  headerattributes: {
  style: "text-align:center"
  },
  width: 35
  },
  {
 field: "LIBELLEPDT",
 title: "Nom du fonds",
 template: '<div id="#: IdProduitSP #" class="title-fonds #: 
 IdProduitSP #" data-toggle="popover" ><span class="desc-
 fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
            .
            .
            .

 dataBound: function () {
 var widthGrid = $('.k-grid-content').width();
 $(".k-grid-header").width(widthGrid);
 $(".title-fonds").popover({
 trigger: 'hover',
 html: true,
 template: '<div class="popover HalfBaked" role="tooltip">
 <div class="arrow"></div><h3 class="popover-header"></h3><div 
 class="popover-body"></div></div>',
 content: function () {
 return $('#popover-content').html();
 }
 });
 }
 }).getKendoGrid();
 /* Initialisation */
 $(document).ready(function ($) {
 FondsGrid();
 });

Answer 1

Ваш собственный ответ является совершенно верным и является хорошим примером того, как вы можете использовать jquery для непосредственного нацеливания на элементы dom, которые генерирует kendo. Такой подход всегда полезен, когда кендо не предлагает нужную вам функциональность.

Однако в этом случае виджет сетки предлагает событие изменения. Вы можете установить сетку для "выбора" и подписаться на событие "изменения", которое срабатывает, когда выбрана одна или несколько строк:

selectable: "multiple, row",
change: function(e) {
    var selectedRows = this.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
      var dataItem = this.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem);
    }
    // selectedDataItems contains all selected data items
}

В функции-обработчике this ссылается на экземпляр виджета сетки, и вызов функции select() для него возвращает выбранные строки. Затем из этих строк вы можете извлечь связанные с ними элементы источника данных, что даст вам доступ к идентификатору и любым другим свойствам.

Смотрите здесь для получения более подробной информации: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change

Answer 2

Вот как я это исправил.

$("#grid-fonds").on("click", "td", function (e) {
    var row = $(this).closest("tr");
    var value = row.find("td:first").text();
    console.log(value);
});