Grouplist Usage Example

HTML code

grouplistExample.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">
 
	dhx.ui({// creates a view and popup in it
	       height: 320,
  	       id:"mypopup",
	       view:"popup",// specifies a popup
	       body:{ view:"grouplist", // in the popup we create grouplist object
				 id:"mylist", 
				 select:true,// activate the possibility to choose a data item
				 url:"xml/books.xml", datatype:"xml", // the path to the data file and its type
							type:{// specifies data which grouplist will present
								templateItem:"#title#(#author#)",//an html template that defines data that will be presented in the list
								templateGroup:"#title#",//an html template that defines data that will be presented in the group header in the collapsed state 
								templateBack:"#title#",//an html template that defines data that will be presented in the group header in the expanded state. 			
							},
							width: 500 //the width of the grouplist
						},
	       left:500
});
		</script>
	</body>
</html>

XML structure

books.xml

<data>
  <item id="group 01">
    <title>Business and Economics</title>
    <item id="sub_group">
      <title>Favorite</title>
      <item id="01">
        <title> The road to serfdom </title>
        <author>Friedrich A. Hayek</author>
      </item>
      <item id="02">
        <title> Think and grow rich </title>
        <author>Napoleon Hill</author>
      </item>
      <item id="03">
        <title> The Art of War </title>
        <author>Sun Tzu</author>
      </item>
      <item id="04">
        <title> Getting to yes </title>
        <author>Roger Fisher</author>
      </item>
    </item>
    <item id="05">
      <title> The Communist Manifesto </title>
      <author>Karl Marx</author>
    </item>
    <item id="06">
      <title> The Total Money Makeover </title>
      <author>Dave Ramsey</author>
    </item>
    <item id="07">
      <title> Beezus and Ramona </title>
      <author>Beverly Cleary</author>
    </item>
  </item>
  <item id="group 02">
    <title>Health and Fitness</title>
    <item id="g209">
      <title>Time for Bed</title>
      <author>Mem Fox</author>
    </item>
  </item>
  <item id="group 03">
    <title>Psychology</title>
    <item id="g309">
      <title>The Hero with a Thousand Faces</title>
      <author>Joseph Campbell</author>
    </item>
  </item>
</data>