JSON

Initial Data

As initial data we'll take 3 books:

  • “War and Peace” by Leo Tolstoy
  • “Hamlet” by William Shakespeare
  • “Madame Bovary” by Gustave Flaubert

Configuration

In JSON the data will look as:

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

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

HTML Code

list(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 = [
                           { 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}
});