Telerik Forums
Kendo UI for Vue Forum
69 questions
Sort by
1 answer
58 views

Hello.

I implemented the kendo ui grid vuejs.

I have a question, how it's possible "sticky" the Expand column?

I have other columns "sticky" and works fine, but the "expand" column (master details) don't keep sticky. and i need to hide the "menu filters" in this columns too

Thanks in advance

 

Plamen
Telerik team
 answered on 20 Sep 2022
1 answer
544 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
2 answers
778 views

I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.

I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.

Does anybody know If I can do this while creating the control?

<div id="fund" class="col-xs-3"> input class="required" data-bind="title: $parent.selectedFund, kendoComboBox: { placeholder: 'Start typing to search...', value: $parent.test, widget: $parent.searchSource, dataTextField: 'managerName', dataValueField: 'managerId', filter: 'contains', autoBind: false, minLength: 3, enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value change: function(){ if(this.value() && this.selectedIndex == -1){ setTimeout(function () {$parent.selectedManagerId(null);}, 100);}}, dataSource: { serverFiltering: true, transport: { read: $parent.retrieveManager }}}" /></div>

Delano
Top achievements
Rank 1
 answered on 08 Feb 2020
1 answer
62 views

Hello,

Am having trouble using the .removeFiles() method of the Vue Upload component.  I was wondering if anyone had an example of this in use or could point to some documentation describing how to use it?  The Vue API documentation for the component doesn't seem to include this functionality.  Is it even supported?  I do see the removeFiles method when inspecting the component using web developer tools.

 

Thanks!

Matthew
Top achievements
Rank 1
Iron
Iron
 answered on 24 Nov 2022
1 answer
386 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
196 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
2 answers
3.5K+ views

I have a column like this:

 

<kendo-grid-column :command="[{name: 'open', click: open}]"></kendo-grid-column>

 

It works fine, but I want it to show a bootstrap glyphicon and no text instead of the text "open" that is showing now.

Is there any way to template the column so that I can get the click event and also use any content I want inside the column?

Thanks in advance.

 

Plamen
Telerik team
 answered on 05 Oct 2020
13 answers
293 views

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

<kendo-scheduler id="scheduler"
      :data-source="localDataSource"
      :event-template="eventTemplate"
      :editable="{template:editTemplate}"
    >

 

The code of the method editTemplate()

methods: {
    editTemplate: function(){
      return {
         template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
      
    }
},

 

The code of the component that contains the custom template

<template>
    <div class="k-edit-form-container">
        <p> Titre <input type="text" /> </p>
        <p>
            <span >Start <input data-role="datetimepicker" name="start" /> </span>
            <span >End <input data-role="datetimepicker" name="end" /> </span>
        </p>
    </div>
</template>
 
<script>
export default {
    name:"CustomEditTemplate",
}
</script>

 

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

 

Thanks.

 

 

 

Petar
Telerik team
 answered on 12 Apr 2021
2 answers
84 views

Hi,

Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(

Adam
Top achievements
Rank 1
Iron
 updated answer on 12 Mar 2024
2 answers
2.3K+ views

I've found answers to this for other Kendo products, but I can't figure out the syntax for the Vue wrapper. I have a column in a grid that I want to show "yes" or "no" for based on the datasource value, which is boolean. This answer: https://www.telerik.com/forums/kendo-grid-showing-yes-or-no-instead-of-true-or-false specifies that I should do something like this:

columns: [
    { field: "BooleanVal", template: "#= BooleanVal ? 'yes' : 'no' #" }
]

I'm not using "columns", rather am using `<kendo-grid-column>`. I've tried several things along the lines of

<kendo-grid-column :field="active" :template="#= active ? 'yes' : 'no' #"></kendo-grid-column>

But nothing seems to work. How do I display "yes" or "no" for a boolean value in a kendo-grid-column?

AJ
Top achievements
Rank 1
 answered on 08 Feb 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
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
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?