kendo ui Clickable row

Question

I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.

here is my code :

  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

Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.

However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:

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
}

Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.

See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change

Answer 2

This how I fixed It.

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