As initial data we'll take 3 books:
In JSON the data will look as:
books.json
[ { id:"1", name:"War and Peace", author:"Leo Tolstoy" }, { id:"2", name:"Hamlet", author:"Shakespeare" }, { id:"3", name:"Madame Bovary", author:"Gustave Flaubert" } ]
list(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 = [ { id:"1", name:"War and Peace", author:"Leo Tolstoy" }, { id:"2", name:"Hamlet", author:"Shakespeare" }, { id:"3", name:"Madame Bovary", year:"Gustave Flaubert" } ] 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 the data parameter and add url, where specify the desired data file.
dhx.ui({ view:"list", url:"books.json", datatype:"json", template:"#name# (#author#)", select:true, type: {width: 300} });