New to Kendo UI for Vue? Start a free 30-day trial

GridNoRecords

Represents the GridNoRecords component which is rendered when the data property of the Grid is empty or null.

  <div id="app">
      <Grid
          :data-items="products"
          :columns="columns">
      <grid-norecords>
       There is no data available custom
       </grid-norecords>
      </Grid>
  </div>
<script>
      Vue.component('Grid', Grid);
      Vue.component('grid-norecords', GridNoRecords);
      new Vue({
          el: '#app',
          data: function () {
              return {
                 products: [
                   { 'foo': 'A1', 'bar': 'B1' },
                      { 'foo': 'A2', 'bar': 'B2' },
                      { 'foo': 'A3', 'bar': 'B2' }
                  ],
                  columns: [
                      { field: 'foo'},
                      { field: 'bar'}
                  ]
              };
          }
      });
  </script>

$props

GridNoRecordsProps

In this article

Not finding the help you need?