How to make KendoGrid horizontal scroll bar stay at bottom of screen if table is too long?

6 posts, 1 answers
  1. Max
    Max avatar
    4 posts
    Member since:
    Oct 2020

    Posted 16 Oct 2020 Link to this post

    Dear Sir/Madam,

    We use a KendoGrid at the moment. It is good. And currently we try to keep horizontal scroll bar be visualable if table is too long. We do not want to horizontal scroll bar at the bottom all the time, otherwise user have to move to the bottom first then could scroll. Is it possible to do this? I checked document and did not find a good way. Can you give me some suggestions?

     

    Thanks.

    Regards,
    Max

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 16 Oct 2020 Link to this post

    Hello, Max,

    The scrollbar is automatically rendered element by the browser when overFlow is set the scroll. Currently, we have no access to that element in order to style it or make it stick at the bottom of the viewport.

    What we can recommend in this case is to make the Grid height 100% and make it vertically scrollable. This will make the Grid to take all of the available space on the screen and the horizontal scrollbar will be always visible:

    https://stackblitz.com/edit/react-dkqkpf?file=app/main.jsx

    Let me know if you need more information on this matter.

    Regards,
    Stefan
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  3. Max
    Max avatar
    4 posts
    Member since:
    Oct 2020

    Posted 16 Oct 2020 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your solubtions. It works. I checked your demo using kendo-react-grid 3.18. And our version is 3.15. I tested height: 100% does not work. Do I have to upgrade to 3.18?

    Thanks.

    Regards,

    Max

  4. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 16 Oct 2020 Link to this post

    Hello, Max,

    This should not be related to the version.

    Using height 100% requires the parent element to have set height or height 100% up to the body:

    https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height

    https://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Max
    Max avatar
    4 posts
    Member since:
    Oct 2020

    Posted 16 Oct 2020 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your information. In fact, I already tried set parent height to 100%. Please check attached pic for detail. But still does not work for some reason.

    Regards,

    Max

     

  6. Max
    Max avatar
    4 posts
    Member since:
    Oct 2020

    Posted 16 Oct 2020 in reply to Stefan Link to this post

    Hi Stefan,

    This really work. I have to set all parents height to 100%

Back to Top