ListViews Overview

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

Basic Usage

The following example demonstrates how to initialize the ListView and Pager.

<div id="vueapp" class="vue-app">
    <kendo-datasource :page-size="10" ref="datasource1"
      :transport-read-data-type="'jsonp'" >

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

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

    #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;

new Vue({
    el: '#vueapp',
    data () {
        return {
            itemTemplate: `
                <div class="product">
                    <img src=" ProductID #.jpg" alt="#: ProductName # image" />
                    <p>#:kendo.toString(UnitPrice, "c")#</p>


To initialize the ListView, either:

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' // This will import the entire Kendo UI library
    // As an alternative, you could import only the scripts that are used by a specific widget:
    // import '@progress/kendo-ui/js/kendo.listview' // Imports only the ListView script and its dependencies
    // import '@progress/kendo-ui/js/kendo.pager' // Imports only the Pager script and its dependencies
    import '@progress/kendo-theme-default/dist/all.css'
    import { Pager,
            ListViewInstaller } from '@progress/kendo-listview-vue-wrapper'
    new Vue({
       el: '#app',
       components: {

In this article