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
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
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=
""
;
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!
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.
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.
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.
Followed the below steps:
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>
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
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