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

这就是我如何解决它。

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

Answer 2

你自己的答案是完全有效的，并且是如何使用jquery直接定位kendo生成的dom元素的一个很好的例子。当kendo不提供您需要的功能时，这种方法总是很有价值。

但是在这种情况下，网格小部件提供更改事件。您可以将网格设置为“可选择”。并订阅＆＃39;更改＆＃39;选择一行或多行时触发的事件：

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
}

在处理程序功能中，＆＃39;这个＆＃39;指的是网格小部件实例，并在其上调用select（）函数返回所选的行。从这些行中，您可以检索绑定到它们的数据源项，从而可以访问id和任何其他属性。

请点击此处了解详情：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change

kendo ui可点击行

2 个答案: