Telerik Forums
Kendo UI for Vue Forum
1 answer
27 views

We use data-testids (an attribute) for our test automation.  It looks like on an internal component like buttons in popup boxes and rows in a grid that we can no longer add these.  Is there some way in KendoUI that we can add these tags for our automation testing.  KendoMenu items  is an example where we like to add them for each menu item that it seems like we can't

Thank You,
Anthony Rizzolo

 

Konstantin Dikov
Telerik team
 answered on 24 Nov 2023
0 answers
22 views
The company I am employed at recently acquired Telerik Kendo UI, and we have been utilizing it for a few months now. Having dedicated many weeks to working with this product, I am now interested in learning about the opinions of others regarding it. Please take note that prior to this, my experience with frameworks was limited to using Bootstrap, Ionic, and other open-source options.
david
Top achievements
Rank 1
 asked on 24 Nov 2023
1 answer
17 views

For the data tools filter is it possible to customize the dropdownlist component that is used to display the list of fields assigned to the :fields prop? I have followed the  documentation for customizing the editors used for the fields input values , using slots, which works well. However I wanted to add the "filterable" attribute to the fields dropdown list as we have a large number of fields in the list and it would be good to be able to filter the list via a searchbox. 

Konstantin Dikov
Telerik team
 answered on 23 Nov 2023
1 answer
48 views

Hello,

Since moving from Kendo UI for Vue 3.9.x to 3.14.2, icons are no more showing in components (ie: in a button). You can find a stackblitz here with 3 buttons (Cog, Cut, Paste), and as we can see, icons are not visible anymore:

https://stackblitz.com/edit/vitejs-vite-yf1mg5

I tried to inject the use of font instead of SVG as indicated here: https://www.telerik.com/kendo-vue-ui/components/styling/migrating-font-to-svg/#toc-continue-using-font-icons

But it does not have any effect.

How can I have back the icons ?

Vessy
Telerik team
 updated answer on 20 Nov 2023
0 answers
48 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


1f9xdq (forked) - StackBlitz

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 16 Nov 2023
1 answer
28 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
23 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
54 views
Can I make the entire Vue Card component clickable for a single link?
Vessy
Telerik team
 answered on 10 Nov 2023
1 answer
27 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
38 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 (&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>

Vessy
Telerik team
 answered on 30 Oct 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
NumericTextBox
Scheduler wrapper
DataSource wrappers (package)
MultiSelect
Styling / Themes
Calendar
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
MultiSelect wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?