How to sync the height of locked table and scrollable table

4 posts, 0 answers
  1. Yajing
    Yajing avatar
    9 posts
    Member since:
    Nov 2016

    Posted 17 Oct 2017 Link to this post

    Hello,

    The Context: We have a grid that has locked content. But the problem is the height of each row is too large, so I want to reduce it. Adding css to tr doesn't work because kendo will add height attribute to the dom after _adjustRowsHeight.

     

    The solution I have is to adjust the height of the locked table and scollable table in dataBound function, but I want to sync the height of each row in the two tables after this. My question is: Is there a way to sync the height of locked table and the scrollable table without manually calling _adjustRowsHeight method?

     

    Best regards,

    Yajing

  2. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 19 Oct 2017 Link to this post

    Hello, Yajing,

    I made an example demonstrating how to control the rows height only CSS, which will not be overwritten by the _adjustRowsHeight method. It involves the modifying the tr and the td elements. Please have in mind that the selectors may vary depending on the Grid id:

    .k-grid td {
      font-size: 14px;       
      white-space:nowrap;
      line-height: 13px;
    }
     
    #grid .k-grid tr td{
      height: 15px
    }


    http://dojo.telerik.com/oCerA

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Yajing
    Yajing avatar
    9 posts
    Member since:
    Nov 2016

    Posted 19 Oct 2017 in reply to Stefan Link to this post

    Hello Stefan,

    If you inspect the element, you will find the height of the row is 22.55 which is not controlled by the line-height or height of the <td>.

    Best regards,

    Yajing

  4. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 23 Oct 2017 Link to this post

    Hello, Yajing,

    This is expected as there is padding styles in the cell and they are added to its height.

    In general, this is the approach which will allow modifying the Grid cell height and ensuring they will be the same height.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top