Grid Web UI

[Rafael]

How to change row's height in Kendo WebUI ?

[Iliana Dyankova]

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

[Rafael]

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?

[Iliana Dyankova]

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

[Binny]

tried it, Not working :(

[Iliana Dyankova]

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

 

 

[Ievgen]

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 ​

[Iliana Dyankova]

Hi ,

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

 

 

[Alex Fuernsinn]

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