未知列的剑道网格工具提示答案

【问题标题】：Kendo grid tooltip for unknown column未知列的剑道网格工具提示
【发布时间】：2018-06-05 10:43:53
【问题描述】：

我正在使用剑道网格，我希望每次用户在任何网格单元上执行鼠标悬停时都显示一个工具提示。以下示例运行良好，但如果我不知道用户将鼠标悬停在哪一列呢？

<!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 是该单元格的值。

谢谢

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc kendo-tooltip

【解决方案1】：

因此，如果我正确理解您的问题，我假设您只想要列标题和您悬停的特定单元格的值，而不是显示整个 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 的索引以提取该项目，因为它可能不正确。例如如果你有三个属性，但中间的一个是隐藏的，那么你最终会得到一个不正确的值。

因此，如果仅获取可见的列标题，那么我们可以通过字段名称引用该属性。

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

【讨论】：

谢谢，给我一个完美的答案。干得好！