Questions on Kendo UI for Vue Forum

4 answers

135 views

event height resizing when scheduler pdf export

Hi

I have a question about scheduler's pdf export style.

I am using eventTemplate to show multiple lines of additional information in one event.

And when exporting to pdf, using .k-pdf-export to increase the font size of additional information in the event.

.k-pdf-export .k-scheduler .scheduler-info

{

font-size: 1.2em !important;

}

And I added the code below to increase not only the font size, but also the height of the scheduler table and the height of each event.

.k-pdf-export div.k-event

{

height: 110px !important;

}

.k-pdf-export .k-scheduler-monthview .k-scheduler-table td

{

height: 130px !important;

}

As a result, the height size increased as desired, but the height gap between the events did not widen, resulting in an unnatural appearance (see attached file).

When exporting in pdf, how can I increase the font size, event height, table height, and the interval between events to be constant as I want?

It seems to me that I need to modify the "top" property(css style) of each event div in the scheduler.

Anyway, I would be grateful if you could tell me how to do it.

answered on 25 May 2020

6 answers

1.2K+ views

TypeError: Cannot read property 'getTime' of undefined

In my chart I am binding two series. On create of my component I build the series and bind to the kendo ui chart component. The series look like [{Price:xxxx, DateTime:xxxx}, {Price:xxxx, DateTime:xxxx}, {Price:xxxx, DateTime:xxxx} .... etc] . I set the series data by setting the chartSeries.data property. The chart displays correctly but I get this error:

TypeError: Cannot read property 'getTime' of undefined

answered on 15 May 2020

1 answer

2.6K+ views

Show/hide columns on column menu(kendo grid)

Hi,

I have simple two questions.

I'm comparing both Kendo Vue Native components and wrapper components to migrate from Kendo jQuery.

Wrapper components

-> If I set :columnMenu="true", I can see a list of menus like sort ascending and it also has 'Columns' menu which shows or hides columns by checking or unchecking check boxes.

However When I implement same components by using native components, the list doesn't show 'Column' menu.

Can someone tell how to show the column menu???

And, if I already have license for jQuery, is it possible to get license for Vue without extra payment??

Grid

answered on 30 Apr 2020

1 answer

107 views

Inline edits for grouped rows

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

604 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

868 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

154 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

140 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

304 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

128 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