Kendo UI MVCのグリッドのセルツールチップにボタンを含めるなど、ツールチップをカスタマイズするにはどうすればよいですか?

セルのツールチップに、開くボタンなどのボタンやメニューを追加したい。セルの上にマウスを置くと、ツールチップにボタンが表示されます。ボタンをクリックすると、ウィンドウが開きます。剣道グリッドはそれを行うことができますか?

LarsHöppner

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]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ