Questions on Kendo UI for Vue Forum

1 answer

226 views

Kendo vue UI Grid column with Vue bootstrap Form Datepicker calender is not showing completly inside the grid column cell

We have a Kendo vue UI Grid column with Vue bootstrap Datepicker as a custom column.

When we click the calender icon it is partially showing inside the cell. I want it to be show as an popup outside the cell.

Below is the code snippet from the custom cell component

right now it show like the attached screenshot:

Please suggest a solution for achieving the same.

Thank You

Grid

answered on 10 Jun 2020

1 answer

126 views

yarn build generate errors

When a I want to generate a production version, the next error is emitted by the compiler.

No overload matches this call.
The last overload gave the following error.
Argument of type 'ComponentOptions<InputAllMethods, DefaultData<InputData>, DefaultMethods<InputAllMethods>, InputComputed, RecordPropsDefinition<...>, Record<...>>' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
Types of property 'methods' are incompatible.
Type 'DefaultMethods<InputAllMethods> | undefined' is not assignable to type 'DefaultMethods<Vue> | undefined'.
Type 'DefaultMethods<InputAllMethods>' is not assignable to type 'DefaultMethods<Vue>'.
Index signatures are incompatible.
Type '(this: InputAllMethods, ...args: any[]) => any' is not assignable to type '(this: Vue, ...args: any[]) => any'.
The 'this' types of each signature are incompatible.
Type 'Vue' is not assignable to type 'InputAllMethods'.

General Discussions

answered on 10 Jun 2020

4 answers

125 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.5K+ 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

98 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

589 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

848 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

125 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