JSON

Initial Data

As initial data we'll take 4 books:

  • “War and Peace” by Leo Tolstoy
  • “Hamlet” by William Shakespeare
  • “Madame Bovary” by Gustave Flaubert
  • “The Lord of the Rings” by J. R. R. Tolkien

Configuration

In JSON the data will look as:

 
Please note, you can set item's id directly in JSON file

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" }
]

HTML Code

dataview(json).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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
				}
		   }
});