Is it possible to bind buttons created in a ToolbarTemplate for a grid in vuejs ?
The purpose is to enable/disable button if a row is selected or not
Hallo,
I am trying to include a custom toolbar into the vue template.
<template>
<div class="page">
<h1>Author</h1>
<client-only>
<kendo-datasource ref="ds"
:schema-model-id="'id'"
:schema-model-fields="model"
:schema-data="schema"
:transport-create-beforeSend="onBeforeSend"
:transport-create-url="'http://192.168.1.11:8000/graphql'"
:transport-create-content-type="'application/json'"
:transport-create-type="'POST'"
:transport-create-data="additionalParamsOnCreate"
:transport-read-beforeSend="onBeforeSend"
:transport-read-url="'http://192.168.1.11:8000/graphql'"
:transport-read-content-type="'application/json'"
:transport-read-type="'POST'"
:transport-read-data="additionalParamsOnRead"
:transport-update-beforeSend="onBeforeSend"
:transport-update-url="'http://192.168.1.11:8000/graphql'"
:transport-update-content-type="'application/json'"
:transport-update-type="'POST'"
:transport-update-data="additionalParamsOnUpdate"
:transport-destroy-beforeSend="onBeforeSend"
:transport-destroy-url="'http://192.168.1.11:8000/graphql'"
:transport-destroy-content-type="'application/json'"
:transport-destroy-type="'POST'"
:transport-destroy-data="additionalParamsOnDestroy"
:page-size="20"
:transport-parameter-map="parameterMap">
</kendo-datasource>
<kendo-grid ref ="mainGrid"
:data-source-ref="'ds'"
:edit-field="'inEdit'"
:navigatable="true"
:pageable="true"
:editable="true">
<!-- first try -->
<!--
:toolbar="["create"]"
-->
<!-- second try -->
<!--
<GridToolbar class="k-header k-grid-toolbar">
<button href="#" title="Add new" class="k-button k-button-icontext k-grid-add" @click="insert">
Add new
</button>
</GridToolbar>
-->
<!-- third try -->
<div class="k-header k-grid-toolbar">
<a role="button" class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-i-plus" @click="testClick"></span> Command</a>
</div>
<kendo-grid-column :field="'id'"
:title="'ID'"
:width="80">
</kendo-grid-column>
<kendo-grid-column :field="'firstName'"
:title="'firstName'"
:width="80">
</kendo-grid-column>
<kendo-grid-column :field="'lastName'"
:title="'lastName'"
:width="80">
</kendo-grid-column>
</kendo-grid>
</client-only>
<kendo-notification ref="popupNotification"
@show="onShow"
@hide="onHide">
</kendo-notification>
</div>
</template>
<script>
import { Button } from '@progress/kendo-buttons-vue-wrapper';
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper';
import { KendoDataSource } from '@progress/kendo-datasource-vue-wrapper';
import { Notification } from '@progress/kendo-popups-vue-wrapper';
import { READ_AUTHORS_QUERY, ADD_AUTHOR_QUERY, UPDATE_AUTHOR_QUERY,DELETE_AUTHOR_QUERY } from '../graphql/author'
export default {
name: 'App',
components: {
'k-button': Button,
'kendo-grid': Grid,
'kendo-grid-column': GridColumn,
'kendo-notification': Notification,
},
created: function() {
console.log('created');
},
mounted: function() {
console.log('mounted');
this.popupNotificationWidget = this.$refs.popupNotification.kendoWidget();
console.log('mounted2');
},
methods: {
insert: function() {
this.popupNotificationWidget.show('insert');
},
onClick: function (ev) {
console.log("Button clicked!");
},
testClick: function (ev) {
this.popupNotificationWidget.show('testClick');
console.log("test clicked!");
},
onShow: function (e) {
console.log("Show")
},
onHide: function (e) {
console.log("Hide")
},
onBeforeSend: function(req) {
let component = this;
// req.setRequestHeader("Authorization", "bearer ...tokenstring...");
},
additionalParamsOnCreate: function(model) {
return {
query: ADD_AUTHOR_QUERY,
variables: {author: model }
};
},
additionalParamsOnRead: function(model){
console.log('additionalParamsOnRead')
return {
query: READ_AUTHORS_QUERY,
};
},
additionalParamsOnUpdate: function(model){
return {
query: UPDATE_AUTHOR_QUERY,
variables: {author: model }
};
},
additionalParamsOnDestroy: function(model){
return {
query: DELETE_AUTHOR_QUERY,
variables: {author: model }
};
},
parameterMap: function(options, operation) {
return kendo.stringify({
query: options.query,
variables: options.variables
});
},
schema: function (response) {
var data = response.data;
if (data.authors) {
return data.authors;
} else if (data.AddAuthor) {
return data.AddAuthor;
} else if (data.UpdateAuthor) {
return data.UpdateAuthor;
} else if (data.DeleteAuthor) {
return data.DeleteAuthor;
}
},
},
data: function() {
return {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
firstName: { type: "string" },
lastName: { type: "string" }
}
}
}
}
}
</script>
<style>
</style>
The fist try with built-in function works: a new empty record ist displayed in first lineof the grid.
The second and third try call the methods, but no new empty record is generated.
I cannot get this to work - is this possible?
Regards,
Michael
It's possible to generate toolbar item based on array of object as below sample? I try but I hit v-for & v-if not allowed to use together.
Hi All,
How can we create , show , hide button in grid using vue js
I want to add a tab on the tabstrip in the Spreadsheet component. I have done so by adding this line of code to the toolbar attribute
<spreadsheet ref="spreadsheet"
:toolbar="toolbar"
Where toolbar is a value in data that looks like
toolbar = {
'custom': [
// for all available options, see the toolbar items configuration
// https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items
{
type: "button",
text: "Save",
showText: "both",
icon: "k-icon k-i-save",
click: function() {
// Some code
}
},
However, this new tab shows up with the name 'undefined', next to the other tabs. Is there some way to give it a proper name?
Hello all,
I am using kendo Editor.
<editor :resizable-content="true"
:resizable-toolbar="true"
v-model="footerBody"
style="height:280px;"
value=""
rows="10"
contenteditable="true"
cols="30"
ref="editor">
</editor>
This one is going to have the default toolbar set.
What I want to do is to add one more tool to the default toolbar set.
What I have noticed is that when I set the tools like below, it is overwriting the default toolbar and putting there only the tools I put in the tools property. So, is there a way to add or remove a specific tool without altering and overwriting all the others from default?
<editor :resizable-content="true"Hi,
Im using kendo Scheduler in my vue project. I need to customize the scheduler header. First image is the default header I'm getting. I need to customize it as shown in the second image.I need to show the date and then a button to change the date and finally a button to go to current date. Is there a way to customize this scheduler header.
Thanks in advance.
Hi,
I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.
I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.
It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.
Other gird features are working fine.
<
template
>
<
v-card
shaped>
<
v-card-title
>
<
h3
>
Product
</
h3
>
</
v-card-title
>
<
v-card-text
>
<
Grid
:style
=
"{height: '800px'}"
:data-items
=
"gridDataResult"
:filterable
=
"true"
:filter
=
"filter"
:groupable
=
"true"
:group
=
"group"
:pageable
=
"pageable"
:reorderable
=
"true"
:resizable
=
"true"
:sortable
=
"true"
:sort
=
"sort"
:skip
=
"skip"
:take
=
"take"
:total
=
"total"
:expand-field
=
"'expanded'"
:columns
=
"columns"
:column-menu
=
"columnMenu"
@
pagechange
=
"pageChangeHandler"
@
filterchange
=
"filterChange"
@
sortchange
=
"sortChangeHandler"
@
dataStateChange
=
"dataStateChange"
@
expandchange
=
"expandChange"
@
columnreorder
=
"columnReorder"
>
<!-- <
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-no-records
>
<
div
class
=
"k-loading-mask customPosition"
>
<
span
class
=
"k-loading-text"
/>
<
div
class
=
"k-loading-image"
/>
<
div
class
=
"k-loading-color"
/>
</
div
>
</
grid-no-records
>
</
Grid
>
</
v-card-text
>
</
v-card
>
</
template
>
<
script
>
import { process } from '@progress/kendo-data-query';
// import { mapGetters } from 'vuex';
// import { mapGetters, mapActions } from 'vuex';
export default {
name: 'Product',
components: {},
data() {
return {
columnMenu: false,
expandedItems: [],
gridPageable: { pageSizes: true },
skip: 0,
take: 10,
pageSize: 10,
pageable: {
buttonCount: 10,
info: true,
type: 'numeric',
pageSizes: true,
previousNext: true,
},
filter: {
logic: '',
filters: [
// { field: 'UnitPrice', operator: 'neq', value: 18 },
// { field: 'calendarMonth', operator: 'gte', value: new Date('1996-10-10') },
],
},
group: [],
sort: [{ field: 'id', dir: 'asc' }],
// sort: [
// { field: 'id', dir: 'asc' },
// ],
columns: [
{
field: 'id',
title: 'ID',
// width: '70px',
},
{
field: 'currency',
title: 'Currency',
// width: '100px',
},
{
field: 'salesOrigin',
title: 'Sales Origin',
// width: '100px',
// filter: 'numeric',
// groupable: true,
},
{
field: 'plant',
title: 'Plant',
// width: '100px',
// filter: 'numeric',
// groupable: true,
},
{
field: 'sku',
title: 'SKU',
// width: '100px',
// groupable: true,
},
{
field: 'materialGroupDescription',
title: 'Material Group Description',
// width: '100px',
},
{
field: 'materialDescription',
title: 'Material Description',
// width: '100px',
},
{
field: 'swatchDisplayColourDescription',
title: 'Colour',
// width: '100px',
},
{
field: 'calendarMonth',
filter: 'date',
title: 'Calendar Month',
// width: '100px',
// groupable: true,
},
{
field: 'discontinued',
title: 'Discontinued',
// filter: 'boolean',
// groupable: true,
},
// {
// command: [
// {
// name: 'edit',
// text: ' ',
// width: 10,
// },
// {
// name: 'destroy',
// text: ' ',
// width: 10,
// },
// ],
// title: 'Actions',
// // width: '150px',
// },
],
};
},
computed: {
gridDataResult: {
get() {
// const data = process(this.$store.getters.aggregatedBoDataList,
// {
// sort: this.sort,
// take: this.take,
// skip: this.skip,
// filter: this.filter,
// group: this.group,
// });
// console.log(data);
return process(this.$store.getters.aggregatedBoDataList,
{
take: this.take,
skip: this.skip,
sort: this.sort,
filter: this.filter,
group: this.group,
});
},
set(data) {
return process(data,
{
take: this.take,
skip: this.skip,
sort: this.sort,
filter: this.filter,
group: this.group,
});
},
},
total() {
return this.$store.getters.aggregatedBoDataList
? this.$store.getters.aggregatedBoDataList.length : 0;
},
},
created() {
this.$store.dispatch({
type: 'fetchAggregatedBoData',
count: 200,
});
},
methods: {
createAppState(dataState) {
console.log(`dataState ${dataState}`);
this.group = dataState.group;
this.take = dataState.take;
this.skip = dataState.skip;
this.girdDataResult(dataState.data);
// this.getData();
},
groupChange(event) {
console.log(event);
},
dataStateChange(event) {
console.log(`data state ${event}`);
this.createAppState(event.data);
},
expandChange(event) {
console.log(`expand state ${event.target.$props.expandField}`);
this.$set(event.dataItem, event.target.$props.expandField, event.value);
},
pageChangeHandler(event) {
this.skip = event.page.skip;
this.take = event.page.take;
},
sortChangeHandler(e) {
this.sort = e.sort;
},
filterChange(ev) {
this.filter = ev.filter;
},
columnReorder(options) {
this.columns = options.columns;
},
},
};
</
script
>
<
style
>
.customPosition { margin-top:100px}
</
style
>
I am facing issue with display number of rows in a particular group header in kendo grid group header template in single file component in Vue.
This is my code.
<kendo-datasource ref=
"localDataSource"
:data=
"filteredUsers"
:group=
'{ field : "Role", aggregates: [ { field: "Role", aggregate: "count" }] }'
>
</kendo-datasource>
<kendo-grid :height=
"500"
:data-source-ref=
"'localDataSource'"
:resizable=
"true"
:filterable=
"false"
:sortable-allow-unsort=
"true"
:sortable-show-indexes=
"true"
:scrollable-virtual=
"true"
:pageable-numeric=
"false"
:pageable-previous-next=
"false"
:pageable-messages-display=
"'Showing {2} users'"
:editable=
"'popup'"
:toolbar=
"[{name: 'excel', text: 'Excel'}]"
:excel-file-name=
"'Motadata_UserListing.xlsx'"
:excel-filterable=
"true"
>
<kendo-grid-column :selectable=
"true"
:width=
"35"
></kendo-grid-column>
<kendo-grid-column :field=
"'UserId'"
:hidden=
"true"
></kendo-grid-column>
<kendo-grid-column :field=
"'UserName'"
:width=
"150"
></kendo-grid-column>
<kendo-grid-column :field=
"'UserType'"
:width=
"180"
></kendo-grid-column>
<kendo-grid-column :field=
"'Role'"
:width=
"170"
:group-header-template=
'headerTemplate'
></
kendo-grid-column
>
<kendo-grid-column :field=
"'AssignedGroups'"
></kendo-grid-column>
<kendo-grid-column :field=
"'Email'"
:width=
"210"
></kendo-grid-column>
<kendo-grid-column :field=
"'Description'"
:width=
"200"
></kendo-grid-column>
<kendo-grid-column :field=
"'Status'"
:width=
"170"
:template=
"this.toggleTemplate()"
></kendo-grid-column>
</kendo-grid>
Vue js code
data () {
return {
users:[ {
"UserId":1,
"UserName":"Rahul",
"UserType":"System Users",
"Role":"Super Admin",
"AssignedGroups":"Sales",
"Status":true,
"Email":"rahul@motadata.com",
"Description":"Rahul is a java developer"
},
{
"UserId":2,
"UserName":"Meet",
"UserType":"System Users",
"Role":"Super Admin",
"AssignedGroups":"Finance",
"Status":false,
"Email":"meet@motadata.com",
"Description":"meet is a CA"
},
{
"UserId":3,
"UserName":"Ravi1",
"UserType":"System Users",
"Role":"Admin",
"AssignedGroups":"Sales",
"Status":true,
"Email":"ravi@motadata.com",
"Description":"Ravi is a java developer"
},
{
}]
}
},
Methods:{
headerTemplate () {
return kendo.template("Role #=value# (#= count #)");
}
}