Example of Creating the SimpleTreeList Component with Drag Mode

<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;
};
// -------------------------------

// Determine drag events
var onNodeDrag = function (s, a)
{
// Disable adding new children to leaves 
    var targetIsFolder = treelist.getNodeChildrenCount(a.TargetNode) > 0,
           draggableIsFolder = treelist.getNodeChildrenCount(a.Nodes[0]) > 0;
    if (!targetIsFolder)
a.CanTakeChildren = false;
};

var onNodeDragEnd = function (s, a) {
// Output drag result to console

    console.log(a);
};

var onNodeDragStart = function (s, a)
{
// Disable dragging of last child
    var dragNode = a.Nodes[0],
    dragNodeParent = t.getNodeParent(dragNode);
    if (dragNodeParent && t.getNodeChildrenCount(dragNodeParent) == 1)
    a.Cancel = true; // cancel operation in order the node remains as a folder, that is, it has children
};
// --------------------
// Create a tree
    var json = genJson(500, 100, false, 1234567);  // Node generation function
    var t, Tree;
    t = Tree = new PP.Ui.SimpleTreeList({
        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; }
            }),
            Selected: 's',
            Expanded: 'e',
            ImageIndex: new PP.PropertyMapper({
            Getter: function (item) { return this.getNodeChildrenCount(item.k) ? (item.e ? 1 : 0) : 2 },
            Context: t
            }),

        },
        ImageList: imageList = new PP.ImageList({
            Source: '../../../build/img/treeIcons.png',
            IconHeight: 20,
            IconWidth: 20
        }),
        Width: 580,
        Height: 580,
        // Determine drag settings
        EnableDragAndDrop: true,
        DragAndDropMode: 'MultiDrag',
        DragAndDropDelay: 200,
        DragAndDropIndent: 0,

        EnableDragOutside: true,
        EnableDropOutside: true,
        EnableColumnsMenu: true,
        SelectionMode: 'ControlShiftMultiSelect',
        ParentNode: 'container',
        Captions: [{
         Content: 'first',
            Width: '40%'
        },{
         Content: 'second',

            Width: '10%'
        },{
         Content: 'third',
            Width: '50%'
        }],
        NodeDrag: onNodeDrag,
        NodeDragStart: onNodeDragStart,
        NodeDragEnd: onNodeDragEnd
    });
    Tree.setSelectedForAll(false);