Highlight: Additional HTML content in Table View

Description

You will know this from your E-Mail software: Preview of the message right inside in the list of emails. Wouldn't it be great to have it in AppGini lists, too? For a tasks-table I wanted to show the task-subject and -description inside the table view.

And this is the first draft:

Next to a few additional buttons (see showcase here) there is a custom HTML text below every row.

Showcase

Code

I have wrapped everything into an easy-to-use function which I am going to use in more tables in the future.

TV.onEveryRow(function (data) {
    return "<b>" + data["subject"] + "</b>" + "<br />" + data["contents"];
});

Just by initializing the onEveryRow function (so called callback) the script will call my function for every row of the table. Automatically, the script-behind fills a variable with the values of every cell of that row. This data variable will then be passed over to my callback-function. data is an array and I can work with the values by using data["columnname"]. So, I can use existing data or even do calculations or whatever I like to build my custom HTML string. This HTML string will be returned, and the script-behind creates a new row and places the custom HTML there.

It is quite tricky to append a new row with colspan and rowspan options for cells of the existing row. But finally I'm quite happy with this first draft. I hope you like it!

Do you like it?