<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid Row Template</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">
    <link rel="stylesheet" href="./grid_render.css">

    <script src="../../_lib/focus-ui/focus-ui.min.js"></script>
    <script src="../../_lib/demo/theme.js"></script>
    <script src="./GridDemoData.js"></script>
    <script>
        var handleRemove = function (name) {
            if (window.confirm("Remove " + name + "?")) {
                grid.removeData({name: name});
            }
        };
        z.ready(function () {
            var grid = z.widget.Grid({
                appendTo: "#gridDiv",
                row_template: z.dom.query("#rowTemplate").innerHTML,
                columns: [
                    {name: "Text", field: "name"},
                    {name: "Checkbox"},
                    {name: "Img"},
                    {name: "Color"},
                    {name: "Progress"},
                    {name: "#"}
                ]
            });

            grid.setData([
                {name: "text1", boolean: true, img: "../_icons/social_blue/facebook_square.png", value: 20, progress: 88},
                {name: "text2", boolean: false, img: "../_icons/social_blue/github_square.png", value: 70, progress: 66},
                {name: "text3", boolean: true, img: "../_icons/social_blue/twitter_square.png", value: 90, progress: 22}
            ]);
            window.grid = grid;
        });
    </script>
</head>
<script type="text/html" id="rowTemplate">
    <td>
        <%name%>
    </td>
    <td>
        <input type="checkbox" disabled <%boolean===true?"checked":""%> >
    </td>
    <td>
        <%if(img){%>
        <img src=<%img%>>
        <%}%>
    </td>
    <td>
        <span class="color <%value>80?'danger':(value>60?'warning':'success')%>"><%value%></span>
    </td>
    <td>
        <div class="progress">
            <div class="progress-bar <%progress>80?'progress-bar-danger':(progress>60?'progress-bar-warning':'progress-bar-success')%>" style="width:<%progress%>%">
                <%progress%>%
            </div>
        </div>
    </td>
    <td>
        <button class="btn btn-link" onclick="handleRemove('<%name%>')">Remove</button>
    </td>
</script>
<body class="fu-pro">
<div id="gridDiv"></div>
</body>
</html>
