Hi. I'm relatively new to vue-cli and I am having issues when running in development ('npm run serve'/'vue-cli-service serve') mode, particularly with the kendo components. The project runs fine in production mode, but I get all sorts of errors when running in dev mode.
I know the issue has to do with the compiling of components, and I know I have to add something to the vue.config.js file. I'm just not sure what that is. This is what my vue.config.js file looks like now:
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: '.',
devServer: {
proxy: '[URL]'
},
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
}
}
I have read this page, but that deals with vue-cli 2, not 3. (https://github.com/vuejs/vue/issues/2873)
Any help is appreciated.
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
I have a native DatePicker that I am using in an application with many components that use the Kendo wrapper validation widget. I am trying to get the behavior and appearance of the DatePicker to match that of the existing components. Validation should occur when a field loses focus and an invalid field should have a red outline and red error message below it. I tried to use the native DatePicker validation functionality, but I was unable to make validation consistent with all of the other components.
I am able to use the Kendo wrapper validation widget to perform validation when a field loses focus and display an error message, but I have been unable to get a red outline on an DatePicker in the invalid state. How can I accomplish this?
See https://stackblitz.com/edit/esiptm for an example.
I am trying to build a custom theme by following the instructions here.
I cloned https://github.com/telerik/kendo-themes (tried with both develop and release, same result).
The npm install && npx lerna
bootstrap
steps were successful, but I got the error below from running npm run sass
and npm run dart
:
[12:31:08] Using gulpfile ~/kendo-themes/gulpfile.js
[12:31:08] Starting 'sass'...
[12:31:08] Compiling /home/awade/kendo-themes/packages/bootstrap/scss/all.scss to /home/awade/kendo-themes/packages/bootstrap/dist
[12:31:12] 'sass' errored after 4.44 s
[12:31:12] Error: ENOENT: no such file or directory, open '/home/awade/kendo-themes/packages/bootstrap/dist/all.css'
at Object.openSync (fs.js:465:3)
at Object.writeFileSync (fs.js:1416:35)
at /home/awade/kendo-themes/packages/theme-tasks/gulpfile.js:129:12
at Array.forEach (<
anonymous
>)
at Object.build (/home/awade/kendo-themes/packages/theme-tasks/gulpfile.js:103:11)
at /home/awade/kendo-themes/gulpfile.js:100:26
at Array.map (<
anonymous
>)
at buildAll (/home/awade/kendo-themes/gulpfile.js:92:16)
at /home/awade/kendo-themes/gulpfile.js:124:12
at sass (/home/awade/kendo-themes/node_modules/undertaker/lib/set-task.js:13:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ sass: `gulp sass`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ sass script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/awade/.npm/_logs/2020-08-26T16_31_12_646Z-debug.log
Hi, i'm new to kendo and i'm trying to create a filterable grid with a grid native component. Everything works well BUT i'm stuck with the full list of operators (contains, begins, is not null,...).
Is there an easy way to customize the list of operators ? I will probably only need "begins" and "is equal to".
I saw that with the grid-wrapper I could define a list with the property "filtterable" but it doesn't seem to work with grid native. I got an error saying that Filterable could'nt be assigned with an object.
Thanks a lot !
So how do we add a Detail Template? The docs are seriously lacking for Vue wrappers!!
I have this - which i assume would reference a $ref od "detail" but instead outputs a string
<kendo-grid ref="grid"
:data-source-ref="'dataSource'"
:menu="true"
:sortable='true'
:pagable="true"
:groupable="false"
:detail-template="'detail'">
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>
I'm experiencing severe clashes when using native packages with the DropDownTree wrapper. I was only using the wrapper packages before and everything was working fine, however now that I added the native grid to the app the wrapper DropDownTree is giving me Uncaught ReferenceError: jQuery is not defined
I remove all non standard code and still it comes out like the CSS is never applied on top of some other broken stuff.
I'm on VueJS 2.7.14
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.3",
"@progress/kendo-dropdowntree-vue-wrapper": "^2023.1.117",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-svg-icons": "^1.1.1",
"@progress/kendo-theme-default": "^6.0.3",
"@progress/kendo-ui": "^2023.1.117",
"@progress/kendo-vue-animation": "^3.8.1",
"@progress/kendo-vue-data-tools": "^3.8.1",
"@progress/kendo-vue-dateinputs": "^3.8.1",
"@progress/kendo-vue-dropdowns": "^3.8.1",
"@progress/kendo-vue-excel-export": "^3.8.1",
"@progress/kendo-vue-grid": "^3.8.1",
"@progress/kendo-vue-indicators": "^3.8.1",
"@progress/kendo-vue-inputs": "^3.8.1",
"@progress/kendo-vue-intl": "^3.8.1",
"@progress/kendo-vue-popup": "^2.7.3"
I used these packages before and everything was fine:
"@progress/kendo-dropdowntree-vue-wrapper": "^2021.3.1207",
"@progress/kendo-licensing": "^1.2.1",
"@progress/kendo-theme-default": "^4.43.0",
"@progress/kendo-ui": "^2021.3.1207"
If anyone could tell me how to use the css file from @progress/kendo-theme-default": "^4.43.0" inside a component I think that would solve my problem.
Hello,
In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.
I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?
Thanks
//This adds a custom template to my column menu
column.columnMenu = "CheckboxColumnFilterRender";
//This adds a custom icon and a custom color to my column header
headerClassName:"generic-filter-icon c-gray-600",
<templatev-slot:CheckboxColumnFilterRender="{ props }">
</template>