As initial data we'll take 4 books:
In JSON the data will look as:
books.json
[ { name:"War and Peace", author:"Leo Tolstoy", year:"1861-1869" }, { name:"Hamlet", author:"Shakespeare", year:"1599-1601" }, { name:"Madame Bovary", author:"Gustave Flaubert", year:"1856" }, { name:"The Lord of the Rings", author:"J. R. R. Tolkien", year:"1954-1955" } ]
dataview(json).html
<!DOCTYPE HTML> <html> <head> <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> </head> <body> <script type="text/javascript" charset="utf-8"> var books = [ { name:"War and Peace", author:"Leo Tolstoy", year:"1861-1869" }, { name:"Hamlet", author:"Shakespeare", year:"1599-1601" }, { name:"Madame Bovary", author:"Gustave Flaubert", year:"1856" }, { name:"The Lord of the Rings", author:"J. R. R. Tolkien", year:"1954-1955" } ] dhx.ui({ view:"popup", body:{ view:"dataview", width:322, height:112, data:"books", datatype:"json", type:{ template:"<span class='dhx_strong'>#name#</span>#author#<span class='dhx_light'> <br/> #year#</span>", height:35, width:140 } } }); </script> </body> </html>
If you use data from external file - remove data parameter and add url, where specify the desired data file.
dhx.ui({ view:"popup", body:{ view:"dataview", width:322, height:112, url:"books.json", datatype:"json", type:{ template:"<span class='dhx_strong'>#name#</span>#author#<span class='dhx_light'> <br/> #year#</span>", height:35, width:140 } } });