Example of Creating the DynamicTreeList Component

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

var seed = 12354654;
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;
		}
	};
};
if (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 genNode = function (rootKey, index, length)
{
	var key, txt, node;
	key = rootKey ? (rootKey + '-' + index) : '' + index;
	txt = randomHash(Math.floor(rnd.next() * 15 + 5));
	node = {
		"k": key,

		"@l": 2,
		"@hc": true,
		"@hs": false,
		"e": false,
		"n": txt,
		"a": { "it": [key + ': ' + 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": rootKey,
		"i": index,
		"@cc": length

	};
	if (rnd.next() * 10 > 7)
	{
		node['s'] = true;
		node['@fs'] = true;
	}
	return node;
};
var genJsonBranch = function (rootKey, length, first, count, asArray, seed)
{
	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;
			}
		};
	};
	if(seed)
		var rnd = random(seed + parseInt(rootKey));
	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 (parent, index, length)
	{
		var key, txt, node;
		key = rootKey ? (rootKey + '-' + index) : '' + index;
		txt = randomHash(Math.floor(rnd.next() * 15 + 5));
		node = {
			"k": key,
			"@l": 2,

			"@hc": true,
			"@hs": false,
			"e": false,
			"n": txt,
			"a": { "it": [key + ': ' + 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": rootKey,
			"i": index,
			"@cc": length
		};
		if (rnd.next() * 10 > 7)
		{
			node['s'] = true;
			node['@fs'] = true;

		}
		return node;
	};
	var json, i, node, genKey;
	if (rootKey)
		genKey = parseInt(rootKey);
	else
		genKey = 1;
	if (asArray)
	{
		json = [];
		for (i = 0; i < count; i++)
		{
			node = gen(first + i, length);

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

// New node get function
    function onDataRequest(sender, args) {
        var nodes = {};
        var node;
        if (args.Partial)
            for (var i = 0; i < args.Request.length; i++) {
                node = genNode(args.Request[i].Parent, args.Request[i].Index, count);
                nodes[node['k']] = node;
            }
        else {

            for (var i = 0; i < count; i++) {
                node = genNode(args.Parent, i, count);
                nodes[node['k']] = node;
            }
        }
        PP.setTimeout(function () {  // Simulate server response delay
            sender.loadNodes(nodes); // Load nodes
        }, 400);
    };

    var count = 50; // Number of created nodes
    var json = []; 
    json.push({
        'k': '',
        '@hc': true,
        '@cc': count
    });
// Create a component
     var t, treelist;
    t = treelist = new PP.Ui.DynamicTreeList({
        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,
        ShowTree: true,
        Captions:

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

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