jube-fork/Jube.App/wwwroot/kendo/examples/pager/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Overview</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 class="contests-wrapper">
        </div>
        <div id="pager"></div>

        <script id="template" type="text/x-kendo-template">
            <section class="contest-card-wrapper">
                <h3 title="#= Title #">#= Title #</h3>
                <img class="contest-image" src='../content/web/pager/images/#=Id#.jpg' alt="#= Title #" />
                <span class="contest-rating"><span class="k-icon k-i-user"></span> #= Participants #/ 100</span>
                <button class="join-button k-button telerik-blazor k-primary">
                    Join
                </button>
            </section>
        </script>

        <script>
            $(document).ready(function () {
                var template = kendo.template($("#template").html());

                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "../content/web/pager/photo-contests.json",
                            dataType: "json"
                        }
                    },
                    pageSize: 4,
                    change: function () {
                        $(".contests-wrapper").html(kendo.render(template, this.view()));
                    }
                });

                $("#pager").kendoPager({
                    dataSource: dataSource
                });

                dataSource.read();
            });
        </script>
    </div>
</div>

<style>
    .auto {
        max-width: 100%;
        box-sizing: border-box;
    }

    .join-button, .contest-rating, .contest-image {
        align-self: center;
        text-align: center;
        margin-bottom: 10px;
    }

    .contest-rating {
        font-size: 20px;
    }

    .contest-image {
        width: 95%;
        height: 200px;
        background-size: cover;
    }

    .contests-wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 1000px;
        max-width: 100%;
    }

    .contests-wrapper .contest-card-wrapper:first-child {
        margin-left: 0;
    }

    .contests-wrapper .contest-card-wrapper:last-child {
        margin-right: 0;
    }

    .contest-card-wrapper {
        width: 230px;
        border-color: rgba(0,0,0,0.08);
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 10px
    }

    .contest-card-wrapper h3 {
        margin-top: 5px;
        align-self: center;
        font-size: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 90%;
        text-align: center;
    }
</style>


    
</body>
</html>