NoRecordsTemplateDirective

Represents the no-records template of the Grid. Provides an option to customize the
appearance of the item that is displayed when no data is present. To define the no-records template,
nest an <ng-template> tag with the kendoGridNoRecordsTemplate directive inside <kendo-grid>.

When the locked columns of the Grid are in use, the template is displayed in the non-locked part of the content.

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid [data]="data">
        <kendo-grid-column field="ProductID"></kendo-grid-column>
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice"></kendo-grid-column>
        <ng-template kendoGridNoRecordsTemplate>
           There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
        </ng-template>
      </kendo-grid>
  `
})

class AppComponent {
    public data = [];
    public refresh() {
      this.data = [{
           "ProductID": 1,
           "ProductName": "Chai",
           "UnitPrice": 18.0000,
           "Discontinued": false,
           "Category": {
               "CategoryID": 1,
               "CategoryName": "Beverages",
               "Description": "Soft drinks, coffees, teas, beers, and ales"
           }
         }, {
           "ProductID": 2,
           "ProductName": "Chang",
           "UnitPrice": 19.0000,
           "Discontinued": false,
           "Category": {
               "CategoryID": 1,
               "CategoryName": "Beverages",
               "Description": "Soft drinks, coffees, teas, beers, and ales"
           }
         }, {
           "ProductID": 3,
           "ProductName": "Aniseed Syrup",
           "UnitPrice": 10.0000,
           "Discontinued": false,
           "Category": {
               "CategoryID": 2,
               "CategoryName": "Condiments",
               "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
           }
       }];

    }
}

Selector

[kendoGridNoRecordsTemplate]