1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Customize group header text - Make Bold

Customize group header text - Make Bold

I am using EJ2 ASP.NET Core and have a grid with a grouped column. I would like to make the group header text bold.

5 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team November 16, 2020 05:59 AM UTC

Hi Michael, 
 
Greetings from Syncfusion support. 
 
Query: I am using EJ2 ASP.NET Core and have a grid with a grouped column. I would like to make the group header text bold. 
 
By using below CSS classes, you can customize the header text styles in the group drop area. 
 
 
<style> 
    .e-grid .e-groupdroparea span.e-grouptext { 
        font-weight: bold; 
    } 
</style> 
 
 
If you want to customize the grouped column’s header text in the headerCell, then you can achieve this by using following code in the dataBound event. 
 
 
 
<script> 
    function dataBound(args) { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        // get all the headercells in the Grid 
        var headercells = grid.element.querySelectorAll(".e-grid .e-headercell"); 
        for (var i=0; i < headercells.length; i++) { 
            if(headercells[i].getAttribute("aria-grouped") == "true") { 
              // add the custom class to the grouped header cell  
                headercells[i].classList.add("groupedcol"); 
            } 
        } 
    } 
</script> 
 
<style> 
    .e-grid th.e-headercell.groupedcol span.e-headertext { // select the grouped header cell 
        font-weight: bold; 
    } 
</style> 
 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

AP Ashwini Paranthaman Syncfusion Team November 17, 2020 06:12 AM UTC

From: Michael Casamento
Sent: Monday, November 16, 2020 9:31 AM
To: Syncfusion Support
Subject: Re: Syncfusion support community forum 159675, Customize group header text - Make Bold, has been updated. 


Hi  

Thanks for the reply but I tried your solution and it did not make the group header bold. Below is my code: 

<script> 
  
        function toolbarClick(args) { 
            var gridObj = document.getElementById("Grid").ej2_instances[0]; 
            if (args.item.id === 'Grid_excelexport') { 
                gridObj.excelExport(); 
            } 
        } 
  
        function created(e) { 
            // Hide column headers 
            var grid = document.getElementById("Grid").ej2_instances[0]; 
            grid.getHeaderContent().classList.add("e-custom"); 
        } 
  
        function dataBound(args) { 
  
            // Auto-fit column width 
            this.autoFitColumns(['ErrorDetails1', 'ErrorDetails2','ErrorDetails3']); 
  
            // Bold group headers 
            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
            var headercells = grid.element.querySelectorAll(".e-grid .e-headercell"); 
            for (var i = 0; i < headercells.length; i++) { 
                if (headercells[i].getAttribute("aria-grouped") == "true") { 
                    headercells[i].classList.add("groupedcol"); 
                } 
            } 
        } 
  
    </script> 
  
} 
  
<style> 
    .e-custom.e-gridheader { 
        visibility: hidden; 
        height: 0px; 
    } 
    .e-grid th.e-headercell.groupedcol span.e-headertext { 
        font-weight: bold; 
    } 
</style> 

Michael  


RS Rajapandiyan Settu Syncfusion Team November 18, 2020 11:30 AM UTC

Hi Michael, 
 
Thanks for your update. 
 
Query: Thanks for the reply but I tried your solution and it did not make the group header bold. 
 
We have analyzed the attached code example and found that the grid header is hidden in your Grid. We suggested you remove the below CSS styles and see the difference in your grid header cell on Grouping. 
 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "ExcelExport" })"  allowGrouping="true" created="created" dataBound="dataBound"> 
    <e-grid-groupsettings columns="@(new string[] {"OrderDate"})" showGroupedColumn="true"></e-grid-groupsettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="180"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<style> 
    .e-custom.e-gridheader { // remove the below styles 
        /*visibility: hidden; 
        height: 0px;*/ 
    } 
</style> 
 
 
 
The grouped column’s header text are shown like below screenshot. 
 
 
If you want to customize style of the grid’s group caption text, then use the below CSS classes. 
 
 
<style> 
    .e-grid .e-groupcaption { 
        font-weight: bold; 
    } 
</style> 
 
 
The group caption text are shown like below screenshot 
 
 
 
 
If we misunderstood your requirement, please share the below details to validate further with this. 
 
  1. Explain more details about your requirement.
  2. Where you want to customize the text in Grid, share the screenshot.
 
Regards, 
Rajapandiyan S 


Marked as answer
UN Unknown November 18, 2020 07:02 PM UTC

It was the group caption that i wanted in bold. I tried your second suggestion and it wotked great. Thanks for your assistance!

RS Rajapandiyan Settu Syncfusion Team November 19, 2020 09:54 AM UTC

Hi Michael, 
 
We are glad that the provided solution resolved your requirement. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon