How to Replace Header Text with a Logo in Data Grid 2

0
Hi everyone, I’m working with Data Grid 2 and would like to customize the column header - instead of using plain text, I want to display a logo or image in the header area.
asked
2 answers
1

Use CSS to replace the header text with an image (most common)

Data Grid 2 headers have predictable CSS classes, so you can target a specific column header and inject a background image.

Steps

  1. Give your Data Grid 2 a class name (e.g. logo-header-grid)

  2. Add this to your theme’s custom.scss

.logo-header-grid .th[data-field="MyColumn"] { background-image: url('/img/logo.png'); background-repeat: no-repeat; background-position: center; background-size: contain; color: transparent; // hides text }

MyColumn = the attribute name of the column 

answered
0

Hi,

Right now, Data Grid 2 doesn’t really let you put images or custom widgets into column headers. Headers are basically text only, so there’s no built-in way to swap the label for a logo or an image.

 

What you can do instead:

  • Use a simple layout workaround: Put a logo or icon in a container above the grid and line it up visually with the column. You would have lost the filtering and sorting features that belong to the dataGrid2.

  • Go custom: If you really need full control over header content, the only real solution is a custom grid widget that supports custom headers.

 

 

Hopefully this helps you.

answered