Berikut adalah cara untuk menampilkan popover di dalam kendo grid:
Kendo grid
[code language=”javascript”]
$("#media-grid").kendoGrid({
//…
columns: [
//…
{
field: ‘SlaEnd’,
title: ‘Target Selesai Sesuai SLA’,
template: kendo.template($("#slaEndTemplate").html()),
},
//…
],
save: function (e) {
//kamus
var attribute = e.container.find("input[name=MediaName]").data("kendoComboBox");
var grid = this;
//algoritma
setTimeout(function () {
//grid.refresh();
sortMediaGrid();
grid.tbody.find(‘[data-toggle="popover"]’).kendoTooltip({
position: ‘top’,
width: 250
});
});
},
});
function getSlaEndText(mediaName, slaDays, slaEnd) {
var pendingMessage, slaEndText;
if (slaEnd === null || slaDays === null || slaDays === ‘0’) {
pendingMessage = getSlaEndPendingMessage(mediaName);
slaEndText = ‘pending <a href="javascript:" data-toggle="popover" title="’ + pendingMessage + ‘"><i class="fa fa-question-circle-o"></i></a>’;
} else {
slaEndText = kendo.toString(slaEnd, ‘@dfh.FullDateFormat’);
}
return slaEndText;
}
<script id="slaEndTemplate" type="text/x-kendo-template">
<span>
#= getSlaEndText(MediaName, SlaDays, SlaEnd) #
</span>
</script>
[/code]
Ketika load page pertama kali
[code language=”javascript”]
$(‘#media-grid’).find(‘[data-toggle="popover"]’).kendoTooltip({
position: ‘top’,
width: 250
});
[/code]
