jube-fork/Jube.App/wwwroot/kendo/examples/tilelayout/reordering.html

<!DOCTYPE html>
<html>
<head>
    <title>Reordering</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" class="center">
    <div class="demo-section auto">

        <div id="tilelayout"></div>

        <!-- container templates -->
        <script id="barcelona" type="text/x-kendo-template">
            <img class="k-card-image" draggable="false" src="../content/web/cards/barcelona.jpg")" />
        </script>
        <script id="sofia" type="text/x-kendo-template">
            <img class="k-card-image" draggable="false" src="../content/web/cards/sofia.jpg")" />
        </script>
        <script id="rome" type="text/x-kendo-template">
            <img class="k-card-image" draggable="false" src="../content/web/cards/rome.jpg")" />
        </script>
        <script id="sa" type="text/x-kendo-template">
            <img class="k-card-image" draggable="false" src="../content/web/cards/south-africa.jpg")" />
        </script>
        <script id="sanfran" type="text/x-kendo-template">
            <img class="k-card-image" draggable="false" src="../content/web/cards/sanfran.jpg")" />
        </script>
        <script id="seaview" type="text/x-kendo-template">
            <img class="k-card-image" draggable="false" src="../content/web/cards/seaview-appartments.png")" />
        </script>

        <script>
            $("#tilelayout").kendoTileLayout({
                containers: [{
                    colSpan: 1,
                    rowSpan: 1,
                    header: {
                        text: "Barcelona"
                    },
                    bodyTemplate: kendo.template($("#barcelona").html())
                }, {
                    colSpan: 1,
                    rowSpan: 1,
                    header: {
                        text: "Sofia"
                    },
                    bodyTemplate: kendo.template($("#sofia").html())
                }, {
                    colSpan: 1,
                    rowSpan: 1,
                    header: {
                        text: "Rome"
                    },
                    bodyTemplate: kendo.template($("#rome").html())
                }, {
                    colSpan: 1,
                    rowSpan: 1,
                    header: {
                        text: "South Africa"
                    },
                    bodyTemplate: kendo.template($("#sa").html())
                }, {
                    colSpan: 1,
                    rowSpan: 1,
                    header: {
                        text: "San Francisco"
                    },
                    bodyTemplate: kendo.template($("#sanfran").html())
                }, {
                    colSpan: 1,
                    rowSpan: 1,
                    header: {
                        text: "Sea View Apartments"
                    },
                    bodyTemplate: kendo.template($("#seaview").html())
                }],
                columns: 2,
                columnsWidth: 285,
                rowsHeight: 285,
                reorderable: true
            });
        </script>
    </div>
</div>

<style>
    .k-card-image {
        width: 285px;
        height: 189px;
    }
</style>


    
</body>
</html>