Available in the Full Version
Tree Grid - File Explorer
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>