Kendo Grid memiliki fitur template. Dapat digunakan untuk kolom biasa maupun kolom command (edit, delete).
[code language=”javascript”]
<script id="command-template" type="text/x-kendo-template">
# if(Status == ‘@ApprovalNotificationStatus.REJECT’) { #
<a class="k-button-icon k-grid-edit" href="javascript:" title="Edit" onclick="editItem(#=Id #)"><span class="glyphicon glyphicon-edit"></span></a>
# } #
</script>
<script type="text/x-kendo-template" id="status-approval">
# if(Status == ‘@ApprovalNotificationStatus.REJECT’) { #
<a data-placement="bottom" href="javascript:" class="popover-reject text-danger" data-toggle="popover" data-trigger="focus" title="Feedback" data-content="#= ApprovalMessage #">#= StatusDescription #</a>
# } else if(Status == ‘@ApprovalNotificationStatus.APPROVE’) { #
<span class="text-success">#= StatusDescription #</span>
# } else if(Status == ‘@ApprovalNotificationStatus.WAITING_FOR_APPROVAL’) { #
<span class="text-info">#= StatusDescription #</span>
# } #
</script>
$("#grid").kendoGrid({
//…
dataBound: function (e) {
$(‘[data-toggle="popover"]’).popover()
},
columns: [
{
field: "Status",
title: ‘Status Approval’,
template: kendo.template($("#status-approval").html()),
},
{
template: kendo.template($("#command-template").html()),
width: 65
}
],
});
[/code]