kendo ui Кликабельная строка - PullRequest
Новая
       30

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

0 голосов
/ 02 мая 2018

Я создал представление 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();
 });

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Ваш собственный ответ является совершенно верным и является хорошим примером того, как вы можете использовать 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

0 голосов
/ 02 мая 2018

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

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