Questions on Kendo UI for Vue Forum

1 answer

100 views

Hi there,

Is it possible to use the Grid components integrated "edit" mode to edit the group row-level cells? Attached is a screenshot of what we want to accomplish.

If not what might be an alternate approach to achieve this? I considered custom row templates with our own code to handle all row-related behaviors, but want to ask first since perhaps that's overkill.

Thanks in advance.

Grid

answered on 28 Apr 2020

5 answers

598 views

responsive grid

I am using the vue grid wrap with the bootstrap theme and I wonder how I can make my columns responsive or at least keep their size on a smaller screen and can scroll, for that set a width in my component for this reason not Does it work for example

<kendo-grid-column :field="'employee'" :width="160"></kendo-grid-column>

any ideas?

Grid

answered on 24 Apr 2020

6 answers

857 views

native grid grouping not working

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>

Grid

answered on 24 Apr 2020

2 answers

149 views

Spreadsheet for Vuejs, adding tab in tabstrip

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?

General Discussions

answered on 23 Apr 2020

3 answers

135 views

Modifying the group header template (full row not just cell contents)

Hey there,

Attached is screenshot of what I'm looking to accomplish, but the gist of it is that I'd like to be able to customize the groupHeaderTemplate in order to place content in the other cells that are available.

I experimented with `groupHeaderColumnTemplate` as well, but that only works to manipulate the group header template for for the column being grouped.

Any pointers would be greatly appreciated :)

Thanks

Grid

answered on 23 Apr 2020

1 answer

300 views

Wrapper grid dynamic column binding issue

hi,
I have used vue wrapper grid, columns binding as a list. Columns are binded.

<KendoGrid

ref="ContactList"

id="contactListView"

:selectable="'multiple'"

:reorderable="true"

:sortable="false"

:resizable="true"

:scrollable-endless="true"

:filterable="false"

:columns="columnList.filter(x=>x.selected==true)"

:editable="commonContactInfo.isGridEditable"

@change="onContactRowClick"

@save="saveContact"

:data-source="ContactsListForSelection"

@databound="onDatabound"

:allowCopy="true"

></KendoGrid>

ColumnList is as follows.

let columns: any[] = [

{

width: 50,

title: 'Select All',

selectable: 'multiple',

selected: true,

disabled: false

},

{

title: `First Name`,

field: 'firstname',

selected: true,

disabled: true,

isVisible: true,

width: 150

},

{

title: `Middle Name`,

field: 'middlename',

selected: true,

disabled: false,

isVisible: true,

width: 150

},

{

title: `Last Name`,

field: 'lastname',

selected: true,

disabled: false,

isVisible: true,

width: 250

},

{

title: `Initials`,

field: 'initials',

selected: true,

disabled: false,

isVisible: true,

width: 250

},

{

title: `Address`,

field: 'address',

selected: true,

disabled: false,

isVisible: true,

width: 250

}]

I use a seperate method to change this column list. later. There I add new columns to the grid as well.

if (this.commonContactInfo.customFieldsForGroups.length > 0) {

let Customcolumns: any[] = [];

let field = '';

let cusFieldId = '';

this.commonContactInfo.customFieldsForGroups.forEach((cf:CustomFieldsDto) => {

if (cf.pkFieldId !== undefined) {

cusFieldId = cf.pkFieldId;

}

this.commonContactInfo.fetchedContactsList.forEach((cont:ContactDto) => {

Object.keys(cont.customFields).forEach(k => {

if (this.commonHelper.getPlainGuidString(k) === cusFieldId) {

if (cont.customFields[k].DataType === 'DateValue') {

console.log(cont.customFields[k].DateValue);

field = 'customFields[' + k + '].DateValue';

}

if (cont.customFields[k].DataType === 'StringValue') {

console.log(cont.customFields[k].StringValue);

field = 'customFields[' + k + '].StringValue';

}

if (cont.customFields[k].DataType === 'IntValue') {

console.log(cont.customFields[k].IntValue);

field = 'customFields[' + k + '].IntValue';

}

});

Customcolumns.push({

title: cf.fieldName,

field: field, // 'customFields[' + field + '].DateValue',

selected: true,

disabled: true,

isVisible: true,

width: 150

});

let defcolumns = columnsList;

Customcolumns.forEach((tc:any) => {

defcolumns.push(tc);

});

this.ColumnsList= defcolumns;

this.ColumnsList.forEach((e:any) => {

e.selected = true;

});

}

columns are added like this because the data i have is as follows. datafieldvalue (see attached file)

Issue is after this even the columns are added the data in the customfields are not binding.

Any suggestions?

Grid

answered on 23 Apr 2020

1 answer

126 views

Wrapper grid dynamic column binding issue

hi,

I have used vue wrapper grid, columns binding as a list. Columns are binded.

ColumnList is as follows.

I use a seperate method to change this column list. later. There I add new columns to the grid as well.

createContactGridWithCustomFields(customFields: []) {

if (this.commonContactInfo.customFieldsForGroups.length > 0) {

let Customcolumns: any[] = [];

let field = '';

let cusFieldId = '';

this.commonContactInfo.customFieldsForGroups.forEach((cf:CustomFieldsDto) => {

if (cf.pkFieldId !== undefined) {

cusFieldId = cf.pkFieldId;

}

console.log('cfid:', cusFieldId);

this.commonContactInfo.fetchedContactsList.forEach((cont:ContactDto) => {

Object.keys(cont.customFields).forEach(k => {

if (this.commonHelper.getPlainGuidString(k) === cusFieldId) {

if (cont.customFields[k].DataType === 'DateValue') {

console.log(cont.customFields[k].DateValue);

field = 'customFields[' + k + '].DateValue';

}

if (cont.customFields[k].DataType === 'StringValue') {

console.log(cont.customFields[k].StringValue);

field = 'customFields[' + k + '].StringValue';

}

if (cont.customFields[k].DataType === 'IntValue') {

console.log(cont.customFields[k].IntValue);

field = 'customFields[' + k + '].IntValue';

}

});

Customcolumns.push({

title: cf.fieldName,

field: field, // 'customFields[' + field + '].DateValue',

selected: true,

disabled: true,

isVisible: true,

width: 150

});

let defcolumns = this.helperService.loadGridColumns();

Customcolumns.forEach((tc:any) => {

defcolumns.push(tc);

});

}

columns are added like this because the data i have is as follows. datafieldvalue

Issue is after this even the columns are added the data in not binding.

Any suggestions?

Grid

answered on 22 Apr 2020

1 answer

441 views

Grid checkbox column issue

Hello

I'm using the kendo Vue wrapper to implement a grid. I want to have the first column of my grid to be a checkbox column so i can select rows. As the docs suggested I wrote a selectable="true" kendo grid colomn. But no checkboxes are visible, I checked the DOM and it's because there are only input type checkbox tags with class "k-checkbox" added and not the nessecary labels with class "k-checkbox-label". I'm not sure if I'm missing something or the kendo grid column with binding :selectable isn't working properly.

<kendo-grid

ref="vehicleGrid"

:data-source-ref="'vehicleDataSource'"

:groupable="true"

:sortable="true"

:resizable="true">

<kendo-grid-column :selectable="true" :width="50"></kendo-grid-column>

...Other columns....

</kendo-grid>

Thanks for helping me!

Kind regards

Grid

answered on 16 Apr 2020

2 answers

583 views

How to change the format of the current date(Scheduler Component)

Hi

I'm using Kendo Scheduler Component

I use only month view and i want change the format of the current date.

I attached a description picture.

Please give me solution. Thank you.

answered on 03 Apr 2020

5 answers

254 views

Problem with Vue Donut chart incorrect rendering

Hello,
We have implemented Kendo Vue Donut chart, using visual function, that in most cases rendered well.
But we found that on certain devices (regardless bigger or smaller) the chart renders each slice of the donut as a full circle and puts them all one on top of the other. The attached image demonstrates it.
Our investigation shows that it is the result of the seriesDefaults holeSize value AND the visual function stroke line width.
Both are determined programmatically at run time.

The following values result with the correct donut you see in the image:
holeSize: 83
visual stroke width: 22 (or less)

And the following values result with the incorrect donut:
holeSize: 83
visual stroke width: 23 (or more)

Notice it is also related to the holeSize - for example the following will be rendered well:
holeSize: 85
visual stroke width: 23 (or more)

And holeSize 84 with visual stroke width of 23 is rendered incorrectly.

Can you please advise how we can make sure it will always be rendered correctly? Is there a certain ratio between the holeSize and the visual stroke width we need to maintain?

Thanks,

Ron.

answered on 25 Mar 2020