列の剣道グリッド行にツールチップを動的に追加する

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＃"}）

が追加されていることです説明列の上にマウスを置くと、ツールヒントとして完全な注釈が表示されます。

Answer 2

サードパーティウィジェットの使用も可能です。私が間違ったため、この

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