starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-03 21:29:20 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

RadzenGrid Header and Column auto-scaling #46

New Issue
Closed
opened 2026-01-29 17:30:41 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:30:41 +00:00
Owner
Copy Link

Originally created by @Karolaka on GitHub (Feb 24, 2021).

Describe the bug
While rendering Radzen Grid members, grid headers and columns sizes (width) are not related to each other.
It looks like separate components. Specific header and related column content is not in the same position.

To Reproduce
Steps to reproduce the behavior:

  1. Declare component with binding of TItem
  2. add element as nested in RadzenGrid
  3. add without setting of Width fixed option nested in Columns
  4. add nested in RadzenGridColumn
  5. add many without setting of Width fixed option nested in Columns (for example by using foreach loop
  6. add nested in RadzenGridColumn
  7. run application and display prepared table

    8. Expected behavior
    Expected behavior is to header and columns content be displayed in one vertical position. View should be rendered as Width = Auto setting would be set

    Screenshots
    image

    Desktop:

    • OS: Windows 10 Pro
    • Browser Chrome
    • Version 88.0.4324.182
Originally created by @Karolaka on GitHub (Feb 24, 2021). **Describe the bug** While rendering Radzen Grid members, grid headers and columns sizes (width) are not related to each other. It looks like separate components. Specific header and related column content is not in the same position. **To Reproduce** Steps to reproduce the behavior: 1) Declare <RadzenGrid> component with binding of TItem 2) add <Columns> element as nested in RadzenGrid 3) add <RadzenGridColumn> without setting of Width fixed option nested in Columns 4) add <HeaderTemplate> nested in RadzenGridColumn 5) add many <RadzenGridColumn> without setting of Width fixed option nested in Columns (for example by using foreach loop 6) add <Template Context="data"> nested in RadzenGridColumn 7) run application and display prepared table **Expected behavior** Expected behavior is to header and columns content be displayed in one vertical position. View should be rendered as Width = Auto setting would be set **Screenshots** ![image](https://user-images.githubusercontent.com/48926846/109014201-34629980-76b4-11eb-891e-9ac829fd37f2.png) **Desktop:** - OS: Windows 10 Pro - Browser Chrome - Version 88.0.4324.182
claunia commented 2026-01-29 17:30:42 +00:00
Author
Owner
Copy Link

@enchev commented on GitHub (Feb 25, 2021):

Hey @Karolaka ,

Can you post a code example? Take a note also the auto column width is not supported.

@enchev commented on GitHub (Feb 25, 2021): Hey @Karolaka , Can you post a code example? Take a note also the auto column width is not supported.
claunia commented 2026-01-29 17:30:42 +00:00
Author
Owner
Copy Link

@Karolaka commented on GitHub (Mar 1, 2021):

May I ask for opening this issue? Many thanks

I know that auto column width is not supported but is there any way to have headers and their columns content in one vertical position?
Or is there any plan to add scaling and proper displaying to RadzenGrid?

Please check attached code:

   <RadzenGrid AllowPaging="true"
                Count="_invalidDataResult.Response.TotalItemsCount"
                Data="@_invalidDataResult.Response.List"
                LoadData="@OnLoadData"
                PageIndex="_pageIndex"
                PageSize="_pageSize"
                ShowTotalItemsCount="true"
                TItem="InvalidDataResponse<ITranslatedEntityBase>"
                id="invalidDataRadzenGrid"
                AllowColumnResize="true">
        <Columns>
            <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>" CssClass="invalid-data-row-checkbox">
                <HeaderTemplate>
                    <RadzenCheckBox Disabled=!_typeNameEnable @bind-Value="_headerCheckbox" @onclick="AllCheckboxesChanged" TValue="bool" title="Select/deselect all" Style="margin: 10px;" />
                </HeaderTemplate>
                <Template Context="data">
                    @if (!_selectedItems.ContainsKey(_pageIndex))
                    {
                        _selectedItems.Add(_pageIndex, _invalidDataResult.Response.List.ToDictionary(x => x.Id, y => y.DataStatus == InvalidDataStatus.Rejected));
                    }
                    @if (_selectedItems.ContainsKey(_pageIndex) && _selectedItems[_pageIndex].ContainsKey(data.Id))
                    {
                        <RadzenCheckBox Disabled=!_typeNameEnable @bind-Value="_selectedItems[_pageIndex][data.Id]" TValue="bool" title="Select/deselect for rejection" Style="margin: 10px;" />
                    }
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>">
                <Template Context="data">
                    @(_invalidDataResult.Response.List.IndexOf(data) + 1 + (_pageIndex - 1) * _pageSize)
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>">
                <Template Context="data">
                    <RadzenButton Outlined="true" Class="btn-primary mdc-button--outlined" title="Edit Single Item" Click="EditSingle" />
                    <RadzenButton Outlined="true" Class="btn-primary mdc-button--outlined" title="Edit Multiple Items" Click="EditMultiple" />
                </Template>
            </RadzenGridColumn>
            @foreach (var column in _columns)
            {
                <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>" Property="@column.PropertyName" Title="@column.DisplayName" CssClass="no-action-cell">
                    <Template Context="data">
                        @data.Entity.GetEnumValueDescriptionOrPropertyValue(column.PropertyName)
                    </Template>
                </RadzenGridColumn>
            }
        </Columns>
    </RadzenGrid>
@Karolaka commented on GitHub (Mar 1, 2021): May I ask for opening this issue? Many thanks I know that auto column width is not supported but is there any way to have headers and their columns content in one vertical position? Or is there any plan to add scaling and proper displaying to RadzenGrid? Please check attached code: <RadzenGrid AllowPaging="true" Count="_invalidDataResult.Response.TotalItemsCount" Data="@_invalidDataResult.Response.List" LoadData="@OnLoadData" PageIndex="_pageIndex" PageSize="_pageSize" ShowTotalItemsCount="true" TItem="InvalidDataResponse<ITranslatedEntityBase>" id="invalidDataRadzenGrid" AllowColumnResize="true"> <Columns> <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>" CssClass="invalid-data-row-checkbox"> <HeaderTemplate> <RadzenCheckBox Disabled=!_typeNameEnable @bind-Value="_headerCheckbox" @onclick="AllCheckboxesChanged" TValue="bool" title="Select/deselect all" Style="margin: 10px;" /> </HeaderTemplate> <Template Context="data"> @if (!_selectedItems.ContainsKey(_pageIndex)) { _selectedItems.Add(_pageIndex, _invalidDataResult.Response.List.ToDictionary(x => x.Id, y => y.DataStatus == InvalidDataStatus.Rejected)); } @if (_selectedItems.ContainsKey(_pageIndex) && _selectedItems[_pageIndex].ContainsKey(data.Id)) { <RadzenCheckBox Disabled=!_typeNameEnable @bind-Value="_selectedItems[_pageIndex][data.Id]" TValue="bool" title="Select/deselect for rejection" Style="margin: 10px;" /> } </Template> </RadzenGridColumn> <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>"> <Template Context="data"> @(_invalidDataResult.Response.List.IndexOf(data) + 1 + (_pageIndex - 1) * _pageSize) </Template> </RadzenGridColumn> <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>"> <Template Context="data"> <RadzenButton Outlined="true" Class="btn-primary mdc-button--outlined" title="Edit Single Item" Click="EditSingle" /> <RadzenButton Outlined="true" Class="btn-primary mdc-button--outlined" title="Edit Multiple Items" Click="EditMultiple" /> </Template> </RadzenGridColumn> @foreach (var column in _columns) { <RadzenGridColumn TItem="InvalidDataResponse<ITranslatedEntityBase>" Property="@column.PropertyName" Title="@column.DisplayName" CssClass="no-action-cell"> <Template Context="data"> @data.Entity.GetEnumValueDescriptionOrPropertyValue(column.PropertyName) </Template> </RadzenGridColumn> } </Columns> </RadzenGrid>
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#46
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?