セルのツールチップに、開くボタンなどのボタンやメニューを追加したい。セルの上にマウスを置くと、ツールチップにボタンが表示されます。ボタンをクリックすると、ウィンドウが開きます。剣道グリッドはそれを行うことができますか?
JSでそれを行う方法は次のとおりです。(あなたが操作を行うために必要なすべては、適切なMVCラッパーを使用しHtml.Kendo().Grid()
、@(Html.Kendo().Tooltip()
そしてHtml.Kendo().Window()
あなたはjQueryのclickイベントを使用したい場合は、ウィンドウのプレーンなJSを使用する必要があるかもしれないが)():
グリッド:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "Id",
title: "Id",
filterable: false
}, {
field: "StatusText",
title: "String value"
}, {
field: "ToolTip",
title: "Tool tip column",
template: "<span class='tooltip'>#= data.ToolTip #</span>"
}]
}).data("kendoGrid");
ツールチップ:
var currentDataItem;
var toolTip = $('#grid').kendoTooltip({
filter: ".tooltip",
content: function (e) {
var row = $(e.target).closest("tr");
currentDataItem = grid.dataItem(row);
return "<div>Hi, this is a tool tip for id " + currentDataItem.Id + "! <br/> <button class='open'>Open window</button></div>";
}
}).data("kendoTooltip");
窓:
$(document).on("click", ".open", function () {
var currentContent = currentDataItem.get("StatusText");
$("<div>Current status: " + currentContent + "</div>").kendoWindow({
modal: true
}).getKendoWindow().center().open();
});
(デモ)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加