Grid Overview

The native Vue Grid by Kendo UI displays data in a tabular format.

It supports the implementation of data operations and can be bound to local or remote data. As a native Vue component, it takes full advantage of the Vue framework.

Native vs Wrapper Grid Component

The native and wrapper Grid components for Vue by Kendo UI differ in the following ways:

  • The native Grid is not jQuery-dependent.
  • The native Grid is not Kendo UI DataSource-dependent for wrapping its data items in Kendo UI observables objects. This guarantees better performance in terms of Vue reactivity.
  • The native Grid supports native templates) and can render the following template types:
    • Slots
    • Render Functions
    • Vue Components

Basic Usage

The following example demonstrates how to initialize the Grid.

<div id="vueapp" class="vue-app">
    <Grid :style="{height: '280px'}"
          :data-items="items"
          :columns="columns">
    </Grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            items: [],
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ]
        };
    },
    methods: {
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
            }));
        }
    },
    mounted() {
        this.items = this.createRandomData(50);
    }
});

Installation

To initialize the Grid, either:

Using CDN

You need to reference the intl and grid package, in order to be able to use the Kendo Native Grid for Vue.

https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js
https://unpkg.com/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js

Initializing with Webpack

  1. Add a Kendo UI theme.

    npm install --save @progress/kendo-theme-default
  2. Install the Grid Native package for Vue.

    npm install --save @progress/kendo-vue-grid
  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-theme-default/dist/all.css'
    
    import { Grid } from '@progress/kendo-vue-grid'
    
    Vue.component('Grid', Grid);
    
    new Vue({
       el: '#app' //id of the container
    })

Functionality and Features

In this article