New to Kendo UI for Vue? Start a free 30-day trial
GridToolbar
Represents the GridToolbar component.
<div id="app">
<Grid
:data-items="products"
:columns="columns">
<grid-toolbar >
<button title="Add new" class="k-button k-primary" @click='insert' >
Add new
</button>
<button v-if="hasItemsInEdit"
title="Cancel current changes"
class="k-button"
@click="cancelChanges">
Cancel current changes
</button>
</grid-toolbar>
</Grid>
</div>
<script>
Vue.component('Grid', Grid);
Vue.component('grid-toolbar', GridToolbar);
new Vue({
el: '#app',
data: function () {
return {
products: [
{ 'foo': 'A1', 'bar': 'B1' },
{ 'foo': 'A2', 'bar': 'B2' },
{ 'foo': 'A3', 'bar': 'B2' }
],
columns: [
{ field: 'foo'},
{ field: 'bar'}
]
};
}
});
</script>