Highlight: Additional HTML content in Table View

Important Notice
The features shown in this "highlights" blog category are a showcase of things which can be done using AppGiniAppGini Helper LibraryPHPSQLJavascriptJQueryCSS and HTML. This definately does not mean that everything you can see here is part of our product. It took hours, sometimes days of research, trial-and-error, coding and testing. So, these showcases are not part of a 49$ library, they are not single-line copy&paste codes and they are not for sale. Just a demonstration of what can be done and what we did and do in paid projects for our customers.


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.



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?