The height of Grid in the dialog is incorrect

9 posts, 0 answers
  1. Nick
    Nick avatar
    9 posts
    Member since:
    Oct 2018

    Posted 01 Nov 2018 Link to this post

    I added a kendo grid in the kendo dialog, there were two rows in the grid, the grid's height didn't auto fill the dialog, its height would be correct if I click the header of a column. I attached the screenshot.Is there any one to tell me how to solve it? Thanks

     

     

  2. Eyup
    Admin
    Eyup avatar
    3757 posts

    Posted 01 Nov 2018 Link to this post

    Hi Nick,

    The grid is probably getting affected by the container (window) height. You can try to subscribe to the open event handler of the window:
    https://docs.telerik.com/kendo-ui/api/javascript/ui/window/events/open

    And refresh the grid or set its height manually:
    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/refresh

    You can give it a try and let me know if it works for you.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Nick
    Nick avatar
    9 posts
    Member since:
    Oct 2018

    Posted 01 Nov 2018 in reply to Eyup Link to this post

    Hi Eyup, thanks for your reply, but it doesn't work. And I tried to refresh when initOpen for the dialog, still not work. I don't want to set its height manually when the dialog shows up.
  4. Eyup
    Admin
    Eyup avatar
    3757 posts

    Posted 05 Nov 2018 Link to this post

    Hello Nick,

    Could you modify the following dojo sample to demonstrate the specific window configuration and send it back to us?
    This will enable us to reproduce the same issue locally and provide more precise and accurate suggestions.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Eyup
    Admin
    Eyup avatar
    3757 posts

    Posted 05 Nov 2018 Link to this post

    Hello Nick,

    Sorry, here is the dojo link:
    https://dojo.telerik.com/UyOgIfaf/4

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Nick
    Nick avatar
    9 posts
    Member since:
    Oct 2018

    Posted 07 Nov 2018 in reply to Eyup Link to this post

    Hi Eyup, I did some changes in the dojo page, same issue as I met.
  7. Nick
    Nick avatar
    9 posts
    Member since:
    Oct 2018

    Posted 07 Nov 2018 in reply to Nick Link to this post

    Sorry for missing the new dojo link: https://dojo.telerik.com/UyOgIfaf/13
  8. Eyup
    Admin
    Eyup avatar
    3757 posts

    Posted 09 Nov 2018 Link to this post

    Hi Nick,

    Thanks for the sample. I am able to reproduce the issue and will get back to you with the solution today.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Eyup
    Admin
    Eyup avatar
    3757 posts

    Posted 09 Nov 2018 Link to this post

    Hello Nick,

    Apparently, the container holding the items:
    <div class="k-grid-content k-auto-scrollable">
     
    is getting its height based on the height of its parent container, which is the div element representing the grid:
    <div id="parametersGrid" data-role="grid" class="k-grid k-widget k-display-block k-editable" style="height: 400px;">

    The issue is that initially the grid is not visible and thus the scrollable container lacks its height which would have been calculated depending on the grid's height.

    To resolve the problem, you can set this height manually:
    .k-grid > div.k-grid-content.k-auto-scrollable
    {
      height: 328px;
    }

    Here is the modified version of the dojo sample:
    https://dojo.telerik.com/UyOgIfaf/15

    Alternatively, you can use this:
    .k-grid > div.k-grid-content.k-auto-scrollable
    {
      height: calc(100% - 72px);
    }

    That should do the trick. 

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top