React Grid manual loading indicator

[Joe]

I'm using the Kendo React Grid (v 1.0.1). I wanted to show a load indicator manually on certain occasions, but couldn't find out how to do this.

Is there a way to programmatically turn it on/off?

CU, Joe

[Stefan]

Hello, Joe,

Currently, the loading indicator can only be rendered using custom logic to place the loading element over the desired element.

This is an example demonstrating how to achieve it for the Grid during requests:

https://www.telerik.com/kendo-react-ui/components/grid/advanced-examples/loading-indicator/

The team is also considering implementing it as a built-in feature for the Grid.

Regards,
Stefan
Progress Telerik

[Joe]

Works like a charm! Thanks, and sorry for not spotting this myself in the docs.

[Srinivas]

If the API Takes time, I still see NO records to display message. Anyway to avoid this please.

[Vessy]

Hi, Srinivas,

Can you elaborate a bit on the exact scenario when the message is not shown? It will be really helpful if you send me sample where I can reproduce the behavior that you are facing and examine the exact setup leading to it.

Regards,
Vessy

[Srinivas]

Very basic. We are loading the data for Kendo React Grid using back end api.  When the api is still loading we wil see "No Records Available" after the api finishes, every thing works great. Your example working great when we want to load second page, where second page is taking some time. You can simulate withe very long api call and you see the problem.

[Vessy]

Hello, Srinivas,

Thanks you for the clarification.

Basically, there are two possible ways to hide the "No records" message shown when the Grid is empty:

• you can set a white overlay to the loading panel wrapper that will hide the entire grid:
   - https://stackblitz.com/edit/react-amywbj-pigspg?file=app%2Fproducts-loader.jsx 
  

      <div className="k-loading-mask" style={{ backgroundColor: 'white' }}>
        ...
      </div>

• or you can hide the wrapper of the "No data" message with a similar CSS style:
   -  https://stackblitz.com/edit/react-amywbj-zbykt8?file=index.html 
  

              .k-grid-norecords-template, .k-grid-norecords  {
                  visibility: hidden;
              }

  
  
  

I hope the provided information will help you to achieve the target result.