Template Directives
You can specify the template options of data-bound container widgets as nested directives.
The following table provides information on the template directives that are supported by the Kendo UI widgets.
| WIDGET | SUPPORTED TEMPLATE DIRECTIVES |
|---|---|
| TreeMap | k-template |
| MobileListView |
k-header-template and k-template
|
| MobileScrollView |
k-empty-template and k-template
|
| Grid |
k-alt-row-template, k-detail-template, and k-row-template
|
| ListView |
k-edit-template, k-template, and k-alt-template
|
| Pager |
k-select-template and k-link-template
|
| PivotGrid |
k-column-header-template, k-data-cell-template, and k-row-header-template
|
| Scheduler |
k-all-day-event-template, k-date-header-template, k-event-template, k-major-time-header-template, and k-minor-time-header-template
|
| TreeView | k-template |
| Validator | k-error-template |
<div ng-app="app" ng-controller="MyCtrl">
<div kendo-list-view k-data-source="source">
<!-- the template (including the div tag itself) here will be assigned as a string to the `template` configuration option of the listview widget -->
<div class="product" k-template>
<img ng-src="https://demos.telerik.com/kendo-ui/content/web/foods/{{dataItem.ProductID}}.jpg" alt="{{dataItem.ProductName}} image" />
<h3>{{ dataItem.ProductName }}</h3>
<p>{{ dataItem.UnitPrice | currency:"USD$":0 }}</p>
</div>
</div>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
$scope.source = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 21
});
});
</script>