Подсказка к сетке кендо для неизвестного столбца - PullRequest
Новая
       38

Подсказка к сетке кендо для неизвестного столбца

0 голосов
/ 05 июня 2018

Я использую сетку кендо, и я хотел бы показывать всплывающую подсказку каждый раз, когда пользователь выполняет наведение мыши на любую ячейку сетки.Следующий пример работает нормально, но что если я не знаю столбец, который пользователь делает при наведении мыши? 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"> 
</script>
</head>
<body>

<div id="grid"></div>
<style>
  #grid{
    width:300px;
  }
</style>
<script>
  var grid = null;

  $(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
      data: [
        {ID:1 ,Text: "Text 1"},
        {ID:2 ,Text: "Text 2"},
        {ID:3 ,Text: "Text 3"}
      ],
      schema: {
        model: {
          fields: {
            ID: { type: "number" },
            Text: { type: "string" }
          }}
      },
      pageSize: 20
    });

    grid = $("#grid").kendoGrid({
      dataSource: dataSource,
      scrollable: true,
      filterable: true,
      toolbar: ["create"],
      columns: [
        { field: "ID", width: "50px" },
        { field: "Text", width: "200px", attributes: {
          style: 'white-space: nowrap '
        }  }],
      editable: "incell"
    }).data("kendoGrid");

    $("#grid").kendoTooltip({
      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      content: function(e){
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.Text;
        return content;
      }
    }).data("kendoTooltip");
  });
</script>

</body>
</html>

Так что в моем случае этой строки недостаточно: 

var content = dataItem.Text;

потому что: 1) у меня может быть field1, field2, field3 и т. д. В этом случае мы предполагаем, что единственный столбец, на который можно навести курсор мыши, - это столбец с именем «Text».2) Мне нужно не только значение любой ячейки, которую пользователь выполняет при наведении курсора, но и имя столбца.

Так что мне нужно показать в подсказке: 

var content = "column name: " + columname + " - Value: " + columnValue;

Гдеcolumname - это имя, взятое из любого наведения столбца, а columnValue - значение этой ячейки.

Спасибо

1 Ответ

0 голосов
/ 05 июня 2018

Итак, я предполагаю, что вы просто хотите получить заголовок столбца и значение, которое является той конкретной ячейкой, над которой вы наводите курсор, если я правильно понимаю ваш вопрос, вместо того, чтобы показывать весь объект dataItem, т.е. 

{ID:1, Text:"Text Value 1"}

Вы просто хотите: 

 Text : Text Value 1

Предполагая, что это то, что вы хотите, тогда это додзё должно помочь.http://dojo.telerik.com/uleJEbiz

Вот код для справки: 

function(e){

        var grid = $('#grid').data('kendoGrid'); 
        var rowIndex = e.target.closest("tr").index(); 
        var colIndex = e.target.index(); 

        var dataItem = grid.dataItem(e.target.closest("tr"));

        var columns = grid.columns.filter(function(col){
          return !col.hidden; 
        }); 

         var content = 'Found on Row::' + rowIndex + ' Column::' + colIndex + 
         '<br/>' +  columns[colIndex].field + '::' +   dataItem[columns[colIndex].field];


        return content;
      }

Все, что я сделал, посмотрел на проблему как grid, мы знаем, какую строку мы ищем, но необязательно столбец, за которым мы следуем, поскольку у нас могут быть скрытые столбцы, поэтому мы не можем просто посмотреть на конкретный индекс элемента dataItem, чтобы извлечь этот элемент, поскольку он может быть неправильным.Например, если у вас есть три свойства, но среднее скрыто, то вы в итоге получите неверное значение.

Таким образом, если получить только видимые заголовки столбцов, мы можем ссылаться на свойство по имени поля.

Я, очевидно, изменил строку содержимого, чтобы показать вам позицию строки и столбца, которые мы попали в сетку.

...