Pending Review
Last Updated: 19 Feb 2020 14:20 by ADMIN
Vijaya
Created on: 13 Feb 2020 00:18
Category: Kendo UI® for Vue
Type: Bug Report
0
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>
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