How to make RadzenDataGrid have a width of the page and have the scroll bar in the table instead of the browser window

Radzen.Blazor Components
1

Currently my RadzenDataGrid will not auto-resize as the window resizes and I'm not sure how to get it to. I'd like the data grid to have scroll columns instead of the whole window.

<RadzenDataGrid
                class="StandingsDataGrid"
                @ref="GameDataGridObject"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                AllowSorting="true"
                Data="@CurrentWeekPicks"
                TItem="SpreadWeekPick"
                AllowColumnResize="true"
                AllowPaging="true">
        <Columns>
            <RadzenDataGridColumn TItem="SpreadWeekPick" Frozen="true">
                <HeaderTemplate>
                    <RadzenText TextStyle="TextStyle.H6">User</RadzenText>
                </HeaderTemplate>
                <Template Context="data">
                    <div class="CurrentUser">
                        @this.GetUsernameFromUserId(data.UserId)
                    </div>
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="SpreadWeekPick" Frozen="@weekScoreFrozen">
                <HeaderTemplate>
                    <RadzenCheckBox @bind-Value="weekScoreFrozen" title="Pin/Unpin this column" />
                    <div class="CurrentUserScore">
                        Pts / Max
                    </div>
                </HeaderTemplate>
                <Template Context="data">
                    <div class="CurrentUserScore">
                        @this.GetScoreDescription(data)
                    </div>
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="SpreadWeekPick" Frozen="@seasonScoreFrozen">
                <HeaderTemplate>
                    <RadzenCheckBox @bind-Value="seasonScoreFrozen" title="Pin/Unpin this column" />
                    <div class="CurrentLeaguePoints">
                        Season Points
                    </div>
                </HeaderTemplate>
                <Template Context="data">
                    <div class="CurrentUserScore">
                        @this.GetPointsInLeague(CurrentLeague, data.UserId)
                    </div>
                </Template>
            </RadzenDataGridColumn>
            @foreach (var game in CurrentActiveGames)
            {
                <RadzenDataGridColumn TItem="SpreadWeekPick">
                    <HeaderTemplate>
                        <div class="GameHeader @GetGameHeaderClass(game)">
                            <div class="AwayTeam">
                                @game.AwayTeam.Abbreviation
                                <div class="AwayScore">
                                    @game.Result.AwayScore
                                </div>
                                <div class="TeamIcon">
                                    <img src="@game.AwayTeam.GetTeamIconPath()" alt="@game.AwayTeam.Name Helmet" />
                                </div>
                            </div>
                            <div class="HomeTeam">
                                @game.HomeTeam.Abbreviation
                                <div class="HomeScore">
                                    @game.Result.HomeScore
                                </div>
                                <div class="TeamIcon">
                                    <img src="@game.HomeTeam.GetTeamIconPath()" alt="@game.HomeTeam.Name Helmet" />
                                </div>
                            </div>
                            <div class="Spread">
                                @game.CurrentSpread.HomeTeamSpread()
                            </div>
                            <div class="GameStatus">
                                @game.Result.Status
                            </div>
                        </div>
                    </HeaderTemplate>
                    <Template Context="data">
                        <div class="UserPick">
                            @GetPickDescription(game, data)
                        </div>
                    </Template>
                </RadzenDataGridColumn>
            }
        </Columns>
    </RadzenDataGrid>
<style>
    .StandingsDataGrid {
        width: 100%;
    }
    .HomeTeam,
    .AwayTeam {
        margin-left: 1px;
        margin-right: auto;
        margin-top: 1px;
        text-align: left;
        padding: 0px 5px;
        width: 6em !important;
    }

    .HomeScore,
    .AwayScore {
        float: right;
        margin-right: 1px;
        width: 15px;
    }

    .HomeTeam {
        border-bottom: solid;
    }

    .CurrentUserScore {
        font-weight: 700;
    }

    .CurrentUserScore,
    .UserPick {
        text-align: left;
    }

    .Spread,
    .GameStatus {
        text-align: center;
    }

    .PickSuccess {
        color: green;
        font-weight: 700;
    }

    .PickFailure {
        color: red;
        font-weight: 700;
    }

    .GameHeader {
        font-weight: 700;
    }

    .GameFinal {
        background-color: #474747;
        color: white;
    }

    .rz-grid-table {
        width:auto; 
    }

    .superscript {
        vertical-align: super;
        position: relative;
        top: -0.5em;
        font-size: 60%;
        display: inline;
    }

</style>
2

Hi @etriebe,

You need to set Width to each RadzenDataGridColumn. See this demo for reference - Blazor DataGrid commponent with code-less paging, sorting and filtering of IQueryable data sources.

RadzenDataGrid should auto-resize as the window resizes unless it is wrapped in a parent container with a fixed width. RadzenDataGrid always occupies the whole available width of the parent container.

3

Setting the width of the grid to 100% could also be needed:

<RadzenDataGrid style="width: 100%" ...>
4

I tried both of those things. The grid is now resizing, but not respecting my column width attributes or even column min-width.

@page "/weekstandings/{LeagueId}/{WeekNumber}"
@using System.Linq.Dynamic.Core

<PageTitle>Week #@WeekNumber Standings</PageTitle>

@if (!GameInformationLoaded.HasValue)
{
    <p><em>Loading...</em></p>
}
else
{
    <RadzenDataGrid
                class="StandingsDataGrid"
                @ref="GameDataGridObject"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                AllowSorting="true"
                Data="@CurrentWeekPicks"
                TItem="SpreadWeekPick"
                AllowColumnResize="true"
                AllowPaging="true"
                style="width: 100%">
        <Columns>
            <RadzenDataGridColumn TItem="SpreadWeekPick" Frozen="true" Width="75px">
                <HeaderTemplate>
                    <RadzenText TextStyle="TextStyle.H6">User</RadzenText>
                </HeaderTemplate>
                <Template Context="data">
                    <div class="CurrentUser">
                        @this.GetUsernameFromUserId(data.UserId)
                    </div>
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="SpreadWeekPick" Frozen="@weekScoreFrozen" Width="25px">
                <HeaderTemplate>
                    <RadzenCheckBox @bind-Value="weekScoreFrozen" title="Pin/Unpin this column" />
                    <div class="CurrentUserScore">
                        Pts / Max
                    </div>
                </HeaderTemplate>
                <Template Context="data">
                    <div class="CurrentUserScore">
                        @this.GetScoreDescription(data)
                    </div>
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="SpreadWeekPick" Frozen="@seasonScoreFrozen" Width="25px">
                <HeaderTemplate>
                    <RadzenCheckBox @bind-Value="seasonScoreFrozen" title="Pin/Unpin this column" />
                    <div class="CurrentLeaguePoints">
                        Season
                    </div>
                </HeaderTemplate>
                <Template Context="data">
                    <div class="CurrentUserScore">
                        @this.GetPointsInLeague(CurrentLeague, data.UserId)
                    </div>
                </Template>
            </RadzenDataGridColumn>
            @foreach (var game in CurrentActiveGames)
            {
                <RadzenDataGridColumn TItem="SpreadWeekPick" MinWidth="50px" Width="50px">
                    <HeaderTemplate>
                        <div class="GameHeader @GetGameHeaderClass(game)">
                            <div class="AwayTeam">
                                @game.AwayTeam.Abbreviation
                                <div class="AwayScore">
                                    @game.Result.AwayScore
                                </div>
                                <div class="TeamIcon">
                                    <img src="@game.AwayTeam.GetTeamIconPath()" alt="@game.AwayTeam.Name Helmet" />
                                </div>
                            </div>
                            <div class="HomeTeam">
                                @game.HomeTeam.Abbreviation
                                <div class="HomeScore">
                                    @game.Result.HomeScore
                                </div>
                                <div class="TeamIcon">
                                    <img src="@game.HomeTeam.GetTeamIconPath()" alt="@game.HomeTeam.Name Helmet" />
                                </div>
                            </div>
                            <div class="Spread">
                                @game.CurrentSpread.HomeTeamSpread()
                            </div>
                            <div class="GameStatus">
                                @game.Result.Status
                            </div>
                        </div>
                    </HeaderTemplate>
                    <Template Context="data">
                        <div class="UserPick">
                            @GetPickDescription(game, data)
                        </div>
                    </Template>
                </RadzenDataGridColumn>
            }
        </Columns>
    </RadzenDataGrid>
    <RadzenCard style="width: 100%">
        <RadzenText TextStyle="TextStyle.H6" Text="Legend" />
        <div class="superscript">1</div>
        <RadzenText TextStyle="TextStyle.Body1" Style="display: inline"
            Text="Spreads can be different based on when you have made your pick. If a spread has moved in a favorable direction, everyone benefits. If a spread moves in an unfavorable direction and you locked in at a better position, your pick will stay at the originally picked spread." />
    </RadzenCard>
    <RadzenCard style="width: 100%" Visible="@(!GameInformationLoaded.Value)">
        <RadzenText>You are not in any leagues currently. Join or create some to see them here!</RadzenText>
    </RadzenCard>
}
<style>
    .HomeTeam,
    .AwayTeam {
        margin-left: 1px;
        margin-right: auto;
        margin-top: 1px;
        text-align: left;
        padding: 0px 5px;
        width: 6em !important;
    }

    .HomeScore,
    .AwayScore {
        float: right;
        margin-right: 1px;
        width: 15px;
    }

    .HomeTeam {
        border-bottom: solid;
    }

    .CurrentUserScore {
        font-weight: 700;
    }

    .CurrentUserScore,
    .UserPick {
        text-align: left;
    }

    .Spread,
    .GameStatus {
        text-align: center;
    }

    .PickSuccess {
        color: green;
        font-weight: 700;
    }

    .PickFailure {
        color: red;
        font-weight: 700;
    }

    .GameHeader {
        font-weight: 700;
    }

    .GameFinal {
        background-color: #474747;
        color: white;
    }

    .superscript {
        vertical-align: super;
        position: relative;
        top: -0.5em;
        font-size: 60%;
        display: inline;
    }
</style>

For example, the columns will get fully squished and are unreadable as I resize the window.

image

5

A width of 50px is too narrow for a column. There is a 16px left/right padding in each column cell with material theme. That leaves 50px - 32px = 18px for the content. You should keep that in mind when setting a column width. A good column width would be between 150px and 200px.
image

Alternatively, you could set DataGrid Density to reduce the cell padding. See the density demo.

6

I've set density to Compact and even with changing the column width to 150px, it still doesn't do the scroll bars for the table like what I'm trying to achieve. I have it looking good with a default screen resolution, I'm just trying to ensure mobile works properly for small windows. I think it should be fine based on my emulator.