[Data Grid] How to replace Data Grid Header text with icon
Question

I want to replace the text in header with icon. What I have to do?

Example.png

Thanha, you just do the next steps 

1. select widget tree view 

2. select your target header

3. Drag the icon into it 



TableHeaderIcon.oml

Hi. You can achieve this in two different ways: CSS or Javascript.

CSS: 

First, to completly remove the title, in Service Studio, type a space char in the GridHeader placeholder.

It looks like the grid component needs some character here or it will fall back to its default value.


Then add the CSS below to your theme.

The first part will prepare the space after the column title to display a FontAwesome icon. The second part will place the icon there using its code. You can use the :nth-child(n) to choose in what header to place the icon.

.wj-colheaders .wj-row .wj-cell.wj-header > div::after {    
	width: 1.28571429em;
	text-align: center;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}

.wj-colheaders .wj-row .wj-cell.wj-header:nth-child(1) > div::after {
	content: "\f037";
}
	


Result:


Javascript

To use javascript we need to create a DataGrid custom cell render.

Paste the javascript code below  in the JavaScript property of the page(or where you see more fit)

headerIconRenderer = function (s, e) {
    // Only for ColumnHeader, exclude cells
    if (!e.panel || e.panel.cellType !== wijmo.grid.CellType.ColumnHeader)
        return;
        
    if (e.panel == s.columnHeaders) {
        if (e.getColumn().header === 'Part No.') {
            e.cell.innerText = '';
            e.cell.innerHTML = '<span class="fa fa-fw fa-tag"></span>'
        }
    }
}
	

This will check for a specific header, erase the column title and add the icon.


Next, go to the Grid AvancedFormat property and add the line below

"validateEdits: false,
 headersVisibility: wijmo.grid.HeadersVisibility.All,
 selectionMode: wijmo.grid.SelectionMode.CellRange,
 formatItem: headerIconRenderer
"

Result:


And that's it!

I hope it helps"


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.