/Javascript/jQuery/Kendo jquery listview

Kendo jquery listview

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    
    
    <script src="js/kendo.all.min.js"></script>
    
    

</head>
<body>
<div id="example">

    <script src="../content/shared/js/products.js"></script>

    <div class="demo-section k-content wide">
        <div id="listView"></div>
        <div id="pager" class="k-pager-wrap"></div>
    </div>

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

    <script>
        $(function() {
            var dataSource = new kendo.data.DataSource({
                data: products,
                pageSize: 21
            });

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

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            });
        });
    </script>

    <style>
        #listView {
            padding: 10px 5px;
            margin-bottom: -1px;
            min-height: 510px;
            /* Avoid cutout if font or line is bigger */
            font: inherit;
        }
        .product {
            float: left;
            position: relative;
            width: 111px;
            height: 170px;
            margin: 0 5px;
            padding: 0;
        }
        .product img {
            width: 110px;
            height: 110px;
        }
        .product h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }
        .product p {
            visibility: hidden;
        }
        .product:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            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>
</div>


</body>
</html>

Source: demos.telerik.com

Similar codes

0 vote92 views1 answer
Jquery find child of parent sibling
Javascript jQuery
57 votes93 views6 answers
Jquery create element
Javascript jQuery
46 votes103 views3 answers
Shorthand for jquery document ready
Javascript jQuery
8 votes83 views2 answers
How to change the background color in jquery
Javascript jQuery
20 votes87 views6 answers
Get id value jquery
Javascript jQuery
0 vote96 views1 answer
Remove first select option jquery
Javascript jQuery
0 vote89 views1 answer
How to play jquery audio
Javascript jQuery
3 votes89 views3 answers
Open page in new tab using jquery
Javascript jQuery
0 vote82 views1 answer
Jquery get date from datepicker
Javascript jQuery
0 vote93 views1 answer
Jquery debounce
Javascript jQuery