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.
Basic Usage
The following example demonstrates how to initialize the Grid.
Installation
To initialize the Kendo UI Grid wrapper for Vue, either:
Initializing with Webpack
-
Install Kendo UI and add a theme.
npm install --save @progress/kendo-ui npm install --save @progress/kendo-theme-default -
Install the Kendo UI Grid package for Vue.
npm install --save @progress/kendo-grid-vue-wrapper -
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.jsfile. 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
- Data operations
- Columns
- Scroll modes
- Export options
- More settings
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,
}
]
}
})