Kendo ListView demo with source code

Kendo UI ListView Example

Source Code:-

<h2>Kendo ListView demo with source code</h2>
        <div class="demo-section k-content wide">
            <div id="MovieslistView"></div>
            <div id="listviewpager" class="k-pager-wrap"></div>
        </div>
        <script type="text/x-kendo-template" id="template">
            <div class="Movies">
                <i class="fa fa-camera-retro fa-5x imgccc"></i>
                <h5>#:title#</h5>
                <h5>Rank:- #:rank#</h5>
                <h5>Year:- #:year#</h5>
                <p>Rating:- #:kendo.toString(rating)#</p>
            </div>
        </script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>        
    <script>
        $(function () {
            var movies = [{ "rank": 1, "rating": 9.5, "year": 1999, "title": "Inception" },
                         { "rank": 2, "rating": 9.4, "year": 1982, "title": "The Dark Knight II" },
                         { "rank": 3, "rating": 9.1, "year": 1964, "title": "The Shawshank Redemption" },
                         { "rank": 4, "rating": 8.9, "year": 1986, "title": "The Godfather" },
                         { "rank": 5, "rating": 8.9, "year": 1999, "title": "12 Angry Men" },
                         { "rank": 6, "rating": 8.5, "year": 2015, "title": "Pulp Fiction" },
                         { "rank": 7, "rating": 8.2, "year": 2000, "title": "One Flew Over the Cuckoo's Nest" },
                         { "rank": 8, "rating": 7.8, "year": 2014, "title": "Schindler's List" },
                         { "rank": 9, "rating": 6.8, "year": 2016, "title": "The Dark Knight" },
                         { "rank": 10, "rating": 6.5, "year": 2008, "title": "The Godfather: Part II" }];

            var dataSource = new kendo.data.DataSource({
                data: movies,
                pageSize: 6
            });

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

            $("#MovieslistView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            });
        });
    </script>
<style>
    .demo-section {
        width: 650px;
    }

    #MovieslistView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 210px;
    }

    .Movies {
        border: 1px solid #808080;
        float: left;
        position: relative;
        width: 150px;
        height: 190px;
        margin: 5px 5px;
        padding: 0 25px;
    }

        .Movies imgccc {
            width: 110px;
            height: 110px;
        }

        .Movies h5 {
            margin: 0;
            padding: 3px 5px 0 0;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }

        .Movies p {
            visibility: hidden;
        }

        .Movies:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 80px;
            top: 0;
            margin: 0;
            text-align: center;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }

    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>