Grid Web UI

9 posts, 0 answers
  1. Rafael
    Rafael avatar
    63 posts
    Member since:
    Jul 2010

    Posted 24 Jan 2013 Link to this post

    How to change row's height in Kendo WebUI ?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 24 Jan 2013 Link to this post

    Hi Rafael, 

    You can achieve this using CSS. For example:

    .k-grid tbody tr{
        height: //....;
    }  

    Another option is to using a rowTemplate / altRowTemplate. For example: 
    <script id="template" type="text/x-kendo-template">
        <tr style="height: //...;">
             <td>//....</td>
             //....
        </tr>
    </script>
     
    <script>
    $("#grid").kendoGrid({
       //....
       rowTemplate: kendo.template($("#template").html())
    });
    Regards,
    Iliana Nikolova
    the Telerik team
    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. Rafael
    Rafael avatar
    63 posts
    Member since:
    Jul 2010

    Posted 24 Jan 2013 Link to this post

    Iliana, thanks for prompt reply

    Unfortunately I can not find .k-grid tbody tr neither in kendo.common.min.css nor in kendo.default.min.css
    could you please to clarify what CSS you are referring to?

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 24 Jan 2013 Link to this post

    Hi Rafael,

    In order to get the desired outcome you should just add the suggested CSS to the page where your Grid is. For the ways of inserting a style sheet you could check this article.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Binny
    Binny avatar
    7 posts
    Member since:
    Jul 2014

    Posted 21 Jul 2014 Link to this post

    tried it, Not working :(
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 22 Jul 2014 Link to this post

    Hello Binny,

    I tested both suggestions and they are working as expected:
    - Change rows height via CSS - example;
    - Change rows height using row template - example.
    Could you please modify one of the examples and demonstrate your current implementation - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your time and cooperation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ievgen
    Ievgen avatar
    7 posts
    Member since:
    Jan 2011

    Posted 24 Jul 2015 in reply to Iliana Nikolova Link to this post

    Iliana,

    Both CSS and Row Template examples do not work if I need row height less than 50px. I need to override cell padding, to make rows narrow, but then the grid does not fill all available space, half of it is empty:

    http://dojo.telerik.com/AqEXO ​

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 28 Jul 2015 Link to this post

    Hi Levgen,

    This outcome is due to height 800 which is set to the Grid - if you would like the grid to be as tall as the pageSize number of records please remove the defined height.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Alex Fuernsinn
    Alex Fuernsinn avatar
    5 posts
    Member since:
    Nov 2013

    Posted 08 Sep Link to this post

    Hi,

    i also had this issue and wanted to change row's height for KendoGrid. 

    The following solution worked for me:

    .k-grid table {
       table-layout: fixed;
    }
     
    .k-grid td{
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height:1em !important;
    }

    Regards,
    Alex Fürnsinn
    EnergieAllianz Austria GmbH

Back to Top
Kendo UI is VS 2017 Ready