Available in the OSS Version

Tree - TypeScript

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how to configure a Tree control with drag and drop nodes in TypeScript.

Code View

Copy to Clipboard

HTML
TypeScript

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <div id="tree"></div>
    <script src="/TypeScriptSamples/tree/typescript.js"></script>
</body>
</html>

/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

class FileType {
    name: string;
    type: string;
    imageUrl: string;
    folder: FileType[];
    constructor(inName: string, inType: string, inImageUrl: string, inFolder: FileType[]) {
        this.name = inName;
        this.type = inType;
        this.imageUrl = inImageUrl;
        this.folder = inFolder;
    }
}

function createSubfolderFiles(parentFolder: FileType, subFolders: string[], files: string[][],
    folderPicture: string, filePicture: string) {
    var fileIndex, subFolderIndex;
    for (subFolderIndex = 0; subFolderIndex < subFolders.length; subFolderIndex++) {
        parentFolder.folder.push(new FileType(subFolders[subFolderIndex], "Folder", folderPicture, []));

        for (fileIndex = 0; fileIndex < files[subFolderIndex].length; fileIndex++) {
            parentFolder.folder[subFolderIndex].folder.push(new FileType(files[subFolderIndex][fileIndex], "File", filePicture, []));
        }
    }
}

var folderMusic = new FileType("Music", "Folder", "/images/samples/tree/book.png", []);
var musicSubFolders = ["Y.Malmsteen", "WhiteSnake", "AC/DC", "Rock"];
var musicFiles = [["Making Love", "Rising Force", "Fire and Ice"], ["Trouble", "Bad Boys", "Is This Love"],
    ["ThunderStruck", "T.N.T.", "The Jack"], ["Bon Jovi - Always"]];
createSubfolderFiles(folderMusic, musicSubFolders, musicFiles, "/images/samples/tree/book.png", "/images/samples/tree/music.png");

var folderDocuments = new FileType("My Documents", "Folder", "/images/samples/tree/documents-folder.png", []);
var documentsSubFolders = ["2009", "2010"];
var documentFiles = [["Month Report", "Year Report"], ["Month Report", "Year Report"]];
createSubfolderFiles(folderDocuments, documentsSubFolders, documentFiles, "/images/samples/tree/documents-folder.png", "/images/samples/tree/documents.png");

var folderPictures = new FileType("Pictures", "Folder", "/images/samples/tree/coins.png", []);
var picturesSubFolders = ["Birthday2009", "Birthday2010"];
var picturesFiles = [["Picture1", "Picture2", "Picture3", "Picture4"], ["Picture1", "Picture2", "Picture3"]];
createSubfolderFiles(folderPictures, picturesSubFolders, picturesFiles, "/images/samples/tree/coins.png", "/images/samples/tree/coins_add.png");

var folderNetwork = new FileType("Network", "Folder", "/images/samples/tree/door.png", []);
var networkSubFolders = ["Archive", "Backup", "FTP"];
var networkFiles = [[],[],[]];
createSubfolderFiles(folderNetwork, networkSubFolders, networkFiles, "/images/samples/tree/door_in.png", "");

var folderDeleted = new FileType("Deleted", "Folder", "/images/samples/tree/bin_empty.png", []);
var folderComputer = new FileType("Computer", "Folder", "/images/samples/tree/computer.png", []);
folderComputer.folder.push(folderMusic);
folderComputer.folder.push(folderDocuments);
folderComputer.folder.push(folderPictures);
folderComputer.folder.push(folderNetwork);
folderComputer.folder.push(folderDeleted);

var files = [folderComputer];

$(function () {
    var options: IgTree = {
        checkboxMode: 'triState',
        singleBranchExpand: true,
        dataSource: $.extend(true, [], files),
        initialExpandDepth: 0,
        pathSeparator: '.',
        bindings: {
            textKey: 'name',
            valueKey: 'type',
            imageUrlKey: 'imageUrl',
            childDataProperty: 'folder'
        },
        dragAndDrop: true,
        dragAndDropSettings: {
            allowDrop: true,
            customDropValidation: function (element) {
                // Validates the drop target
                var valid = true,
                    droppableNode = $(this);

                if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
                    valid = false;
                }

                return valid;
            }
        }
    }

    $("#tree").igTree(options);
});

Ignite UI for jQuery | Samples

Search Results

Tree - TypeScript

Code View