时间戳

首页 > 解决方案 > 未知列的剑道网格工具提示

asp.net-mvc - 未知列的剑道网格工具提示

问题描述

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

<!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 是从任何列 mouseover 中获取的名称，而 columnValue 是该单元格的值。

谢谢

标签： asp.net-mvckendo-uikendo-gridkendo-asp.net-mvckendo-tooltip

解决方案

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

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

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

推荐阅读