Components / Grid (wrapper) / Overview / 
You’re currently viewing documentation for our jQuery wrappers.This product reached EOL in May, 2024. To ensure smoother transition we provide support till May, 2025. Check here details and migration guidelines.

Grid Overview

The Kendo UI Grid wrapper for Vue displays data in a tabular format and provides a full spectrum of configuration options.

It supports the implementation of data operations and can be bound to local or remote data.

The Kendo UI Data Grid wrapper for Vue is a client-side wrapper for the Kendo UI Grid widget.

The Data Management Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free Trial

Basic Usage

The following example demonstrates how to initialize the Grid.

Example
View Source
Change Theme:

Installation

To initialize the Kendo UI Grid wrapper for Vue, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

  2. Install the Kendo UI Grid package for Vue.

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

  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.grid' // Imports only the Grid script and its dependencies

import '@progress/kendo-theme-default/dist/all.css'

import { Grid, GridInstaller } from '@progress/kendo-grid-vue-wrapper'

Vue.use(GridInstaller)

new Vue({
    el: '#app',
    components: {
        Grid
    }
})

Functionality and Features

Events

The following example demonstrates basic Grid events. You can subscribe to all Grid events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :selectable="'multiple cell'"
                :sortable="true"
                :filterable="true"
                :groupable="true"
                v-on:change="onChange"
                v-on:databinding="onDataBinding"
                v-on:databound="onDataBound"
                v-on:sort="onSorting"
                v-on:filter="onFiltering"
                v-on:group="onGrouping"
                v-on:groupexpand="onGroupExpand"
                v-on:groupcollapse="onGroupCollapse">
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    methods: {
        onChange: function(ev) {
            var selected = $.map(ev.sender.select(), function(item) {
                return $(item).text();
            });

            console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
        },
        onDataBinding: function(ev) {
            console.log("Grid data binding");
        },
        onDataBound: function(ev) {
            console.log("Grid data bound");
        },
        onSorting: function(ev) {
            console.log("Sorting on field: " + ev.sort.field + ", direction:" + (ev.sort.dir || "none"));
        },
        onFiltering: function(ev) {
            console.log("Filter on " + kendo.stringify(ev.filter));
        },
        onGrouping: function(ev) {
            console.log("Group on " + kendo.stringify(ev.groups));
        },
        onGroupExpand: function(ev) {
            console.log("The group to be expanded: " + kendo.stringify(ev.group));
        },
        onGroupCollapse: function(ev) {
            console.log("The group to be collapsed: " + kendo.stringify(ev.group));
        }
    },
    data: {
        localDataSource: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 17,
                "UnitsInStock": 40,
                "Discontinued": false,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
            }
        ]
    }
})

Suggested Links

Previous
scaleProps API
Next
Data Binding

In this article

Not finding the help you need?

Contact Support