Hi all
I use a kendo grid to display some datas (with VUE JS 3 ) . This one is pageable.
I use the event "page" called when I change the page. I try to call test function from this event but I have the error "this.test" is not a function"...
And in the event "this" is the kendoGrid... How can I access to the function test ?
thanks you !
Hello, is there any chances to disable or do not display the validation dialog upon using the Input component. Based on this example, I want to use the Error component for displaying the validation as Text and I will no longer use the validation dialog.
Btw, I'm using Kendo UI for Vue
I had this working and have tried to identify what change caused this but since yesterday, when I try to render a vue with kedopanelbar I get the following in Firefox debugger:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. found in ---> <KendoPanelbar> <LeftNav> at src\views\LeftNav.vue <App> at src\App.vue <Root>
The kendopanelbar is still being accessed but the error seems to be more to do with webpack etc.
Can anyone suggest where I can look please?
Brian
I've tried to make it work by modifying this official example, here's my code.
Unfortunately when I try to select a single row it throws the following error (both in stackblitz as well as local dev environment)
Error in /turbo_modules/@progress/kendo-vue-grid@3.2.9/dist/npm/utils/index.js (401:23) Cannot read properties of undefined (reading 'items')
Is there a way to make grouped rows + checkboxes work in Kendo Native Grid?
Thanks in advance
Hi All,
I am trying to export data to excel using kendo grid and vue js . I am following https://www.telerik.com/kendo-vue-ui/components/grid-native/excel-export/ link
But i am getting below error
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function"
found in
---> <Export> at src/components/Excel/export.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
at VueComponent.exportExcel (export.vue?31a1:29)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)
Below giving my code. and let me know where i am doing wrong?
<template>
<div>
<button @click="exportExcel" class="k-button">Export Excel</button>
<kendo-grid :height="550" :data-source="info" >
<kendo-grid-column field="Name" title="Name" ></kendo-grid-column>
<kendo-grid-column field="Code" title=Code :width="120" :format="'{0:c}'"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name:'export',
data () {
return {
visible: true,
Information : 'absd',
info: null
}
},
mounted () {
axios
.get('https://localhost:44311/api/Module/')
.then(response => (this.info = response.data.lstModuleDetails))
},
methods: {
exportExcel: function () {
saveExcel({
data: this.items,
fileName: "myFile",
columns: [
{ field: 'Code'},
{ field: 'Name', title: 'Name' }
]
});
}
}
}
import saveExcel from '@progress/kendo-vue-excel-export';
import axios from 'axios'
</script>
Is it possible to use Kendo Vue with the ESM runtime-only library (i.e. vue.runtime.esm.js)?
I get the following error when trying to use the grid:
vue.runtime.esm.js:588 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <KendoGrid>
<Root>
I've read the thread "kendopanelbar causing You are using the runtime-only build of Vue " (https://www.telerik.com/forums/kendopanelbar-causing-you-are-using-the-runtime-only-build-of-vue). But, the solution suggested is to use vue.js (the full library).
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'm trying to customize the ForeColor tool (replacing existing colors to custom ones). Based on the documention, I've began with this code:
However, it's not working. I get this error: "Cannot read properties of undefined (reading 'title').
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.