How to make the grid more compact and tighter, what classes and methods to accomplish?

1 Answer 32 Views
Grid
Jstemper
Top achievements
Rank 2
Iron
Jstemper asked on 26 May 2022, 06:18 PM

I'm looking for suggestions on how to compress and tighten up the grid display. The end-user wants the grid to look more like an excel spreadsheet.

What CSS classes should I target? or is there a logical process for adjusting those sorts of things in the grid?

Also open to any articles or tips.

 

Thanks

 

1 Answer, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 31 May 2022, 11:27 AM

Hello John,

I have prepared an example for you where the Grid takes advantage of the elastic design and reduces the size of the font, and padding. Additionally, you can use the Width and Height parameters of the component to reduce its size. 

<style>
    div.smallerFont,
    div.smallerFont .k-filtercell * {
        font-size: 10px;
    }

        div.smallerFont .k-dropdown.k-header.k-dropdown-operator {
            width: calc(8px + 2em) !important;
        }

    div.smallerFont .k-grid-table td {
        padding: 8px;
    }
</style>

<TelerikGrid Data="@GridData"
             Pageable="true"
             Class="smallerFont"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Field="Name" Title="Product Name" />
        <GridColumn Field="Price" />
        <GridColumn Field="@(nameof(Product.Released))" />
        <GridColumn Field="@(nameof(Product.Discontinued))" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Product> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 30).Select(x => new Product
        {
            Id = x,
            Name = "Product name " + x,
            Price = (decimal)(x * 3.14),
            Released = DateTime.Now.AddMonths(-x).Date,
            Discontinued = x % 5 == 0
        }).ToList();

        base.OnInitialized();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Jstemper
Top achievements
Rank 2
Iron
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or