Solved: Advanced Grid - Custom CSS within Cell

Sathishkumar_C · ‎Feb 10, 2022

HTML with CSS contents will be work inside advanced grid?

For Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

What are HTML and CSS codes will work within Advanced Grid?

slangley · ‎Mar 03, 2022

Hi @Sathishkumar_C.

Instead of using html, you could instead pass in the url and display the column as a hyperlink.

As an alternative, you could try using the collection widget in table view (in the Properties Panel, View: Table) as opposed to the grid widget.

If you have questions, please let us know.

Regards.

--Sharon

View solution in original post

Sathishkumar_C · ‎Feb 10, 2022

<a href="http://www.ptc.com" target="_blank">ptc website</a>

'_self' - Open in same window

'_blank' -- Open in new window

'_top' - Open in same window

'_parent'- Open in same window

Can we open in Popup screen from Advanced Grid HTML code?

VladimirN · ‎Feb 10, 2022

Article - "Sample CSS for the Grid and Advanced Grid Widgets": https://www.ptc.com/en/support/article/CS314561

Sathishkumar_C · ‎Feb 11, 2022

Thanks for your information.

But I'm not looking for CSS for advanced grid.

I'm having an CSS and HTML code in Infotable. and trying to render as HTML.

slangley · ‎Feb 16, 2022

Hi @Sathishkumar_C.

We're not clear on your use case. Can you please provide more details?

Regards.

--Sharon

Sathishkumar_C · ‎Feb 16, 2022

I am having an infotable with HTML field. I trying to apply CSS code for cell specific. So i have written HTML code with CSS and trying to render as HTML in advanced grid.

I don't see any changes with respect to CSS. Sample code attached in main thread.

slangley · ‎Feb 22, 2022

Hi @Sathishkumar_C.

Does it work outside of ThingWorx?

Regards.

--Sharon

Sathishkumar_C · ‎Feb 25, 2022

Yes. Above mentioned, we can save as HTML file and it is working.

slangley · ‎Mar 03, 2022

Hi @Sathishkumar_C.

Instead of using html, you could instead pass in the url and display the column as a hyperlink.

As an alternative, you could try using the collection widget in table view (in the Properties Panel, View: Table) as opposed to the grid widget.

If you have questions, please let us know.

Regards.

--Sharon

Sathishkumar_C · ‎Mar 10, 2022

I conclude that within HTML cell in Advanced Grid, we can not refer that CSS codes. Instead, as @slangley told we can go with collection widget.