How do i use html tag in the grid header?

Suite and Optimus Suite 7
#1

please check my source.

$(document).ready(function() {

var layoutInfo = {
	type: "line",
	rows: [
		{
			id: "topMenu",
			width: "100%",
			height: "50px"
		},
		{
			cols: [
				{
					id: "folder",
					header: "Folder Tree", 
                                            
                                            // I want use html font tag
                                            ex) header: "<font size='2em' color='green'>Folder Tree</font>", 

					width: "250px",
					collapsable: true,
					resizable: true
				},
				{	
                	               id: "objectGrid",		            		    	
                                       resizable: true,
                    rows: [
						{
							id: "objectMenu"
						},
						{
							id: "objectList"
						},
						{
							id: "objectPaging"
						}
					]
				},
				{
					id: "objectInfo",
					header: "Info",
					 width: "300px",
					collapsable: true,
					resizable: true,
					rows: [
						{
							id: "objectData",
						    header: "Data",
						    resizable: true
						},
						{
							id: "objectFile",
						    header: "File",
						    resizable: true
						}
					]
					
		    	}
			]
		}
	]
};

}

#2

I’m not sure if there’s a way to put html content into a header, because it looks like DHX7 just creates an h3 tag with the text content. That said, with a bit of (mildly complicated) CSS, you should be able to style the header the way you want to.

If you want to set all headers in your layout the same way, it gets less complicated, because you can set a CSS rule as follows:

.dhx_layout-cell-header__title { font-size: 2em; color: green; }

If you want to set it for the header of only a single layout cell, it will look something more like this, because the layout cell div is identified by its aria-label and not an id:

div[aria-label="tab-content-folder"] .dhx_layout-cell-header__title { font-size: 2em; color: green; }

Note: the aria-label selector value is “tab-content-” followed by the id you set for the layout cell; in your example, the id was “folder”.

1 Like