Composite Columns Bug

Radzen.Blazor Components
1

I just made two composite columns on the DataGridPage.razor in the blazor repository, but the colspans are wrong.

image
image1556×179 19.9 KB

@page "/datagrid"

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inject NorthwindContext dbContext

<h1>DataGrid</h1>

<p>Display tabular data with ease. Perform paging, sorting and filtering through Entity Framework without extra code.</p>

<RadzenExample Name="DataGrid" Heading="false">
    <RadzenDataGrid AllowFiltering="true" AllowCompositeDataCells=true AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="5" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
        Data="@employees" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
        <Columns>
            <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="70px" TextAlign="TextAlign.Center" />
            <RadzenDataGridColumn TItem="Employee" Title="Photo" Frozen="true" Sortable="false" Filterable="false" Width="60px" >
                <Template Context="data">
                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                </Template>
            </RadzenDataGridColumn>

            <RadzenDataGridColumn TItem=Employee Title="First group" Property="FirstName" Sortable=false Filterable=false>
                <Columns>
                    <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Frozen="true" Width="140px" />
                    <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="140px"/>
                </Columns>
            </RadzenDataGridColumn>

            <RadzenDataGridColumn TItem=Employee  Title="Second Group" Property="Title" Sortable=false Filterable=false>
                <Columns>
                    <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Job Title" Width="200px" />
                    <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title" Width="100px" />
                    <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="140px" />

                </Columns>
            </RadzenDataGridColumn>

            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" Width="200px" />
            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" Width="300px" />
        </Columns>
    </RadzenDataGrid>
</RadzenExample>
@code {
    IEnumerable<Employee> employees;

    protected override void OnInitialized()
    {
        employees = dbContext.Employees;
    }
}
2

Thanks for the report! We will do our best to include for this in our update before the end of the week.

3

Composite columns still has a bug, it worked with just 1 composite column, but adding a second composite column causes:

image
image1559×196 25.8 KB

@page "/datagrid"

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inject NorthwindContext dbContext

<h1>DataGrid</h1>

<p>Display tabular data with ease. Perform paging, sorting and filtering through Entity Framework without extra code.</p>

<RadzenExample Name="DataGrid" Heading="false">
    <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="5" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
        Data="@employees" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
        <Columns>
            <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="70px" TextAlign="TextAlign.Center" />
            <RadzenDataGridColumn TItem="Employee" Title="Photo" Frozen="true" Sortable="false" Filterable="false" Width="60px" >
                <Template Context="data">
                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Frozen="true" Width="140px" />
            
            <RadzenDataGridColumn TItem="Employee" Title="LastName & Title">
                <Columns>
                    <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="140px"/>
                    <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Job Title" Width="200px" />
                </Columns>
            </RadzenDataGridColumn>

            <RadzenDataGridColumn TItem="Employee" Title="TOC & BirthDate">
                <Columns>
                    <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title" Width="100px" />
                    <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="140px" />
                </Columns>
            </RadzenDataGridColumn>

            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" Width="200px" />
            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" Width="140px" />
            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" Width="300px" />
        </Columns>
    </RadzenDataGrid>
</RadzenExample>
@code {
    IEnumerable<Employee> employees;

    protected override void OnInitialized()
    {
        employees = dbContext.Employees;
    }
}
4

Just published update of Radzen.Blazor (3.14.9) with this issue fixed.

1 Like
5

I've noticed when using a Footer Template on a column inside a Composite Column, it does not render the footer.

6

Got any Solution for that???
I'm also facing the same issue

7

Hey @Owais_Raza,

Make sure you are using latest version of Radzen.Blazor. Here is how it looks our demo with footer templates for various columns:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenCard class="m-4" style="display: flex; align-items: center; gap: 0.5rem">
    <RadzenCheckBox @bind-Value=@allowCompositeDataCells Name="CheckBox1" TValue="bool" Change=@(args => grid.Reload())/>
    <RadzenLabel Text="Allow composite data cells" Component="CheckBox1" />
</RadzenCard>
<RadzenDataGrid @ref="grid" AllowGrouping=true AllowCompositeDataCells="@allowCompositeDataCells" AllowSorting="true" AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand"  FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true"  
    Data="@employees" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" Style="height:420px" class="m-4" HideGroupedColumn="false" >
    <Columns>
        <RadzenDataGridColumn Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn Title="Photo" Frozen="true" Sortable="false" Filterable="false" Width="80px" TextAlign="TextAlign.Center" >
            <Template Context="data">
                <RadzenImage Path="@data.Photo" class="rz-gravatar" AlternateText="@(data.FirstName + " " + data.LastName)" />
            </Template>
            <FooterTemplate>
                Photo
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Title="Title" Property="TitleOfCourtesy" Filterable=@allowCompositeDataCells Sortable=@allowCompositeDataCells Width="820px">
            <Columns>
                <RadzenDataGridColumn Property="FirstName" Title="FirstName" Width="480px" Filterable=@allowCompositeDataCells Sortable=@allowCompositeDataCells>
                    <Columns>
                        <RadzenDataGridColumn Property="Title" Title="Job Title" Width="200px">
                            <FooterTemplate>
                                Title
                            </FooterTemplate>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="140px" />
                        <RadzenDataGridColumn Property="HireDate" Title="Hire Date" FormatString="{0:d}" Width="140px" />
                    </Columns>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn Property="LastName" Title="LastName" Width="200px" Filterable=@allowCompositeDataCells Sortable=@allowCompositeDataCells>
                    <Columns>
                        <RadzenDataGridColumn Property="Address" Title="Address" Width="200px">
                            <FooterTemplate>
                                Address
                            </FooterTemplate>
                        </RadzenDataGridColumn>
                    </Columns>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn Property="City" Title="City" Width="140px" />
            </Columns>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="Region" Title="Region" Width="140px" />
        <RadzenDataGridColumn Property="PostalCode" Title="Postal Code" Width="140px" />
        <RadzenDataGridColumn Property="Country" Title="Country" Width="140px" />
        <RadzenDataGridColumn Property="HomePhone" Title="Home Phone" Width="140px" />
        <RadzenDataGridColumn Property="Extension" Title="Extension" Width="140px" />
        <RadzenDataGridColumn Property="Notes" Title="Notes" Width="300px" />
    </Columns>
</RadzenDataGrid>

@code {
    bool allowCompositeDataCells = false;
    RadzenDataGrid<Employee> grid;
    IEnumerable<Employee> employees;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = dbContext.Employees;
    }
}

image
image1920×1080 167 KB