Example of Creating the TreeList Component

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>

genJson.js 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:

TreeListBox