Loading indicator for the Grid with auto height

10 posts, 1 answers
  1. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 14 Feb 2014 Link to this post

    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 18 Feb 2014 Link to this post

    Thank you Dimo!
    This is a perfect solution.
    -Pavel
  5. Chad
    Chad avatar
    8 posts
    Member since:
    Aug 2014

    Posted 18 Aug 2014 in reply to Quotient Link to this post

    can you please give a code example of this?
  6. Chad
    Chad avatar
    8 posts
    Member since:
    Aug 2014

    Posted 18 Aug 2014 in reply to Chad Link to this post

    <style scoped>
    .k-grid-content {
    min-height: 150px;
    }
    </style>
  7. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 21 Jul 2015 in reply to Chad Link to this post

    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.
  8. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 21 Jul 2015 in reply to Will Link to this post

    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.
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Jul 2015 Link to this post

    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!
  10. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 22 Jul 2015 in reply to Dimo Link to this post

    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.
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Jul 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready