CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-gridkendo-asp.net-mvconrowclick
Haytham
Haytham

Reputation: 854

kendo ui Clickable row

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();
 });

Upvotes: 2

Views: 3714

Answers (2)

NigelK
NigelK

Reputation: 8490

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

Upvotes: 3

Haytham
Haytham

Reputation: 854

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);
});

Upvotes: 2

Related Questions