This is a migrated thread and some comments may be shown as answers.

Loading indicator for the Grid with auto height

9 Answers 693 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Quotient
Top achievements
Rank 1
Quotient asked on 14 Feb 2014, 07:45 PM
My grid configuration does not have "height" property. Which works great as it expands to the right height based on the number of records. 
However, while the data is being loaded, the grid shows only column headers and empty pagination bar with "no items to show" indicator. The loading indicator (spinner) is not visible as the height of the "k-grid-content" is zero. 
Is there any way to show the spinner while the grid data is loading? Maybe we can attach it to "k-grid k-widget" element? But how can I get handle of the events when data source starts and ends the data loading?
Thanks,
-Pavel

9 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 18 Feb 2014, 09:10 AM
Hi Pavel,

The built-in Grid loading indicator cannot be displayed / moved over another element. The easiest thing you can do is apply a min-height style to the k-grid-content class, so that the data area has never a zero height.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Quotient
Top achievements
Rank 1
answered on 18 Feb 2014, 05:59 PM
Thank you Dimo!
This is a perfect solution.
-Pavel
0
Chad
Top achievements
Rank 1
answered on 18 Aug 2014, 11:03 PM
can you please give a code example of this?
0
Chad
Top achievements
Rank 1
answered on 18 Aug 2014, 11:27 PM
<style scoped>
.k-grid-content {
min-height: 150px;
}
</style>
0
Will
Top achievements
Rank 1
answered on 21 Jul 2015, 07:01 PM
Thanks to Chad for his suggestion.  I'm using it but I'd suggest something like the min-height of one row (35px in my case) or else it looks REALLY ugly when there aren't enough rows to fill the space you've reserved.
0
Will
Top achievements
Rank 1
answered on 21 Jul 2015, 07:04 PM
IMHO: Telerik should do something like .k-grid-content.filter(":parent") to position the progress indicator.  Then we wouldn't have to mess with this KLUDGE.
0
Dimo
Telerik team
answered on 22 Jul 2015, 05:34 AM
Hello Will,

Applying a minimum height to the Grid rows is possible and easy, but it's not something that we enforce as a default style for all developers.

.k-grid tbody tr
{
   height: 35px;
}

Some notes on the above:

- the rule will work for both scrollable and non-scrollable Grids

- table row elements ignore min-height styles, so a height is used, which in this case will behave in the same way (i.e. if the contents cannot fit, the row will expand vertically)

- the tbody selector ensures that the rule does not influence the header row(s).

More information about the positioning of the loading indicator is available in the documentation. If there is a high-enough demand for it, we will reconsider the current behavior.

http://docs.telerik.com/kendo-ui/web/grid/appearance#grid-loading-indicator

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Will
Top achievements
Rank 1
answered on 22 Jul 2015, 09:38 AM
I think that either you misunderstood my suggestion or I wasn't clear in the way I stated it.  What I was trying to say is that the min-height for the .k-grid-content class should be the same as the height of just one row.  Just enough to show the indicator.  Otherwise, if the grid content area isn't filled by the available data, there is an ugly blank area under whatever rows appear.  E.g. say you use 150px and your row height is 35px. If only three rows are returned, then there will be a 45px blank area under the bottom row.
0
Dimo
Telerik team
answered on 22 Jul 2015, 12:02 PM
Hello Will,

Thanks for the clarification, now I understand what you mean. We will consider this.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Quotient
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Quotient
Top achievements
Rank 1
Chad
Top achievements
Rank 1
Will
Top achievements
Rank 1
Share this question
or