动态向Kendo网格的列添加行提示

Question

我有一列带有一些笔记，显示在行中。由于笔记很长，我已经在控制器中将笔记缩短，并将其发送到我的aspx页面。我想要实现的是，在鼠标悬停在网格行上（或者如果可能的话在单元格上）以工具提示的形式显示完整的笔记。有办法实现这个吗？任何帮助将不胜感激。先感谢您。

- Hari

---

抱歉标题写错了。标题应该是这样的：“在Kendo网格中为动态内容添加工具提示”。 - Hari

为什么您不接受您的解决方案呢？ - Sampath

Answer 1

发表答案是为了帮助任何需要的人。

在做了以下事情后，我使它正常工作了...

columns.Bound(p => p.partialNotes).Title("Description").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:left" }).Width("8%").HtmlAttributes(new { title =  "#= completeNotes #" });

我刚刚添加了 HtmlAttributes(new { title = "#= completeNotes #" })。

现在，当我将鼠标放置在“描述”列数据上时，会作为工具提示显示完整的注释。

- Hari

Answer 2

使用第三方小部件也是一个可能的选择。我已经添加了像这样的列标题中的 qtip 提示 qtip，如下图所示

KendoUI 网格列数组项

{
    field:"property",
    headerTemplate:kendo.template($("#h_Entity_property").html())
},

模板

<link rel="stylesheet" type="text/css" href="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.css"/>
<link rel="stylesheet" type="text/css" href="lib/Craga89-qTip2-bfcc9ef/util/qtip.util.css"/>
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/util/Dialogues.js"></script>
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/util/Qtip2Util.js"></script>

<script type="text/x-kendo-template" id="h_Entity_property">
    Property
    <img onclick="Qtip.local(this, 'i_Entity_property')" src="img/info.gif"/>
    <div id="i_Entity_property" style="display:none;">
        Elaborate a bit...
    </div>
</script>

工具提示生成器

var Qtip = {
    local:function (element, contentId) {
        $(element).qtip($.extend({}, qTipSharedOptions, {
                content:{
                    text:$('#' + contentId).html(),
                    title:{
                        text:' ',
                        button:true
                    }
                }
            }
        ));
    },
    ...
};

var qTipSharedOptions = {
    position:{
        at:'top right', // Position the tooltip above the link
        my:'bottom left',
        viewport:$(window), // Keep the tooltip on-screen at all times
        effect:false // Disable positioning animation
    },
    style:{
        classes:'ui-tooltip-tipsy ui-tooltip-shadow'
    },
    show:{
        ready:true,
        event:false,
        solo:true // Only show one tooltip at a time
    },
    hide:false
};

- Kristo Aun

Answer 3

你可以像下面这样做：

$("#Kendo-grid-div-id").kendoTooltip({
    filter: "td:nth-child(2),td:nth-child(3)", //comma separated multiple columns
    position: "bottom",     //possible values: bottom,top,left,right,center
    content: function(e){
      var content = e.target.html();
      return content;
    }
  }).data("kendoTooltip");

- Suresh Kamrushi