As initial data we'll take 4 books:
In XML the data will look as:
books.xml
<?xml version="1.0" encoding="UTF-8"?> <data> <item id="1"> <name> War and Peace </name> <author> Leo Tolstoy </author> <year> 1861-1869 </year> </item> <item id="2"> <name> Hamlet </name> <author> William Shakespeare </author> <year> 1599-1601</year> </item> <item id="3"> <name> Madame Bovary </name> <author> Gustave Flaubert </author> <year> 1856</year> </item> <item id="4"> <name> The Lord of the Rings </name> <author> J. R. R. Tolkien </author> <year> 1954-1955 </year> </item> </data>
dataview(xml).html
<!DOCTYPE HTML> <html> <head> <title>Dataview Usage</title> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> <style> html,body{ background-color:#ffffff; } </style> </head> <body> <script> dhx.ui({ view:"popup", body:{ view:"dataview", width:322, height:112, type:{ template:"<span class='dhx_strong'>#name#</span>#author#<span class='dhx_light'> <br/> #year#</span>", height:35, width:140 }, url:"xml/books.xml", datatype:"xml" } }); </script> </body> </html>