Telerik Forums
Kendo UI for Vue Forum
10 questions
Sort by
3 answers
845 views

I know ListBox probably doesn't support this out of the box but I'm really struggling to find a solution to my problem.

I would like to customize the item template to contain a checkbox and a text input when it is moved to the right ListBox. I am able to put a checkbox and input in there no problem but I can't get the textbox to focus when clicked.I would also like to bind its value to the dataItem but I'm sure I can figure that part out once I'm able to actually type in the box.

Here is a Dojo demonstrating the problem:

https://dojo.telerik.com/eZuKoMoh/2

Ivan Zhekov
Telerik team
 answered on 10 Dec 2018
1 answer
71 views

I have been able to successfully bind a Vue ref array to the first listbox control's data-source property successfully.  I am also able to use the toolbar controls to move items back and forth between two listbox controls.  I am not able to bind a Vue ref array for selected items on the second listbox control.  I am also unable to get the "add" and "remove events to invoke my handler functions.  Please advise on how to get the selected values that are present in the second listbox control.  In the example below, how do I get "Name 2" out of the second listbox control?

 

Thank you for your help

Petar
Telerik team
 answered on 28 Sep 2022
1 answer
63 views

I have implemented a drop down list as follows.  i want to drag items from this list.  :draggable="true" :dropzone="true"

doesn't seems to trigger this. Items cannot be dragged. How to achieve this? Thank you in advance

<kendo-dropdownlist
v-model="dropdownlistValue"
:data-source="dataSourceArray"                                                     
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'"                  
:draggable="true"        
:dropzone="true">
</kendo-dropdownlist>
 
dataSourceArray:any []=[{ text: 'Small', value: '1' }, { text: 'Medium', value: '2' }, { text: 'Large', value: '3' },  { text: 'X-Large', value: '4' }, { text: '2X-Large', value: '5' } ];  
dropdownlistValue= "";
Nencho
Telerik team
 answered on 31 Jul 2019
1 answer
84 views

Hi, we have a multilanguage application and we need to change the Kendo UI for Vue language dynamically.

Currently, we were doing it like this and it worked:

 

var that = this;
      var selectedLang = this.$refs.dl.kendoWidget().value();
      $.getScript("https://kendo.cdn.telerik.com/2018.3.1017/js/messages/kendo.messages." + selectedLang + ".min.js", function() {
        var lb = that.$refs.lb.kendoWidget();
        lb.setOptions({
          messages: kendo.ui.ListBox.fn.options.messages
        });
      });

 

But we need the script to grab it locally for possible own modifications. I am trying this way :

var that = this;
            var script = document.createElement('script');
           
            script.src = "../../../../storage/kendo-grid/messages/kendo.messages." +selectedLang+ ".min.js";
            if(document.head){
                document.head.appendChild(script);
                var lb = that.$refs[ref].kendoWidget();
                lb.setOptions({
                    messages: kendo.ui.ListBox.fn.options.messages
                });
            }

 

But it gives me a javascript error when pointing to the script ('Module is not defined').

Could you guide me a bit? Thanks!









Petar
Telerik team
 answered on 12 Mar 2021
11 answers
193 views

Is there way to identify drop from external item ie. a list item from a list. into the scheduler?

I want to create appointments on drop event inside schedular.

Thank you in advance. 

Veselin Tsvetanov
Telerik team
 answered on 09 Aug 2019
1 answer
167 views

We have a multilanguage application and we need to change the Kendo UI for Vue language dynamically.

 

We are found a Angular example https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/AngularJS/angular-dynamic-language-change, but this way is not available with Vue.

 

For our custom message with use vue-i18n plugin, but we want to use the kendo.messages.xx-XX.js files, but only (the last) is active.

 

Thks.

 

 

Nencho
Telerik team
 answered on 13 Nov 2018
1 answer
133 views

Hi.  I have one reactive object that holds the data for all of tabs in a tabstrip.  I have dynamic fields in these tabs.  For example, the selection of an autocomplete field in Tab A updates the data that is in a list box in Tab B.  I'm not seeing the refresh of data when i navigate.  The data is all loaded at once.  How do I force a refresh of the tabs?

I've also tried using state management, but it's still not doing what I would like.

Konstantin Dikov
Telerik team
 answered on 11 Sep 2023
0 answers
680 views

Followed the below steps:

  1. pnpm create vite
  2. give name for project, select vue-ts template
  3. pnpm install @progress/kendo-vue-popup @progress/kendo-licensing
  4. Change App.vue as mentioned below
  5. pnpm dev (works)
  6. pnpm build (fails with type errors)

I have also added a sample project on github

Am I missing something?

Type errors:

c:\temp\kendo-popup-with-vite>pnpm build

> kendo-popup-with-vite@0.0.0 build c:\temp\kendo-popup-with-vite
> vue-tsc --noEmit && vite build

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:2:57 - error TS2307: Cannot find module 'vue/types/options' or its corresponding type declarations.

2 import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
                                                          ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:63:72 - error TS2304: Cannot find name 'Vue'.

63 export interface PopupAll extends PopupMethods, PopupState, PopupData, Vue {
                                                                          ~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:68:37 - error TS2304: Cannot find name 'Vue'.

68 declare let Popup: ComponentOptions<Vue, DefaultData<PopupData>, DefaultMethods<PopupAll>, {}, RecordPropsDefinition<PopupProps>>;
                                       ~~~


Found 3 errors.

 ELIFECYCLE  Command failed with exit code 2.

App.vue

<script lang="ts">
import { defineComponent } from 'vue';
import { Popup } from '@progress/kendo-vue-popup';

export default defineComponent({
  components: {
    'k-popup': Popup,
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    onClick() {
      this.show = !this.show;
    }
  }
});

</script>

<template>
  <div>
    <button class="k-button" @click="onClick" ref="buttonWithPopup">Click Me</button>
    <k-popup :anchor="'buttonWithPopup'" :show="show">Popup content.</k-popup>
  </div>
</template>


Shashwat
Top achievements
Rank 1
Iron
Iron
 asked on 04 Jan 2022
0 answers
105 views

Hello,

Kendo UI version: 2022.3.1109
Kendo Scheduler Vue Wrapper version : 2022.3.1109

Browser: Safari > v12

By default, iPad on iOS greater than version 12 using Safari are show websites in desktop mode. When the Scheduler is displayed, the scroll is not working (even if we force the settings mobile to true or phone or tablet). So we can't scroll through the timeline.

When we switch the iPad to request a mobile site, the scroll is working.

With an iPad with iOS version 12 or below, there is no issue.

I think the issue is related to this github issue I found for the Spreadsheet wrapper for vue: https://github.com/telerik/kendo-ui-core/issues/5300

Is there a work around for that ?

Best Regards,

Fabien

SysCo
Top achievements
Rank 1
Iron
Iron
 asked on 22 Dec 2022
3 answers
316 views

Hi all, 

i'm struggling to achive a simple task: double click on a row to call a method. How can i do that? 

what i'm expecting is simple:

 

<Grid
     :data-items="gridResult"
     :columns="columnsToDisplay"
     :resizable="true"
     :pageable="pageAble"
     :pageSize="pageSize"
     @dblclick="callMyMethodForDoubleClick"         
     >
</Grid>

something like this

Plamen
Telerik team
 answered on 08 Dec 2020
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
Chart wrappers (package)
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
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
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?