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

html

    <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>

See Also

• AngularJS Integration Overview
• Global Events