Kendo 未知列的网格工具提示

Question

我正在使用 kendo 网格，每次用户在任何网格单元格上执行鼠标悬停时，我都想显示一个工具提示。以下示例工作正常，但如果我不知道用户鼠标悬停在哪一列怎么办？

<!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;

其中 columnname 是鼠标悬停在任何列上的名称，columnValue 是该单元格的值。

谢谢

Answer 1

所以我假设您只想要 header 列和您悬停的特定单元格的值，如果我正确理解您的问题而不是显示整个数据项 object即

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

你只想：

 Text : Text Value 1

假设这就是您想要的，那么这个 dojo 应该会有所帮助。 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 的特定索引以提取该项目，因为它可能不正确。例如如果你有三个属性，但中间的一个被隐藏，那么你最终会得到一个不正确的值。

所以如果只得到可见的列headers那么我们就可以通过字段名引用属性。

我显然已经更改了内容字符串以向您显示我们在网格中命中的行和列位置。

Kendo 未知列的网格工具提示

Kendo grid tooltip for unknown column

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc

kendo-tooltip