2

In the cell's tooltip,I want to add some button or menu,such as open button.When I hover the mouse above the cell,the tooltip shows the button.When I click the button,it will open a window. Can Kendo grid can do that?

Lars Höppner
  • 18,252
  • 2
  • 45
  • 73
flower
  • 2,212
  • 3
  • 29
  • 44

1 Answers1

1

Here's how you would do it with JS; all you need to do is use the appropriate MVC wrappers (Html.Kendo().Grid(), @(Html.Kendo().Tooltip() and Html.Kendo().Window() (although you may need to use plain JS for the window if you want to use the jQuery click event)):

Grid:

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");

Tooltip:

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");

Window:

$(document).on("click", ".open", function () {
    var currentContent = currentDataItem.get("StatusText");
    $("<div>Current status: " + currentContent + "</div>").kendoWindow({
        modal: true
    }).getKendoWindow().center().open();
});

(demo)

Lars Höppner
  • 18,252
  • 2
  • 45
  • 73
  • When I click the open button,Can I show the row infomation in the window?And the window show the "string value" in the same row of the grid(like "some Text") ? – flower Apr 13 '14 at 06:14
  • sure; as you can see, we're already accessing the model for the current row in the tooltip's content method; all you need to do is store that model in a variable accessible to the function which sets up the window (in the demo, this would have to be global); I edited the answer to reflect that – Lars Höppner Apr 13 '14 at 15:11