When hiding headers with grouping enabled, the group header text overwrites the expand/collapse carat

[Dave]

I tried applying the style recommended in the "Hide DataGrid Header in Blazor DataGrid Component" article (https://blazor.syncfusion.com/documentation/datagrid/how-to/hide-grid-header) to the code in the Grouping Demo (https://blazor.syncfusion.com/webapp/demos/datagrid/grouping). The result has the left grouping column collapse and the group header text overwriting the expand/collapse caret. Is there a way to have grouping work with column headers hidden? Thanks.

[Prathap Senthil]

Hi Dave,

Based on the reported problem, we were able to reproduce the issue. This behavior occurs because, when using the grouping feature, data operations are performed after the data is bound to the grid. Applying CSS before the grouping operation leads to the problem. Therefore, we suggest enabling CSS customization when the DataBound event is triggered to resolve the issue. Kindly refer to the code snippet and sample below for your reference.

 

            <SfGrid DataSource="@GridData" Height="400" AllowGrouping="true"AllowSorting="true" AllowPaging="true">

                <GridGroupSettings Columns="@GroupedColumns"></GridGroupSettings>

    <GridEvents DataBound="DataBoundHandler" TValue="Orders"></GridEvents>

                <GridColumns>

        <GridColumn Field=@nameof(Orders.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

                    <GridColumn Field=@nameof(Orders.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>

        <GridColumn Field=@nameof(Orders.OrderDate) HeaderText=" Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GridColumn>

        <GridColumn Field=@nameof(Orders.OrderTime) HeaderText="Order Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GridColumn>

        <GridColumn Field=@nameof(Orders.Freight) Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowGrouping=false Width="120"></GridColumn>

                </GridColumns>

            </SfGrid>

 

@if (IsGrouped)

{

    <style>

        .e-grid .e-gridheader  .e-columnheader {

            display: none;

        }

    </style>

}

 

 

 

@code {

    public string[] GroupedColumns = new string[] { "CustomerID" };

 

 

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

 

 

    public void DataBoundHandler()

    {

      

        if(IsGrouped==false){

            IsGrouped = true;

        }

    }

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

Additional Reference:
https://blazor.syncfusion.com/documentation/datagrid/events#databound
https://blazor.syncfusion.com/documentation/datagrid/grouping

Regards,
Prathap Senthil

[Dave]

Thank you for the explanation. I tried to put your grid example inside the Content template of a Dialog component but experience the same group header problem I originally reported. Is there a way to make your example work inside of a Dialog? Thanks.

[Prathap Senthil]

Based on the reported problem, we suggest enabling CSS customization when opening the dialog to resolve the issue. Kindly refer to the code snippet and sample below for your reference.

<SfDialog  Target="#target" Width="1000px"   ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="true" IsModal="true">

        <DialogTemplates>

            <Header> Dialog </Header>

            <Content>

                <SfGrid DataSource="@GridData" Height="100%" AllowGrouping="true" AllowSorting="true" AllowPaging="true">
-------------------------------------------------------

                </SfGrid>

            </Content>

        </DialogTemplates>

  </SfDialog>

private bool Visibility { get; set; } = false;
public bool IsGrouped { get; set; } = false;

 

public void DataBoundHandler()

{

 

     if (IsGrouped == false && Visibility)

     {

         IsGrouped = true;

     }

}

Modified sample: https://blazorplayground.syncfusion.com/embed/BDLoZVMQLmLYKtrp?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Dave]

Thank you for the updated example. The expand/collapse UI works in the dialog. I see, however, that column headers appear on first rendering (then disappear when I click on one). Is there a way to have the column headers not appear at all? Thanks again.

[Prathap Senthil]

Sorry for the inconvenience ,

Based on the reported issue, when the AllowPrerender property is enabled in the dialog, the DataGrid will be pre-rendered. As a result, the DataBound event will be triggered before the dialog opens. In this case, we suggest using the Dialog Opened event to apply custom CSS and achieve your requirement.

 

<SfDialog Target="#target"  Width="1000px" ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="true"   IsModal="true">

    <DialogEvents Opened="@OpenedHandler" Closed="@ClosedHandler"></DialogEvents>

@if (IsGrouped)

{

    <style>

        .e-grid .e-gridheader .e-columnheader {

        display: none;

        }

    </style>

}

 

<style>

    #target {

    min-height: 450px;

    height: 100%;

    }

</style>

 

@code {

    public string[] GroupedColumns = new string[] { "CustomerID" };

 

 

    private bool Visibility { get; set; } = false;

    private void OnBtnClick()

    {

        this.Visibility = true;

    }

 

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

 

    public void OpenedHandler(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

       IsGrouped = true;

    }

 

 

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

[Dave]

Prathap, your solution works perfectly, thanks.

[Prathap Senthil]

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

Please get back to us if you have further queries.