kendo jquery listview

Solutions on MaxInterview for kendo jquery listview by the best coders in the world

showing results for - "kendo jquery listview"
06 Jul 2020
1<!DOCTYPE html>
2<html>
3<head>
4    <title></title>
5    <link rel="stylesheet" href="styles/kendo.common.min.css" />
6    <link rel="stylesheet" href="styles/kendo.default.min.css" />
7    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
8
9    <script src="js/jquery.min.js"></script>
10    
11    
12    <script src="js/kendo.all.min.js"></script>
13    
14    
15
16</head>
17<body>
18<div id="example">
19
20    <script src="../content/shared/js/products.js"></script>
21
22    <div class="demo-section k-content wide">
23        <div id="listView"></div>
24        <div id="pager" class="k-pager-wrap"></div>
25    </div>
26
27    <script type="text/x-kendo-template" id="template">
28        <div class="product">
29            <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
30            <h3>#:ProductName#</h3>
31            <p>#:kendo.toString(UnitPrice, "c")#</p>
32        </div>
33    </script>
34
35    <script>
36        $(function() {
37            var dataSource = new kendo.data.DataSource({
38                data: products,
39                pageSize: 21
40            });
41
42            $("#pager").kendoPager({
43                dataSource: dataSource
44            });
45
46            $("#listView").kendoListView({
47                dataSource: dataSource,
48                template: kendo.template($("#template").html())
49            });
50        });
51    </script>
52
53    <style>
54        #listView {
55            padding: 10px 5px;
56            margin-bottom: -1px;
57            min-height: 510px;
58            /* Avoid cutout if font or line is bigger */
59            font: inherit;
60        }
61        .product {
62            float: left;
63            position: relative;
64            width: 111px;
65            height: 170px;
66            margin: 0 5px;
67            padding: 0;
68        }
69        .product img {
70            width: 110px;
71            height: 110px;
72        }
73        .product h3 {
74            margin: 0;
75            padding: 3px 5px 0 0;
76            max-width: 96px;
77            overflow: hidden;
78            line-height: 1.1em;
79            font-size: .9em;
80            font-weight: normal;
81            text-transform: uppercase;
82            color: #999;
83        }
84        .product p {
85            visibility: hidden;
86        }
87        .product:hover p {
88            visibility: visible;
89            position: absolute;
90            width: 110px;
91            height: 110px;
92            top: 0;
93            margin: 0;
94            padding: 0;
95            line-height: 110px;
96            vertical-align: middle;
97            text-align: center;
98            color: #fff;
99            background-color: rgba(0,0,0,0.75);
100            transition: background .2s linear, color .2s linear;
101            -moz-transition: background .2s linear, color .2s linear;
102            -webkit-transition: background .2s linear, color .2s linear;
103            -o-transition: background .2s linear, color .2s linear;
104        }
105        .k-listview:after {
106            content: ".";
107            display: block;
108            height: 0;
109            clear: both;
110            visibility: hidden;
111        }
112    </style>
113</div>
114
115
116</body>
117</html>
source