Example of Creating the WrappedTreeList Component

<script src="genJson.js" type="text/javascript"></script>

 var random = function (nseed)
    {
        var seed;
        var constant = Math.pow(2, 13) + 1;

        var prime = 37;
        var maximum = Math.pow(2, 50);
        if (nseed)
            seed = nseed;
        if (seed == null)

            seed = (new Date()).getTime();
        return {
            next: function ()
            {
                seed *= constant;
                seed += prime;

                seed %= maximum;
                return seed / maximum;
            }
        };
    };
var genJson = function (count, root_length, asArray, seed)
{
    var rnd = random(seed);

    var randomHash = function (len) {
        var letters = 'main architecture features dynamic typing weak typing automatic memory management prototypic programming functions as first-class objects on developing it was planned to make a language look as but easy to use by non-programmers does not own any company or organization that differs it from programming languages used in web development'
        var result = '';

        for (var i = 0; i < len; i += 2)
        {
            var idx = Math.floor(rnd.next() * (letters.length - 2));
            if (letters[idx] === ' ')
                idx += 1;
            result += i ? letters[idx] : letters[idx].toUpperCase();

            result += letters[idx+1];
        }
        return result;
    };
    var gen = function ()
    {
    var key, par, txt, node;
    key = (100 + genKey) + '000';
  par = (genKey > root_length) ? (Math.floor(rnd.next() * genKey)) : undefined;

  txt = randomHash(Math.floor(rnd.next() * 15 + 5));
  if (par || par === 0)
  {
  if (asArray)
  json[par]["@hc"] = true;
  else
  json[(100 + par) + '000']["@hc"] = true;
  }
if(par !== undefined)
  par = (100 + par) + '000';
node = {
"k": key,
            "@l": 2, 

            "@hc": false, 
            "@hs": false,
            "e": false, 
            "n": txt, 
            "a": { "it": [txt, key, randomHash(Math.floor(rnd.next() * 35 + 15)), Math.floor(rnd.next() * 1000000), Math.floor(rnd.next() * 1000000000) / 1000] },

            "h": true,
            "o": 0,
            "s": false,
            "p": par,
"ii": [rnd.next() * 13 | 0, rnd.next() * 18 | 0]
};
if (rnd.next() * 10 > 7)
{
node['s'] = true;
node['@fs'] = true;
}
return node;

    };
   var json, i, node;
   var genKey = 0;
if (asArray)
{
json = [];
for (i = 0; i < count; i++)
{
node = gen();
json.push(node);
genKey += 1;
}
}
else
{
json = {};
for (i = 0; i < count; i++)
{
node = gen();
json[node.k] = node;
delete node.k;
genKey += 1;
}
}
    return json;
};
// -------------------------------

// Create nodes
var json = genJson(5540, 254, false, 123457);

// Create component
     var t, treelist;
    t = treelist = new PP.Ui.WrappedTreeList({
        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,
        Style: {
          Release: {
            Font: {
              Size: 13,
              FontFamily: "Bookman Old Style",
              IsBold: false
            }
         }
        },
        Captions:

        [{
            Content: 'first',
            Width: '36%'
        },{
            Content: 'second',
            Width: '11%'
        },{

            Content: 'third',
            Width: '53%'
        }
        ],
    });