Telerik Forums
Kendo UI for Vue Forum
12 questions
Sort by
1 answer
143 views

Hello

I have a question about the tooltip function.

I've made a modification to Tooltip-Multiple Targets.

-remove width props
-Tooltip insertion for each language

https://www.telerik.com/kendo-vue-ui/components/popups/tooltip/multiple-targets/

If you hover over a long tooltip, it will appear properly, but if you check the short tooltip first and then try to see the long tooltip, the tooltip's width will be shortened.

Hopefully the width will be adjusted to auto.

 

<div id="vueapp" class="vue-app">
    <kendo-tooltip ref="kTooltip" id="agglomerations" :filter="'span'"  :position="'bottom'">
        <span href="#" title="방탄소년단·태연, '서울가요대상' 앨범·음원 대상…엑소 4관왕(종합)">Korean</span><br /><br />
        <span href="#" title="방탄" id="losangeles">Korean - Short</span><br /><br /> 
        <span href="#" title="Apple Music is available in iTunes, and for iOS and Android devices.">English</span><br /><br />
<span href="#" title="BTS" id="osaka">English - Short</span><br /><br />
        <span href="#" title="注文書、請求書などを装ったメールに添付された Excel ファイルに注意">Japanese</span><br /><br />
        <span href="#" title="注意" id="moscow">Japanese - Short</span>
    </kendo-tooltip>
</div>

Ivan Danchev
Telerik team
 answered on 03 Feb 2020
1 answer
310 views

By default, the grid column menu (https://www.telerik.com/kendo-vue-ui/components/grid/columns/column-menu/) displays a weird tootip on hover, containing the field name and a "Column Menu" text:

I'd like to either remove this tooltip or customize it (for instance, by changing it's text with the title - and not the name - of the field, plus removing the "Column Menu" text). Is there a way to to this?

The documentation contains a "GridColumnMenuItemProps" section, and I see a "title" prop that could be useful (https://www.telerik.com/kendo-vue-ui/components/grid/api/GridColumnMenuItemProps/#toc-title). But I haven't found a way to pass this prop (at least, I haven't found anything on the documentation about it).

Is this possible?

Petar
Telerik team
 answered on 14 Mar 2022
1 answer
500 views

Hi,

I'm looking for the best way to display a tooltip when hovering over the value of a cell (very useful for custom commands).

I have already defined a template for the line and it works:

<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class="k-master-row"  data-uid="#: uid #" role="row">
<td role="gridcell">   #: OrderID # </td>
<td role="gridcell">   #: ShipName #</td>
<td role="gridcell">   #: Freight #</td>
<td role="gridcell">   #: OrderDate #</td><br>      
</tr>
</script>

 

What is the best way to show a TootlTip for example hover  "OrderID " value ?
Thanks in advance ;-)

Veselin Tsvetanov
Telerik team
 answered on 04 Apr 2019
1 answer
109 views

I'm using vuejs.

I've got a chart with a tooltip:

import { bytes } from '...fileBytesIsIn'
get tooltip () {
  const sharedTemplate = `<table class="tooltip-table" width="150">
  // removed header to save space
  # for (var i = 0; i < points.length; i++) { #
    <tr>
      <td><div class="swatch #: points[i].series.class#">&nbsp;</span></td>
      <td class="name" nowrap>#: points[i].series.name#</td>
      <td class="val">#: bytes(points[i].value) #</td>
    </tr>
  # } #
  </table>`
  return {
    visible: true,
    shared: true,
    template: '#= value #',
    sharedTemplate: sharedTemplate
  }
}
My issue: bytes is undefined. I've tried it like a filter 
#: points[i].value | bytes #
and several other ways, but nothing seems to work. Is there any way I can apply my formatting function to this value in the tooltip sharedTemplate so I can display these values as readable file sizes?
Plamen
Telerik team
 answered on 30 Jul 2021
1 answer
473 views

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text,  I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?

Petar
Telerik team
 answered on 15 Apr 2022
1 answer
76 views

 

Hello, Exists any way to show a tooltip in the bubble layers?
Thanks in advance

Petar
Telerik team
 answered on 20 Oct 2022
1 answer
36 views

I am trying to figure out how to replace the points (open circle dots) on a line chart with just a smooth line. I have been looking through the chart API and thought the solution would be the plot area border dash type. However, this doesn't appear to do anything. I am either implementing it incorrectly or it is not the correct solution. A third possibility is that it is buggy and does not work. I am using Vue with typescript. Below is my attempted implementation:

<kendo-chart :data-source="chartData"
:series="series"
:pannable-lock="'y'"
:zoomable-mousewheel-lock="'y'"
:zoomable-selection-lock="'y'"
:category-axis="categoryAxis"
:theme="'sass'"
:category-axis-title-text="'Time'"
:value-axis-title-text="'Attribute'"
:tooltip="tooltip"
:plot-area="plotArea">
</kendo-chart>

plotArea: any = {
border: {dashType: 'solid'}
};
Paul
Top achievements
Rank 1
 answered on 27 Feb 2020
8 answers
111 views

There is a tabstip problem in ios 13.3. (iPad)

The tabstrip scroll icon is not clicked.

Click doesn't work so it's impossible to check the contents of the next tab.

Please confirm.

https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/

Ivan Danchev
Telerik team
 answered on 22 Jan 2020
3 answers
82 views

Hi !

I'm using the kendo editor in the Vue environment.

I want to create a Kendo editor Custom tool using the following template.

I would like to create a Kendo editor custom tool for file upload using the template below. The internal logic is in place and we just want to see an example of creating a custom tool with a template.

--

 <input class="hide_file" type="file" @change="doUploadInput($event.target)"
            @drop="doUploadInput($event.target)" multiple>
          </input>

--

This is well enough in the official documentation but I would like to see a more detailed example.

thank you. have a good day

: )

Petar
Telerik team
 answered on 05 Dec 2019
3 answers
242 views
Hello,
We use KendoUI with our Vue app and recently upgraded the kendo resource we use.


Old resources included:
"@progress/kendo-charts-vue-wrapper": "2018.3.1025",
"@progress/kendo-dateinputs-vue-wrapper": "2018.3.1025",
"@progress/kendo-drawing": "1.5.12",
"@progress/kendo-dropdowns-vue-wrapper": "2018.3.1025",
"@progress/kendo-theme-default": "2.63.0",
"@progress/kendo-ui": "2018.3.1219",
"@progress/kendo-validator-vue-wrapper": "2019.2.621"


New resources include:
"@progress/kendo-charts-vue-wrapper": "2020.2.912",
"@progress/kendo-dateinputs-vue-wrapper": "2020.2.912",
"@progress/kendo-drawing": "1.9.2",
"@progress/kendo-dropdowns-vue-wrapper": "2020.2.912",
"@progress/kendo-theme-default": "4.22.1",
"@progress/kendo-ui": "2020.3.915",
"@progress/kendo-validator-vue-wrapper": “2020.2.912”


As you can see in the attached image, following this upgrade, the kendo validator error message is not rendered correctly.
Following this we have several questions:




1) Can you pinpoint us which of the modules in the list above is responsible for the customization of the error message? This way we will be able to revert this specific module to the old version while keeping the rest of the modules updated.


2) If we wish to keep the new modules - can you guide us how we can match the styling? As we use Kendo all over the app, we are worried there are going to be a lot of places where such update will be required.


3) Are there any breaking changes for upgrading from 2018.3 to 2020.2 or to any of the upgrades mentioned above? If there are - where can we see them?


4) In a general note: Are you aware of any problems when using the old versions (e.g. 2018.3) on updated browsers / smartphones or should it be considered safe to stick with the older versions for some more time?


Thanks!
Petar
Telerik team
 answered on 16 Oct 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor wrapper
Input
NumericTextBox
Scheduler wrapper
Editor
DataSource wrappers (package)
DateInput
MultiSelect
Styling / Themes
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Calendar
Chart wrappers (package)
DropDownList wrapper
Window
Chart
Tooltip
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TreeView wrapper
TabStrip
Card
FloatingLabel
Form
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
TreeView
Notification
Menu
TreeList
Toolbar
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
TimePicker
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
ListView
Signature
ChunkProgressBar
+? more
Top users last month
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Jie
Top achievements
Rank 2
Iron
Iron
Iron
Janko
Top achievements
Rank 1
Iron
Iron
Mahesh
Top achievements
Rank 1
Iron
Eli
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Jie
Top achievements
Rank 2
Iron
Iron
Iron
Janko
Top achievements
Rank 1
Iron
Iron
Mahesh
Top achievements
Rank 1
Iron
Eli
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?