jquery - How to custom tooltip such as contains some button in grid's cell tooltip in Kendo UI MVC? -
in cell's tooltip,i want add button or menu,such open button.when hover mouse above cell,the tooltip shows button.when click button,it open window. can kendo grid can that?
here's how js; need use appropriate mvc wrappers (html.kendo().grid(), @(html.kendo().tooltip() , html.kendo().window() (although may need use plain js window if want use 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, tool tip 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)
Comments
Post a Comment