How to customize Density

[Sandro Rizzetto]

I wonder if you have some setting to render a datagrid in "compact" mode like other competitors have (eg. this)

Or in alternative which e-class should I override to achieve the same result

Thanks in advance

[Prathap Senthil]

Hi Sandro Rizzetto,

Based on your requirement, we suggest using the following approach to achieve it, change row height using the RowHeight property and customize the grid header using CSS. Kindly refer to the code snippet and sample below for your reference.

 

    <SfButton class="e-btn e-small" @onclick="() => ChangeDefault()">Default</SfButton>

    <SfButton class="e-btn e-small" @onclick="() => ChangeCompact()">Compact</SfButton>

</div>

 

<div style="padding-top:20px">

    <SfGrid @ref="Grid" DataSource="@Orders" RowHeight="@RowHeightValue"  AllowPaging="true" >

        <GridColumns>

            <GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

            <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn>

            <GridColumn Field="OrderDate" HeaderText="Order Date" Width="130" Type="ColumnType.Date" Format="dd/MM/yyyy" TextAlign="TextAlign.Right"></GridColumn>

            <GridColumn Field="Freight" HeaderText="Freight" Width="120" Format="C2" TextAlign="TextAlign.Right"></GridColumn>

            <GridColumn Field="ShippedDate" HeaderText="Shipped Date" Width="140" Type="ColumnType.Date" Format="dd/MM/yyyy" TextAlign="TextAlign.Right"></GridColumn>

            <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn>

        </GridColumns>

    </SfGrid>

</div>

 

@if (isHeader)

{

    <style>

        .e-grid .e-headercelldiv {

            height: 24px;

        }

 

    </style>

}

 

 

@code {

    private SfGrid<OrderData> Grid;

    public bool isHeader { get; set; } = false;

    public List<OrderData> Orders { get; set; }

    public int RowHeightValue { get; set; } = 34; // Default height.

 

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

    }

 

    private void ChangeDefault()

    {

        isHeader = false;

        RowHeightValue = 34;

        Grid.Refresh(); // Refresh the Grid to apply the new row height.

    }

    private void ChangeCompact()

    {

        isHeader = true;

        RowHeightValue = 24; //here you can customize based on your need

        Grid.Refresh(); // Refresh the Grid to apply the new row height.

    }

}

Sample:

https://blazorplayground.syncfusion.com/embed/BXhesVsIrbFFtMXH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5\

Demo: https://blazor.syncfusion.com/demos/datagrid/row-height?theme=fluent2

Reference:

Row in Blazor DataGrid | Syncfusion
Syncfusion Blazor DataGrid Styling Guide with CSS and Theme Studio

Regards,
Prathap Senthil

[Sandro Rizzetto]

Thanks; works very well...

Any suggestion to get the pager a little smaller? Or to have few pages (eg. 5 instead 8) before the ...  ?

[Naveen Palanivel]

Hi Sandro Rizzetto

We would like to inform you that we have provided the option to set the page count on our end to control the number of pages displayed in the pager section. We have already discussed similar topics in detail in our documentation. Kindly refer to the documentation for your reference.

Documentation: https://blazor.syncfusion.com/documentation/datagrid/paging#change-the-page-count

Sample : https://blazorplayground.syncfusion.com/LXBoMhWHAkEDprNk

    private void ChangeDefault()

    {

        isHeader = false;

        RowHeightValue = 34;

        Grid.PageSettings.PageCount = 8;

        Grid.Refresh(); // Refresh the Grid to apply the new row height.

    }

    private void ChangeCompact()

    {

        isHeader = true;

        RowHeightValue = 24; //here you can customize based on your need

        Grid.PageSettings.PageCount = 5; // here you can customize the page count

        Grid.Refresh(); // Refresh the Grid to apply the new row height.

    }

Please let us know if you have any concerns.

Regards,
Naveen

[Sandro Rizzetto]

Perfect, thanks

[Prathap Senthil]

Thanks for the update, we are happy to hear that the provided information was helpful. We are closing the thread now.