To execute the example, in the HEAD tag add links to component library PP.js and visual style tables PP.css. Add a DIV element with the "container" identifier in the BODY tag. Add an image containing a list of node icons.
Connect the script that generates random nodes:
<script src="genJson.js" type="text/javascript"></script>
Add the following code to the <script> tag:
// Create nodes var json = genJson(5540, 254, false, 123457);
// Create component var t, treelist; t = treelist = new PP.Ui.TreeListBox({ ParentNode: 'container', DataObject: json, DataMappers: {
Key: 'k', Index: 'i', Parent: 'p', Content: new PP.PropertyMapper({ Getter: function (item) { return item.a.it }, Setter: function (item, value) { item.a.it = value; }, Context: null }), Selected: 's', FixedSelected: '@fs', Expanded: 'e',
ChildrenCount: '@cc' }, Width: 700, Height: 550, ShowCheckBoxes: true, EnableSort: true, ShowCaptions: true, EnableResizeColumns: false, EnableColumnsMenu: true,
EnableEdit: true, ShowTree: true, Captions:
[{ Content: 'first', Width: '36%' },{ Content: 'second', Width: '11%' },{
Content: 'third', Width: '53%' } ], });
After executing the example the TreeListBox component is created.
See also: