This is a migrated thread and some comments may be shown as answers.

How to set Grid row height?

3 Answers 1080 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 08 Jan 2019, 05:32 PM

I just started using the controls and started with the test app to learn. I can't find out how to set the row height. The row height from the test app is way to large. How do I adjust the row height?

<div class="row">
    <div class="col-xs-5 col-md-12">   
        @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>()
                                        .Name("grid")
                                        .Columns(columns =>
                                        {
                                            columns.Bound(p => p.OrderID).Filterable(false);
                                            columns.Bound(p => p.Freight);
                                            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                                            columns.Bound(p => p.ShipName);
                                            columns.Bound(p => p.ShipCity);
                                        })
                                        .Pageable()
                                        .Sortable()
                                        .Scrollable()
                                        .Filterable()
                                        .HtmlAttributes(new { style = "height:450px;" })
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .PageSize(20)
                                            .Read(read => read.Action("Orders_Read", "Grid"))
                                        )
        )
    </div>
</div>

3 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 10 Jan 2019, 02:09 PM
Hi Mark,

The row height of the Kendo UI Grid can be modified by using the following CSS rule:

<style>
  div.k-grid tbody tr{
    height: 40px;
  }
</style>


Kind regards,
Tsvetomir
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.
0
Mark
Top achievements
Rank 1
answered on 11 Jan 2019, 06:11 PM
I would like the row height to be small and just above and below the text. It seems if I set the value to anything below 40px there is no change.
1
Accepted
Vincent
Top achievements
Rank 1
Iron
answered on 13 Jan 2019, 03:35 PM
.k-grid td  { padding:2px}
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Mark
Top achievements
Rank 1
Vincent
Top achievements
Rank 1
Iron
Share this question
or