검도 UI MVC에서 그리드의 셀 툴팁에 일부 버튼이 포함 된 사용자 정의 툴팁 방법은 무엇입니까?

Question

셀의 툴팁에 열린 버튼과 같은 버튼이나 메뉴를 추가하고 싶습니다. 셀 위를 마우스로 가리키면 툴팁에 버튼이 표시됩니다. 버튼을 클릭하면 창이 열립니다. 검도 그리드로 할 수 있습니까?

Answer 1

JS와 함께하는 방법은 다음과 같습니다.

그리드 :

당신이 할 필요가 (당신이 창에 대한 일반 JS을 사용해야 할 수도 있지만 당신이) 이벤트를 클릭 jQuery를 사용하려는 경우 ( Html.Kendo().Grid(), @(Html.Kendo().Tooltip() 및 Html.Kendo().Window()) 적절한 MVC 래퍼를 사용하는 것입니다

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(); 
}); 

(demo)