or
0 answers
63 views
Hello, I'm trying to understand why the following lines of CSS are needed for the DropDownList (configured with filtering and custom height set via popup-settings) to work.
If I uncomment any of these CSS lines, the following unwanted behavior occurs:
1: scroll down a bit, like 100 or 200px so that the the DropDownList button is close the top of the viewport
2: click on the dropdown button
3: notice that the entire page scrolls to the top, almost as if the DropDownlist tried to open to top first but then mid-animation opened to the bottom.
Specifically the scrolling to the top of the page, is a behavior I'm trying to prevent.
Adding the extra lines of CSS is not a problem for me, however when the Vue app's mount target is nested, the unwanted behavior can be observed again. In the stackblitz you can demo this by nesting the mount target inside a <div>. Because my app's mount target is really deeply nested inside a DOM I don't think it's viable to add CSS styles to every wrapping element.
Is there a workaround for this? Thanks in advance
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
Rank 3
Iron
Iron
Iron
updated question
on
16 Nov 2023
1 answer
41 views
Is there any way to localize components in vue? I found that localization does not translate all text。Can you provide a case study or refer to the corresponding documentation?
Vessy
Telerik team
answered
on
14 Nov 2023
1 answer
34 views
In the treeList, as long as you define a name in the columns cell, then bind it in the template, it will work. However, using the same method for grid does not work.
Konstantin Dikov
Telerik team
answered
on
14 Nov 2023
1 answer
117 views
Can I make the entire Vue Card component clickable for a single link?
Vessy
Telerik team
answered
on
10 Nov 2023
1 answer
41 views
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>
Vessy
Telerik team
answered
on
10 Nov 2023
1 answer
60 views
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 (°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>
Vessy
Telerik team
answered
on
30 Oct 2023
0 answers
33 views
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.
1 answer
63 views
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.
Filip
Telerik team
answered
on
06 Oct 2023
0 answers
38 views
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.
Telerik Admin
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
06 Oct 2023
1 answer
33 views
Hi there. How can I create child items for a particular drawer item
Konstantin Dikov
Telerik team
answered
on
05 Oct 2023
