All Components

ListView Overview

The ListView components enable you to specify a custom type of layout for the items they display.

Installation

To initialize the ListView, either:

Initializing from CDN

The following example demonstrates how to initialize the ListView components by using the CDN services. To access all CDN references, open the sample in Plunker.

<div id="vueapp" class="vue-app">
    <kendo-datasource :page-size="10" ref="datasource1"
      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
      :transport-read-data-type="'jsonp'" >
    </kendo-datasource>

    <kendo-listview :data-source-ref="'datasource1'" :template="itemTemplate">
    </kendo-listview>

    <kendo-pager :data-source-ref="'datasource1'">
    </kendo-pager>
</div>

<style>
    #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 300px;
    }
    .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>
Vue.use(ListViewInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            itemTemplate: `
                <div class="product">
                    <img src="http://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
                    <h3>#:ProductName#</h3>
                    <p>#:kendo.toString(UnitPrice, "c")#</p>
                </div>`
        }
    }
})

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    <pre><code class="language-sh">npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default</code></pre>
    
  2. Install the Kendo UI ListView package for Vue.

    npm install --save @progress/kendo-listview-vue-wrapper

    The package also exports the following wrappers for individual components:

    • ListView
    • Pager
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Pager,
            ListView,
            ListViewInstaller } from '@progress/kendo-listview-vue-wrapper'
    
    Vue.use(ListViewInstaller)
    
    new Vue({
       el: '#app',
       components: {
           Pager,
           ListView
       }
    })
In this article