Available in the Full Version

Tree Grid - File Explorer

Show
records
NameDate ModifiedTypeSize in KB
Documents9/12/2013File Folder4480
To do list.txt11/5/2013TXT File4448
Work.txt9/12/2013TXT File32
Music6/10/2014File Folder5594
AC/DC6/10/2014File Folder2726
Stand Up.mp36/10/2014MP3 File456
T.N.T.mp36/10/2014MP3 File1155
The Jack.mp36/10/2014MP3 File1115
WhiteSnake6/11/2014File Folder2868
Trouble.mp36/11/2014MP3 File1234
Bad Boys.mp36/11/2014MP3 File522
Is This Love.mp36/11/2014MP3 File1112
Pictures1/9/2014File Folder1825
Jacks Birthday6/9/2014File Folder631
Picture1.png6/9/2014PNG image493
Picture2.png6/9/2014PNG image88
Picture3.gif6/9/2014GIF File50
Trip to London3/10/2014File Folder1194
Picture1.png3/10/2014PNG image974
Picture2.png3/10/2014PNG image142
Picture3.png3/10/2014PNG image41
Picture4.png3/10/2014PNG image25
Picture5.png3/10/2014PNG image12
Videos1/4/2014File Folder0

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 create a file explorer with the igTreeGrid control by customizing the collapse and expand icons.

Code View

Copy to Clipboard 
<!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>

    <style>
        .ui-icon.ui-igtreegrid-expansion-indicator.ui-icon-minus {
            background: url(/images/samples/tree-grid/opened_folder.png) !important;
            background-repeat: no-repeat;
        }
        .ui-icon.ui-igtreegrid-expansion-indicator.ui-icon-plus {
            background: url(/images/samples/tree-grid/folder.png) !important;
            background-repeat: no-repeat;
        }
		.ui-icon-plus:before {
		    content: '' !important;
		}
		.ui-icon-minus:before{
		    content: '' !important;
		}
    </style>

</head>
<body>

    <table id="treegrid"></table>

    <script>
        $(function () {

            var files = [
                {
                   "id": 1, "name": "Documents", "dateModified": "9/12/2013", "type": "File Folder", "size": 4480, "files": [
                        { "id": 11, "name": "To do list.txt", "dateModified": "11/5/2013", "type": "TXT File", "size": 4448 },
                        { "id": 12, "name": "Work.txt", "dateModified": "9/12/2013", "type": "TXT File", "size": 32 }
                    ]
                },
                {
                    "id": 2,"name": "Music", "dateModified": "6/10/2014", "type": "File Folder", "size": 5594, "files": [
                        {
                            "id": 21, "name": "AC/DC", "dateModified": "6/10/2014", "type": "File Folder", "size": 2726, "files": [
                                { "id": 211,"name": "Stand Up.mp3", "dateModified": "6/10/2014", "type": "MP3 File", "size": 456 },
                                { "id": 212, "name": "T.N.T.mp3", "dateModified": "6/10/2014", "type": "MP3 File", "size": 1155 },
                                { "id": 213, "name": "The Jack.mp3", "dateModified": "6/10/2014", "type": "MP3 File", "size": 1115 }
                            ]
                        },
                        {
                            "id": 22, "name": "WhiteSnake", "dateModified": "6/11/2014", "type": "File Folder", "size": 2868, "files": [
                                { "id": 221, "name": "Trouble.mp3", "dateModified": "6/11/2014", "type": "MP3 File", "size": 1234 },
                                { "id": 222, "name": "Bad Boys.mp3", "dateModified": "6/11/2014", "type": "MP3 File", "size": 522 },
                                { "id": 223, "name": "Is This Love.mp3", "dateModified": "6/11/2014", "type": "MP3 File", "size": 1112 },
                            ]
                        }
                    ]
                },
                {
                    "id": 3, "name": "Pictures", "dateModified": "1/9/2014", "type": "File Folder", "size": 1825, "files": [
                        {
                            "id": 31, "name": "Jacks Birthday", "dateModified": "6/9/2014", "type": "File Folder", "size": 631, "files": [
                                { "id": 311, "name": "Picture1.png", "dateModified": "6/9/2014", "type": "PNG image", "size": 493 },
                                { "id": 312, "name": "Picture2.png", "dateModified": "6/9/2014", "type": "PNG image", "size": 88 },
                                { "id": 313, "name": "Picture3.gif", "dateModified": "6/9/2014", "type": "GIF File", "size": 50 },
                            ]
                        },
                        {
                            "id": 32, "name": "Trip to London", "dateModified": "3/10/2014", "type": "File Folder", "size": 1194, "files": [
                                {  "id": 321, "name": "Picture1.png", "dateModified": "3/10/2014", "type": "PNG image", "size": 974 },
                                {  "id": 322, "name": "Picture2.png", "dateModified": "3/10/2014", "type": "PNG image", "size": 142 },
                                {  "id": 323, "name": "Picture3.png", "dateModified": "3/10/2014", "type": "PNG image", "size": 41 },
                                {  "id": 324, "name": "Picture4.png", "dateModified": "3/10/2014", "type": "PNG image", "size": 25 },
                                {  "id": 325, "name": "Picture5.png", "dateModified": "3/10/2014", "type": "PNG image", "size": 12 },
                            ]
                        }
                    ]
                },
                {
                    "id": 4, "name": "Videos", "dateModified": "1/4/2014", "type": "File Folder", "size":0
                        
                },
                {
                    "id": 5, "name": "Books", "dateModified": "1/4/2014", "type": "File Folder", "size": 99376, "files": [
                        {
                            "id": 51, "name": "James Rollins", "dateModified": "6/2/2014", "type": "File Folder", "size": 34228, "files": [
                                { "id": 511, "name": "Alter of Eden.pdf", "dateModified": "6/5/2014", "type": "Adobe Acrobat Document", "size": 8894 },
                                { "id": 512, "name": "Amazonia.pdf", "dateModified": "3/2/2014", "type": "Adobe Acrobat Document", "size": 6212 },
                                { "id": 513, "name": "Subterranean.pdf", "dateModified": "1/4/2014", "type": "Adobe Acrobat Document", "size": 4820 },
                                { "id": 514, "name": "Sandstorm.pdf", "dateModified": "2/2/2014", "type": "Adobe Acrobat Document", "size": 14302 }
                            ]
                        },
                        {
                            "id": 52, "name": "Stephen King", "dateModified": "3/10/2014", "type": "File Folder", "size": 65148, "files": [
                                { "id": 521, "name": "It.pdf", "dateModified": "3/10/2014", "type": "Adobe Acrobat Document", "size": 9987 },
                                { "id": 522, "name": "Misery.pdf", "dateModified": "3/10/2014", "type": "Adobe Acrobat Document", "size": 32313 },
                                { "id": 523, "name": "Pet Sematary.pdf", "dateModified": "3/10/2014", "type": "Adobe Acrobat Document", "size": 22848 }
                            ]
                        }
                    ]
                },
                { "id": 6, "name": "Games", "dateModified": "8/8/2014", "type": "File Folder", "size": 0 },
                {
                    "id": 7, "name": "Projects", "dateModified": "7/4/2014", "type": "File Folder", "size": 4, "files": [
                        {
                            "id": 71,"name": "Visual Studio 2012", "dateModified": "7/4/2014", "type": "File Folder", "size": 1, "files": [
                                {  "id": 711,"name": "Project10.sln", "dateModified": "7/4/2014", "type": "Microsoft Visual Studio Solution", "size": 1 }
                            ]
                        },
                        {
                            "id": 72, "name": "Visual Studio 2013", "dateModified": "9/6/2014", "type": "File Folder", "size": 3, "files": [
                                { "id": 721, "name": "Project1.sln", "dateModified": "9/6/2014", "type": "Microsoft Visual Studio Solution", "size": 1 },
                                { "id": 722,"name": "Project2.sln", "dateModified": "9/6/2014", "type": "Microsoft Visual Studio Solution", "size": 1 },
                                { "id": 723,"name": "Project3.sln", "dateModified": "9/6/2014", "type": "Microsoft Visual Studio Solution", "size": 1 }
                            ]
                        }
                    ]
                }
            ];

            $("#treegrid").igTreeGrid({
                width: "800px",
                height:"400px",
                dataSource: files,
                autoGenerateColumns: false,
                primaryKey: "id",
                columns: [
                    { headerText: "ID", key: "id", width: "250px", dataType: "number", hidden: true},
                    { headerText: "Name", key: "name", width: "250px", dataType: "string" },
                    { headerText: "Date Modified", key: "dateModified", width: "130px", dataType: "date"},
                    { headerText: "Type", key: "type", width: "230px", dataType: "string" },
                    { headerText: "Size in KB", key: "size", width: "130px", dataType: "number" }
                ],
                childDataKey: "files",
                initialExpandDepth: 2,
                features: [
                {
                    name: "Selection",
                    multipleSelection: true
                },
                {
                    name: "RowSelectors",
                    enableCheckBoxes: true,
                    checkBoxMode: "biState",
                    enableSelectAllForPaging: true,
                    enableRowNumbering: false
                },
                {
                    name: "Sorting"
                },
                {
                    name: "Filtering",
                    columnSettings: [
                        {
                            columnKey: "dateModified",
                            condition: "after"
                        },
                        {
                            columnKey: "size",
                            condition: "greaterThan"
                         }
                        ]
                },
                {
                    name: "Paging",
                    pageSize: 4
                }]
            });
        });
    </script>
</body>
</html>