Questions on Kendo UI for Vue Forum

5 answers

475 views

Kendo chart not covering the full width of the card and not working on resize

I am loading the kendo vue ui chart and displaying that in bootstrap cards (which is inside the bootstrap tab).
But some reason that that doesn't cover the entire width of the cards and render being so small.
There is already the style as: width: 100%; height: 100%; in the SVG of the chart but that doesn't expand. But when I changed some data then it occupies the full width.

Why it is not rendering properly initially? What's the issue causing this and what is the workaround for this?

http://jsfiddle.net/pdLncxoy/

General Discussions

answered on 11 Sep 2020

1 answer

11 views

Can I make the entire Vue Card component clickable for a single link?

Card

answered on 10 Nov 2023

6 answers

488 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

5 answers

544 views

Grid - card view

Hi

Is it possible to switch to a card view in the grid component? If not, is it possible to keep the filter options from <kendo-grid> and then have a switch to change between the <kendo-grid-column>'s and another custom view?

Or maybe another suggestion?

answered on 01 Feb 2019

1 answer

162 views

Data Cards Vs DataGrid listing results

Hey Guys,

Wondering if anyone can assist in finding a solution to using Kendo UI grid data in a more MODERN Data Card solution such as https://www.google.com/flights results listings for instance (See attached) vs a standard Datagrid. I see that Kendo offers this

https://docs.telerik.com/devtools/winforms/controls/cardview/overview

However, this is far and away from a modern solution for Data Card UI. Of course, this will require sorting the filtering for cards, not grid. It would be awesome if the cards could interact with data from data grids too...

Any thoughts?

Thx in advance!

Michael

answered on 04 Feb 2019

3 answers

278 views

Kendo UI Grid Vue- scroll to selected row

Hi,
I am having two grid's in my page and I want to scroll to a particular row when the page gets loaded.

Each rows are having unique years and I want to scroll to the current year row once the page is loaded, with the class selector and the year value inside <td> i can identify the row into which I have to scroll.

I have done the similar functionality in another project but there we are using kendo UI for jquery version and https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-selected-row link I had followed to achieve the same. As my current requirement is for Kendo UI Grid for Vue , I am looking forward to the correct solution or an approach for achieving the same..

Thank you for your help in advance.
Best regards
Jaydeep

Grid

answered on 19 Jan 2021

2 answers

867 views

Uncaught (in promise) ReferenceError: kendo is not defined

Hello,

I am receiving the following error when I try to implement ListView in my current project, "Uncaught (in promise) ReferenceError: kendo is not defined". I have seen similar issues posted but none of those solutions seem to apply to my situation.

In my current project I have implemented Kendo Grid and Dropdown. You can see below that the error is originating from the KendoListViewMixin.js file. I have installed the latest version of both "@progress/kendo-listview-vue-wrapper" & "@progress/kendo-ui", which should be all I need for what I am doing. Any insight into what I might be missing?

ListView wrapper