Questions on Kendo UI for Vue Forum

1 answer

521 views

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

Card

answered on 10 Nov 2023

1 answer

132 views

RadialGauge scale ranges labels for 'to'

Is there a way to show the values of 'to' properties in the ranges objects as labels for each range?

For now I'm only able to see the 'majorUnit' label

<template>
<div>
<RadialGauge :pointer="pointer" :scale="scale" />
</div>
</template>
<script>
import { RadialGauge } from "@progress/kendo-vue-gauges";
export default {
components: {
RadialGauge,
},
data() {
return {
pointer: [
{
value: 3,
color: "#ffd246",
},
{
value: 5,
color: "#28b4c8",
},
{
value: 13,
color: "#78d237",
},
],
scale: {
labels: {
visible: true,
},
majorTicks: {
visible: false,
},
minorTicks: {
visible: false,
},
majorUnit: 9,
max: 13,
ranges: [
{
from: 0,
to: 4,
color: "#ffc700",
},
{
from: 4,
to: 9,
color: "#ff7a00",
},
{
from: 9,
to: 14,
color: "#c20000",
},
],
},
};
},
};
</script>

Gauge

answered on 10 Nov 2023

1 answer

152 views

I am not sure what is causing this error when using the aggregate sum and baseunit props on the same chart ?

I keep running into a Vue warn error when trying to use a chart that has its aggregate prop set to sum and it's baseunit prop set to days,weeks or years. The error says "You may have an infinite update loop in watcher with expression "dataItems" ". I have also attached a picture of the full error for better context. I have tried both the native component chart and the wrapper component chart. Both produce the exact same error. I am currently using Vue 2 to be specific Vue 2.7.0 . I am assuming that being on Vue 2 is causing the error because the code I have attached below works on stackblitz but on stackblitz the dev environment is using Vue 3 not 2.

Here is my code using the native component:

<template>
  <div>
    <Chart>
      <ChartTitle :text="'Daily Max (&deg;C)'" />
      <ChartSeries>
        <ChartSeriesItem
          :type="'line'"
          :field="'VisitCount'"
          :category-field="'Date'"
          :data-items="testor"
          :aggregate="'sum'"
          :name="'test'"
        />
      </ChartSeries>
      <ChartCategoryAxis>
        <ChartCategoryAxisItem :base-unit="'weeks'" />
      </ChartCategoryAxis>
    </Chart>
  </div>
</template>

<script>
import {
  Chart,
  ChartTitle,
  ChartSeries,
  ChartSeriesItem,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
} from '@progress/kendo-vue-charts';
import 'hammerjs';

export default {
  components: {
    Chart,
    ChartTitle,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
  },
  data: function () {
    return {
      testor: [
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-05T00:00:00.000',
          Date: new Date('2018-01-05T00:00:00.000'),
        },
        {
          VisitCount: 50,
          timestamp: '2018-02-01T00:00:00.000',
          Date: new Date('2018-02-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-04-01T00:00:00.000',
          Date: new Date('2018-04-01T00:00:00.000'),
        },
      ],
    };
  },
};
</script>

Here is my code using the wrapper component:

<template>
  <div>
    <chart
      ref="chart"
      :series-defaults-type="'line'"
      :category-axis="axis"
    >
      <chart-series-item
        :name="'test'"
        :data="testor"
        :category-field="'Date'"
        :field="'VisitCount'"
        :color="'#f3ac32'"
        :aggregate="'sum'"
      >
      </chart-series-item>
    </chart>
  </div>
</template>

<script>
import { Chart, ChartSeriesItem } from '@progress/kendo-charts-vue-wrapper';

export default {
  name: 'App',
  components: {
    chart: Chart,
    'chart-series-item': ChartSeriesItem,
  },
  data: function () {
    return {
      axis: {
        baseUnit: 'weeks',
      },
      testor: [
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-01T00:00:00.000',
          Date: new Date('2018-01-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-01-05T00:00:00.000',
          Date: new Date('2018-01-05T00:00:00.000'),
        },
        {
          VisitCount: 50,
          timestamp: '2018-02-01T00:00:00.000',
          Date: new Date('2018-02-01T00:00:00.000'),
        },
        {
          VisitCount: 13,
          timestamp: '2018-04-01T00:00:00.000',
          Date: new Date('2018-04-01T00:00:00.000'),
        },
      ],
      categories: [
        1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996,
        2000, 2004, 2008, 2012,
      ],
      tooltiptemplate: '#= series.name #: #= value #',
    };
  },
};
</script>

Chart

Chart wrappers (package)

Error

answered on 30 Oct 2023

0 answers

81 views

How to refresh Timeline show width

hi，

Why isn't the content displayed in the Timeline as wide as it actually is? I want this width to be displayed in proportion.

Scheduler

asked on 11 Oct 2023

1 answer

159 views

Editing the Kendo Scheduler Calendar titles

Hi,

I am trying to change the days of the week that appears at the top of the calendar in the Month view like "Monday, Tuesday" etc... . What I want is that when the screen becomes to small it will change to Mon, Tues, and so on.

As for the Week and WorkWeek Views I want to wrap the text at the top so show Mon on top and the date below when the screen gets smaller.

If there is a way to manipulate this area I would appreciate the help.

Thank you.

Scheduler

Scheduler wrapper

answered on 06 Oct 2023

0 answers

74 views

Detached FontIcons from Themes

As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.

General Discussions

asked on 06 Oct 2023

1 answer

93 views

Kendo UI for Vue - Native Drawer Component - sub items

Hi there. How can I create child items for a particular drawer item

Drawer

answered on 05 Oct 2023

0 answers

99 views

Date property in group in Kendo Scheduler Native for Vue

Hi Team,

I'm migrating a project that previously used the Vue wrapper component for the scheduler component to use the vue native component.

Using the wrapper component I could set the date property on the group. ie here (https://demos.telerik.com/kendo-ui/scheduler/date-grouping).

However it appears that date grouping is not available on the Vue native components. Is that correct or have I overlooked something?

EF.

Scheduler

asked on 04 Oct 2023

0 answers

85 views

Timeline display problem

hello，

How does the timeline component aggregate time on the same line，As shown in the figure：

web vue:

wpf:

Scheduler

asked on 01 Oct 2023

1 answer

122 views

How to refresh Timeline data

hello，

I want to refresh the data dynamically, but when I bind the data and modify the data source, the data is not displayed completely, and sometimes it is not displayed at all.

Scheduler

answered on 21 Sep 2023