Günter Schenk :: Tutorials Corner
Adobe Dreamweaver Developer Toolbox

       

Dynamic Lists: show more details on demand

Author: Günter Schenk, Added: 04.01.2008, Updated: 05.01.2008

Table Of Contents

Title	Version
The Scope	n/a
Step 1: Add a custom PHP function to ADDT´s "includes" libraries	n/a
Step 2: Implement the new function in your Dynamic List	n/a
Conclusion	n/a

1. The Scope

Every once in a while Dreamweaver Developer Toolbox users (this solution applies to Interakt´s MX Kollection too) ask if ADDT´s "Dynamic Lists" can be enhanced to display longer text fragments within definable table cells, and without breaking the intended layout.

It´s perfectly clear why folks might need this functionality :: sometimes the textual data displayed in the Dynamic Lists is just not enough, but whatever solution there might be, the list will always have to remain as narrow as possible in order to display the relevant data plus the "Edit" and "Delete" buttons/links without unneeded horizontal scrolling.

When using ADDT´s native methods to change the list´s layout, it´s clear that this particular demand can´t get realized :: simply extending the respective cell´s width by switching the generated Dynamic List to CODE, locating the List´s CSS "Dynamic List row settings" and subsequently increasing its...

.KT_col_your_column_name_here {width:175px; overflow:hidden;}

... to some higher value like e.g. 250px will not help us at all, because that cell´s width will be increased, and still the to-be-displayed long text derived from e.g. a MySQL "text" column might be exceeding this limit, as we can´t predict how many chars it contains.

What we need, is a solution which works independant from your List´s layout and which can be centralized, and this is something I figured out in the old MX Kollection era :: by adding a custom function to ADDT´s "includes" libraries, which will...

• embed the List´s truncated "preview" text in a generated-on-the-fly SPAN tag, and
• reveal the respective column´s complete textual contents within a "title" tag

Here´s how this tooltip effect looks like when hovering the mouse over a certain cell:

2. Step 1: Add a custom PHP function to ADDT´s "includes" libraries

This tutorials "download related files" page provides a text file containing a PHP function named "KT_FormatForList_DisplayTitle"

a) please download the abovementioned file, open it with whatever text editor and copy the function to your clipboard.

b) open the file "includes/common/KT_functions.inc.php" with Dreamweaver and search for the existing function KT_FormatForList by using Dreamweaver´s "Find and Replace" dialog:




c) you should now see this function located at line 1527





d) as indicated above, it´s recommended (though not required) to paste the new function KT_FormatForList_DisplayTitle below the existing one .

e) save and close this file

Important Hint :: making a backup of this file is certainly recommended ;-)

3. Step 2: Implement the new function in your Dynamic List

Now that this new function has become an integrated part of ADDT´s libraries, it´s pretty simple to reuse it in whatever ADDT Dynamic List -- here´s how:

a) open a Dynamic List and highlight the text column you´d like to have displayed as dynamic tooltip:



b) switch Dreamweaver to Code and replace ADDT´s default "KT_FormatForList" function:



c) ...with the new "KT_FormatForList_DisplayTitle" function:

4. Conclusion

Although this approach is pretty cool and will help in many cases, it´s clearly not an adequate thing in case the to-be-displayed "tooltip" text contains ...

• line breaks
• HTML markup like bold text or image tags

The reason is :: the on-demand created "title" tag is not capable to display anything apart from pure text, and will happily ignore stuff it doesn´t understand.

However, this approach does add some value to ADDT and its Dynamic Lists -- but: you have been warned :-))