Grid component customization, colours, images etc., Workflow 8.0+

Hello all - I received a request a few months ago asking about options for customizing the new (8.0+) Kendo grid components.  Here was the original request (paraphrased):

I am not sure how much we can do for them as the things they raised simply do not work (and do not seem to have analogues for) in WF 8.0 Grid.  I am wondering if you have encountered this and have any ideas.

From customer’s response and screenshots, these are the three things they were using and 8.0 does not do:

1.    A way to have images in the Grid. In 7.1 this is done by having HTML in the data.
2.    Color scheme for Grid. Will clarify what he uses but I suspect Styles which are no longer there in 8.0.

Here's the workaround i found that works with the new Grid components, to color and style, as well as include images in the grid.

Using an Include HTML component for the CSS for the grid (where the grid has a control ID of TestTable):

<style>
td {
  font-family: 'Segoe UI', Helvetica, Arial;
}
#TestTable table {
  width: 100% !important;
  border-collapse: collapse;
}
#TestTable th {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: #6e1515;
  text-align: center;
  width: 1px;
  white-space: nowrap;
}
#TestTable td {
  background-color: #dbcaca;
  border: solid 1px #ffffff;
  white-space: normal !important;
}
</style>

This CSS code can be set in a Merge Text component ahead of the form it's used on.  See this article for more information on including HTML/CSS on workflow web forms.

And using the following javascript, which is pretty lightweight and easy to drop into any appropriate forms:

OnLoad (Body Custom Events for your form):

replaceEncodes();
replaceJunkText();
document.documentElement.style.visibility = 'visible';

Form Script (Script section in the Behavior tab for your form):

document.documentElement.style.visibility = 'hidden';
function replaceEncodes() {
var testTable = document.getElementById('TestTable');
testTable.innerHTML = testTable.innerHTML.replace(/&lt;/g, '<');
testTable.innerHTML = testTable.innerHTML.replace(/&gt;/g, '>');
}
function replaceJunkText() {
var testTable = document.getElementById('TestTable');
testTable.innerHTML = testTable.innerHTML.replace(/&lt;="" td=""&gt;/g, '');
}

Double-click in any white (empty) space on your open form editor in Workflow and you should get to the "Behavior" tab.  This is where you'll find the Body Custom Events (where you add the onload) as well as the Script section (at the bottom, where you include any functions you intend to call).

I've attached a sample project as well.

feel free to reach out to me with any questions.  thanks!