We have a Vuejs and Vuetify application.
We are using the DropDownTree control to display a hierarchy. In some cases, the list can be very long and scrolls off the page.
I tried using the "Height" property. This works for the DropDownTree controls that are NOT in a v-dialog.
But one of our DropDownTree controls displays in a v-dialog. The "Height" property has no effect here.
How can I make the "Height" property work for the DropDownTree in a v-dialog?
Or how can I specify a height for the DropDownTree or add scroll bars when the DropDownTree appears in a v-dialog?
A number of Kendo components could do with better support for screen readers, including:
No doubt there are more than the above.
Effective screen reader accessibility is as much about what you skip as what you add. Where possible, audio prompts should be short and clear, and not produce excess noise.
Plea for help: Our front end guy left, and I've inherited his work :( I like the JS stuff, but I'm no expert.
Our new app has about a 4 megabyte app.js download, even when minified. We've turned on gzip compression on the server, and that gets it down to a bit over a meg, but we had a $1000 bandwidth overage last month!
I've been tasked with seeing if we are including unused code.
So, my question: In the docs I see this:
// As an alternative, you could import only the scripts that are used by the utility:
// import '@progress/kendo-ui/js/kendo.data' // Imports only the DataSource script and its dependencies
import '@progress/kendo-theme-default/dist/all.css'
import { DataSource,
HierarchicalDataSource,
GanttDataSource,
GanttDependencyDataSource,
PivotDataSource,
SchedulerDataSource,
TreeListDataSource,
DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
Vue.use(DataSourceInstaller)
new Vue({
el: '#app',
components: {
DataSource,
HierarchicalDataSource,
GanttDataSource,
GanttDependencyDataSource,
PivotDataSource,
SchedulerDataSource,
TreeListDataSource,
DatasourceInstaller
}
})
I've got about six of these: layout, dateinputs, inputs, dropdowns, dialog, etc.
If I can identify which of the features I need from each I need from each "wrapper", can I cut this down? For instance, I'm sure we don't use gantt charts or pivots above.
Thanks,
Ed Greenberg
I have started using the new Vue Native DropDownList and found a few issues when it is used inside a popup (bootstrap-vue modal).
The dropdown list will not display. I can make it display by adding:
.k-animation-container {
z-index: 100000;
}
Now it displays but clicking out side the dropped down list will not close it.
Wayne
Hello,
I've an error regarding Kendo style when I import it into an SCSS file. Let's assume I want to customize Kendo theme, I have 4 scss files :
@import 'tokens';
@import '@progress/kendo-theme-bootstrap/dist/all';
@import 'overrides';
However, when I import my base.scss file into the Vue App (whether in the main.js or the App.vue), I've this error :
Plugin: vite:css
File: /src/node_modules/@progress/kendo-theme-bootstrap/dist/all.scss:37542:173
Error: expected ";".
â•·
37542 │ background-image: url('../../node_modules/@progress/kendo-theme-bootstrap/dist/k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img'));
│ ^
╵
node_modules/@progress/kendo-theme-bootstrap/dist/all.scss 37542:173 @import
src/assets/kendo.scss 2:9 @import
src/assets/base.scss 1:9 root stylesheet
If I import directly the kendo-theme-bootstrap scss file in the main.js or the App.vue, there is no error. Here is the StackBlitz reproducing the error:
https://stackblitz.com/edit/vitejs-vite-f63fqh
How can I resolve this ?
Best Regards,
Fabien / SYSCO
Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :
second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question
you can ask more detail if my question is confusing
thanks
I'm getting the following in my Debug Console when I run my application;
License activation failed for @progress/kendo-ui v2023.1.425
No license found.
See https://docs.telerik.com/kendo-ui/intro/installation/using-license-code for more information.
This despite having the license file present in my project root. At the moment, I have removed the environment variable since I thought it might be causing a conflict.
I have also used npm uninstall to remove all my local packages and I have reinstalled the. Her eis my current package.json;
{ "name": "wpgts", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@progress/kendo-file-saver": "^1.1.1", "@progress/kendo-licensing": "^1.3.0", "@progress/kendo-map-vue-wrapper": "^2023.1.314", "@progress/kendo-svg-icons": "^1.4.2", "@progress/kendo-theme-default": "^6.2.0", "@progress/kendo-theme-fluent": "^6.2.0", "@progress/kendo-ui": "^2023.1.314", "@progress/kendo-vue-buttons": "^3.9.1", "@progress/kendo-vue-dateinputs": "^3.9.1", "@progress/kendo-vue-dialogs": "^3.9.1", "@progress/kendo-vue-dropdowns": "^3.9.1", "@progress/kendo-vue-form": "^3.9.1", "@progress/kendo-vue-indicators": "^3.9.1", "@progress/kendo-vue-inputs": "^3.9.1", "@progress/kendo-vue-intl": "^3.9.1", "@progress/kendo-vue-layout": "^3.9.1", "core-js": "^3.8.3", "jquery": "^3.6.4", "register-service-worker": "^1.7.2", "rxjs": "^6.6.7", "vue": "^3.2.13", "vue-router": "^4.0.3", "vue-rx": "^6.2.0" }, "devDependencies": { "@types/jquery": "^3.5.16", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-pwa": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-typescript": "^9.1.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "typescript": "~4.5.5" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended" ], "parserOptions": { "ecmaVersion": 2020 }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }
Why am I getting this licensing issue despite having followed the instruction at this link;
https://www.telerik.com/kendo-vue-ui/components/my-license/
Any help would be greatly appreciated.
Thanks...
Hi, this is my problem.
I use the confirm function in kendo dropdownlist to make sure the user want to change the value or not.
When the user choose "cancel", that means he doesn't want to change the old value.
However the value in the dropdownlist UI shows the changed NEW value.
Here is the example: https://stackblitz.com/edit/dropdownlist-confirm?file=src/main.vue
Although the console shows "CANCEL", but the UI still shows the changed new value.
How can I fix this ? Thank you in advance!!!