Problem Overview: I am encountering errors while using Kendo UI components in a Vue.js application. I have two different issues occurring in my application, both related to undefined properties in the Kendo Vue components.
Error 1:
Uncaught TypeError: Cannot read properties of undefined (reading 'caretAltDownIcon')
at Proxy.<anonymous> (kendo-vue-dropdowns.js:15:36908)
at Proxy.render (kendo-vue-dropdowns.js:15:36908)
at renderComponentRoot (vue3.2.45:2478:46)
...
Error 2:
at default (kendo-vue-dateinputs.js:15:61587)
at resolvePropValue (vue3.2.45:5478:65)
at setFullProps (vue3.2.45:5459:28)
...
Also
Uncaught TypeError: Cannot read properties of undefined (reading 'tableKeyboardNavigationTools')
at Proxy.render (kendo-vue-grid.js:15:93814)
at renderComponentRoot (vue3.2.45:2478:46)
...
Both errors occur when trying to use Kendo Vue components in the application, particularly related to dropdowns and date inputs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Timesheet Demo - Vue</title>
<link rel="stylesheet" href=".0.3/default/default-main.css" />
<script src="/[email protected]"></script>
<script src="/@progress/kendo-licensing"></script>
<script src="/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
<script src="/@progress/kendo-data-query@latest/dist/cdn/js/kendo-data-query.js"></script>
<script src="/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="/@progress/kendo-vue-dropdowns@latest/dist/cdn/js/kendo-vue-dropdowns.js"></script>
<script src="/@progress/kendo-vue-dateinputs@latest/dist/cdn/js/kendo-vue-dateinputs.js"></script>
<script src="/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js"></script>
<link rel="stylesheet" href=".1.117/styles/kendo.default-ocean-blue.min.css" />
</head>
<body>
<div class="timesheet-wrapper vue-app" id="vueapp" v-show="!loading">
<dropdownlist :data-items="['a', 'b']" :value="dropVal"></dropdownlist>
<datepicker v-model="selectedDate" :min="getFirstDayOfMonth" :max="getLastDayOfMonth"></datepicker>
<kendogrid :data-items="gridData" :columns="dataSourceColumns"></kendogrid>
</div>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
gridData: [],
selectedDate: null,
dropVal: 'a',
dataSourceColumns: [
{ field: 'TimesheetId', hidden: true },
{ field: 'RowId', hidden: true },
{ field: 'ContractTask.Description', title: 'Contract/Task', width: '200px' },
{ field: 'EntryDate', title: 'Date', width: '140px' },
{ field: 'Description', width: '640px' },
],
};
},
computed: {
getFirstDayOfMonth() {
const date = new Date();
return new Date(date.getFullYear(), date.getMonth(), 1);
},
getLastDayOfMonth() {
const date = new Date();
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
},
},
}).mount('#vueapp');
</script>
</body>
</html>
What I’ve Tried:
- I’ve verified that all necessary libraries are loaded.
- I’ve checked that all components are properly registered in the Vue app.
- I’ve ensured that the Vue reactivity system is working properly, and data is correctly - passed to the components.
- I tried updating the Kendo Vue components to the latest versions, but the errors still persist.
Expected Behavior:
- Both the Kendo dropdown, Grid and the Kendo date picker should work without throwing errors.
- The grid should render correctly without any issues.
Additional Context:
- I am using Vue.js version 3.2.45.
- I am using Kendo UI for Vue (latest version).
- The error occurs when the dropdownlist or datepicker component is rendered.
Problem Overview: I am encountering errors while using Kendo UI components in a Vue.js application. I have two different issues occurring in my application, both related to undefined properties in the Kendo Vue components.
Error 1:
Uncaught TypeError: Cannot read properties of undefined (reading 'caretAltDownIcon')
at Proxy.<anonymous> (kendo-vue-dropdowns.js:15:36908)
at Proxy.render (kendo-vue-dropdowns.js:15:36908)
at renderComponentRoot (vue3.2.45:2478:46)
...
Error 2:
at default (kendo-vue-dateinputs.js:15:61587)
at resolvePropValue (vue3.2.45:5478:65)
at setFullProps (vue3.2.45:5459:28)
...
Also
Uncaught TypeError: Cannot read properties of undefined (reading 'tableKeyboardNavigationTools')
at Proxy.render (kendo-vue-grid.js:15:93814)
at renderComponentRoot (vue3.2.45:2478:46)
...
Both errors occur when trying to use Kendo Vue components in the application, particularly related to dropdowns and date inputs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Timesheet Demo - Vue</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik/themes/6.0.3/default/default-main.css" />
<script src="https://unpkg/[email protected]"></script>
<script src="https://cdn.jsdelivr/npm/@progress/kendo-licensing"></script>
<script src="https://unpkg/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
<script src="https://unpkg/@progress/kendo-data-query@latest/dist/cdn/js/kendo-data-query.js"></script>
<script src="https://unpkg/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg/@progress/kendo-vue-dropdowns@latest/dist/cdn/js/kendo-vue-dropdowns.js"></script>
<script src="https://unpkg/@progress/kendo-vue-dateinputs@latest/dist/cdn/js/kendo-vue-dateinputs.js"></script>
<script src="https://unpkg/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik/2023.1.117/styles/kendo.default-ocean-blue.min.css" />
</head>
<body>
<div class="timesheet-wrapper vue-app" id="vueapp" v-show="!loading">
<dropdownlist :data-items="['a', 'b']" :value="dropVal"></dropdownlist>
<datepicker v-model="selectedDate" :min="getFirstDayOfMonth" :max="getLastDayOfMonth"></datepicker>
<kendogrid :data-items="gridData" :columns="dataSourceColumns"></kendogrid>
</div>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
gridData: [],
selectedDate: null,
dropVal: 'a',
dataSourceColumns: [
{ field: 'TimesheetId', hidden: true },
{ field: 'RowId', hidden: true },
{ field: 'ContractTask.Description', title: 'Contract/Task', width: '200px' },
{ field: 'EntryDate', title: 'Date', width: '140px' },
{ field: 'Description', width: '640px' },
],
};
},
computed: {
getFirstDayOfMonth() {
const date = new Date();
return new Date(date.getFullYear(), date.getMonth(), 1);
},
getLastDayOfMonth() {
const date = new Date();
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
},
},
}).mount('#vueapp');
</script>
</body>
</html>
What I’ve Tried:
- I’ve verified that all necessary libraries are loaded.
- I’ve checked that all components are properly registered in the Vue app.
- I’ve ensured that the Vue reactivity system is working properly, and data is correctly - passed to the components.
- I tried updating the Kendo Vue components to the latest versions, but the errors still persist.
Expected Behavior:
- Both the Kendo dropdown, Grid and the Kendo date picker should work without throwing errors.
- The grid should render correctly without any issues.
Additional Context:
- I am using Vue.js version 3.2.45.
- I am using Kendo UI for Vue (latest version).
- The error occurs when the dropdownlist or datepicker component is rendered.
1 Answer
Reset to default 0You might be using the latest Kendo UI for Vue, but the stylesheets are definitely not the latest. Kendo themes are already at v10, but the example references v6. Also releases from 2023 and onward do not distribute the font icons any more, so if you rely on them you should reference them as well - docs and docs.