Kendo Grid Column Template

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]

Chandra Oemaryadi has written 244 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>