将工具提示动态添加到列的剑道网格行中

Question

我有一列显示行中显示的一些注释。由于音符很大，我已经将控制器本身的音符缩短并将其发送到我的aspx页面。我想要实现的是，我想以网格行上鼠标悬停的方式（或者如果可能的话，完全在单元格上）以工具提示的形式显示完整注释。有什么办法可以做到这一点？任何帮助将不胜感激。提前致谢。

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（新{标题= “＃= completeNotes＃”}）

所以，现在当我把将鼠标悬停在Description列数据上，我将完整的Notes作为工具提示。

Answer 2

使用第三方小部件也是一种可能性。我已经添加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 
};