I am using Keno Grid in my VueJS project. I need to show spinner while loading data into grid. I followed the link https://stackblitz.com/edit/zr8vbd-xk73ps?file=index.html . This display the spinner

Progress® Kendo® UI for Vue Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Duplicated

Last Updated: 24 Sep 2020 07:43 by ADMIN

Vijaya

Created on: 13 Feb 2020 00:18

Category: Kendo UI® for Vue

Type: Bug Report

I am using Keno Grid in my VueJS project. I need to show spinner while loading data into grid. I followed the link https://stackblitz.com/edit/zr8vbd-xk73ps?file=index.html . This display the spinner

I am using Keno Grid in my VueJS project. I need to show spinner while loading data into grid. I followed the link https://stackblitz.com/edit/zr8vbd-xk73ps?file=index.html . This display the spinner until data loaded into Vue. How ever when there is no data to display I would like to display No records found message.

My Grid looks like this.

<Grid :data-items="pageViewModels"
      :pageable="true"
      :columns="gridData.columns"
      :skip="gridData.skip"
      :take="gridData.take"
      :total="gridData.total"
      @pagechange="onPageChange"
      @rowclick="onRowClick">
  <GridNoRecords>
    <div class="k-loading-mask margin-top-100">
      <span class='k-loading-text'>
      </span>
      <div class='k-loading-image'/>
      <div class='k-loading-color'/>
    </div>
  </GridNoRecords>

Duplicated

This item is a duplicate of an already existing item. You can find the original item here:

Show loading indicator for Vue Native Grid

1 comment

ADMIN

Ivan Danchev

Posted on: 19 Feb 2020 14:20

Hello,

Until a loading indicator is implemented in the Grid (there is a related feature request), showing one relies on the <grid-norecords> option. For the time being we can suggest showing both - the loading icon and the "No records found" message:

<Grid ref="grid"
      :style="{height: '440px'}"
      :data-items="gridData"
      :columns="columns">
    <grid-norecords>
      <div  class="k-loading-mask customPosition">
        <span class='k-loading-text'></span>
        <div class='k-loading-image'></div>
        <div class='k-loading-color'></div>
      </div>
      <div>
          <h3>No records found</h3>
      </div>
    </grid-norecords>
</Grid>

Regards,
Ivan Danchev
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items