<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TreeGrid With Icons</title>
    <!--<link rel="stylesheet" href="../../_lib/focus-ui/theme/bootstrap.min.css">-->
    <link rel="stylesheet" href="../../_lib/focus-ui/fu-pro.css">
    <link rel="stylesheet" href="../../_lib/demo/demo-item.css">

    <script src="../../_lib/focus-ui/focus-ui.min.js"></script>
    <script src="../../_lib/demo/theme.js"></script>
    <script src="./TreeGridDemoData.js"></script>
    <script>
        z.ready(function () {
            var treeGrid = z.widget.TreeGrid({
                appendTo: "#gridDiv",
                expand_on_dbl_click: true,
                overflow: "scroll",
                sortable: true,
                hoverable: true,
                data: SystemArray,
                columns: [
                    {name: "Name", field: "name", template: z.dom.query("#iconTemplate").innerHTML},
                    {name: "Type", field: "type"},
                    {name: "Total Size", field: "total_size", sortable: false, default: "-"},
                    {name: "Free Space", field: "free_space", sortable: false, default: "-"}
                ]
            });
            treeGrid.expandAll();
        });
    </script>
</head>
<script type="text/html" id="iconTemplate">
    <%if(this.icon){%>
    <img src="../_icons/windows/<%this.icon%>">
    <%}%>
    <%name%>
</script>
<body>
<div style="height: 100%" id="gridDiv"></div>
</body>
</html>
