Merge All Columns in a Parent Row in Syncfusion Blazor Hierarchy Grid Based on Data

[vipin]

I am using the Syncfusion Blazor Hierarchy Grid, and I have a requirement where, if all the data members of a parent row have default values, I need to merge all the columns in that row and display a custom message instead of the actual values.

Expected Behavior:

• If a parent row has only default values (e.g., Id is zero), all its columns should be merged into one.
• The merged row should display a message like "No data available for this row."
• Child grids should remain unaffected.
  
  I am using Blazor Server App and installed Syncfusion.Blazor package 27.1.56 version

[Prathap Senthil]

Hi Vipin,

Based on your requirement currently we do not have support for merging cells(row spanning and column spanning) in Grid. We have considered this 'Support for row spanning and column spanning (cell merging) in Blazor,' we have considered the requirement in our 2025 Volume 2 roadmap and it will be included in our Volume 2, 2025 wishlist. You can track the current status of your request, review the proposed resolution timeline, and reach out to us for any further inquiries through this link

Need to provide support for row spanning and column spanning(cell merging) in blazor in Blazor | Feedback Portal

We truly appreciate your understanding and continued support. Please let us know if you have any further questions.


However, in your scenario, we have achieved the requirement at the sample level through CSS customization. We used the RowDataBound event to identify the value as '0', then added a custom class to that row to meet your requirement. Kindly refer to the code snippet and sample provided below.

 

<SfGrid @ref="Grid" DataSource="@Employees">

    <GridTemplates>

        <DetailTemplate>

            @{

            }

        </DetailTemplate>

    </GridTemplates>

    <GridEvents RowDataBound="RowDataBoundHandler" TValue="EmployeeData"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn>

        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn>

    </GridColumns>

</SfGrid>

 

<style type="text/css" class="cssStyles">

   

 

  

    .e-grid .e-gridcontent .e-row.GridEmptyRow td.e-rowcell {

        text-indent: -9999px; /* Hides the original cell text */

    }

 

        .e-grid .e-gridcontent .e-row.GridEmptyRow td.e-rowcell::before {

            content: "No data available for this row.";

            position: absolute;

            left: 374px;

            pointer-events: none;

        }

</style>

 

@code {

    private SfGrid<EmployeeData> Grid;

    public List<EmployeeData> Employees { get; set; }

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

    protected override void OnInitialized()

    {

        Employees = EmployeeData.GetAllRecords();

        Orders = OrderData.GetAllRecords();

    }

    public void RowDataBoundHandler(Syncfusion.Blazor.Grids.RowDataBoundEventArgs<EmployeeData> args)

    {

        if (args.Data.EmployeeID == 0)

        {

            args.Row.AddClass(new string[] { "GridEmptyRow" });

        }

    }

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

Reference:
Events in Blazor DataGrid Component | Syncfusion

Regards,
Prathap Senthil