行にいくつかのノートが表示されている列があります。メモは膨大なので、コントローラー自体のメモを短くしてaspxページに送りました。私が達成したいのは、グリッド行の上にマウスを置いて(または可能であれば正確にセルに)、ツールチップの形で完全なノートを表示したいということです。これを達成する方法はありますか?どんな助けも高く評価されます。前もって感謝します。列の剣道グリッド行にツールチップを動的に追加する
5
A
答えて
10
誰かを助けるかもしれないように答えを投稿する。
私は
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#"})
が追加されていることです説明列の上にマウスを置くと、ツールヒントとして完全な注釈が表示されます。
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
};
関連する問題
- 1. 剣道グリッドの各行にカスタムボタンを追加する方法
- 2. 剣道グリッドにチェックボックス列を追加する方法
- 3. 剣道グリッドの行をボタンで追加する
- 4. 剣道UIスプリアシート - ヘッダーにツールチップまたはコメントを追加する
- 5. 剣道コンボボックスでアイテムを動的に追加する
- 6. 剣道グリッドのチェックボックス列
- 7. 剣道グリッド行の選択
- 8. 剣道グリッド行私は次のコードで剣道グリッドを有する変色
- 9. 剣道UI with ASP.NET MVC3グリッドに行を追加するときの既定値
- 10. 剣道グリッドonEditComplete
- 11. 剣道グリッド列デザインを操作する
- 12. 剣道グリッドにjsonデータをバインドする
- 13. 剣道グリッド配管
- 14. カスタムポップアップエディタ - 剣道UIグリッド
- 15. ツールバーなしで新しい行を追加します。剣道のグリッド
- 16. 剣道MultiSelectを剣道UIグリッドでASP.NET MVCで使用する
- 17. 剣道グリッド列幅+スクロール可能
- 18. 剣道グリッドのフィルタリング可能なリストにカテゴリを追加できますか?
- 19. 剣道グリッド列データに基づいた列の整列
- 20. 剣道グリッド自動変更タイムゾーン
- 21. 剣道グリッド行選択変更イベント?
- 22. JSONとPHP5の剣道グリッド
- 23. 剣道DropDownListのグリッド検証
- 24. 剣道グリッドのForループ
- 25. 剣道UI動的にデータソース文字列(XML)を変更する
- 26. 剣道の剣道グリッド - 崩壊の問題
- 27. JSP剣道グリッド編集/追加春休みからのERROR応答剣道UI v2015.3.1111
- 28. 剣道モバイルドロワーにボックスの影を追加するには?
- 29. 剣道UIグリッドをリフレッシュする方法
- 30. データ追加時に剣道UIグリッドでページ分割が機能しない
謝罪をqtipヒントを追加しましたタイトル。タイトルは、このようなものでなければなりません。 "剣道のグリッドに動的コンテンツのツールチップを追加する"。 – Hari
あなたのソリューションを受け入れてみませんか? – Sampath