Questions on Kendo UI for Vue Forum

0 answers

40 views

Escape backslash in a Kendo Template for a v-model Vue directives

How do you backslash escape Vue directives in a Kendo UI Template.

I want to escape a v-model on my Kendo UI template.

This is how I tired to escape them but it did not work.

<input type="checkbox"  \# v-model="checked" \# > EDIT:

I tried using a double escaped \# like this:

 <input type="checkbox"  \\# v-model="checked" \# >

But it did not work, when I examined the page via chrome dev tool, this is how the input is displayed:

 
<input type="checkbox" #="" v-model="checked">
The reason for the v-model is that I am trying to do an 'if conditional' in my Vue.js model
. i.e
<script>
    const mixin = {

        data: function() {
            return {
               checked:true
       }

  created() {
    this.checked = this.addGoals();
   },
  methods: {
    addGoals() {
	if (test === 3){
        return true;
        }else{
	return false;
     }
  }

</script>

I did try this method to escape the values but it did not work:

<input type="checkbox" #:v-model="checked">

The error message:

Uncaught Error: Invalid template:'

General Discussions

Grid

RadioButton

updated question on 24 Feb 2025

0 answers

77 views

Thoughts about Telerik Kendo UI?

The company I am employed at recently acquired Telerik Kendo UI, and we have been utilizing it for a few months now. Having dedicated many weeks to working with this product, I am now interested in learning about the opinions of others regarding it. Please take note that prior to this, my experience with frameworks was limited to using Bootstrap, Ionic, and other open-source options.

General Discussions

asked on 24 Nov 2023

0 answers

72 views

Detached FontIcons from Themes

As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.

General Discussions

asked on 06 Oct 2023

1 answer

295 views

How do I refresh Tabs in a TabStrip

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.

General Discussions

TabStrip

answered on 11 Sep 2023

0 answers

109 views

How to change the default Business/WorkDay Hours

I am developing a software in which I integrate the scheduler component for VUE. By default the hours associated with business /workday are set from 8 AM to 4 PM. My question is how can I change these same hours to, for example, from 9 AM to 6 PM?

This is my code

<template>
<div v-if="this.userRole === 'Admin' || this.userRole === 'Admin Client'">
<Scheduler :data-items="sampleData" :default-date="displayDate" :views="views" :view="view" :editable="editable" :timezone="'Europe/Lisbon'" @datachange="handleDataChange" :form="'formRender'" :allDayEditor="'customAllDayEditor'">
<template v-slot:formRender="{ props }">
<customEditForm :task="props.dataItem" @selectedNormChange="handleSelectedNormChange" @responsiblesChange="handleResponsiblesChange" @cancel="props.onCancel" />
</template>
</Scheduler>
</div>
<div v-else>
<Scheduler :data-items="sampleData" :default-date="displayDate" :views="views" :view="view" :editable="editable" :timezone="'Europe/Lisbon'" @datachange="handleDataChange" :form="'formRender'" :allDayEditor="'customAllDayEditor'">
<template v-slot:formRender="{ props }">
<customEditForm :task="props.dataItem" @selectedNormChange="handleSelectedNormChange" @responsiblesChange="handleResponsiblesChange" @cancel="props.onCancel" />
</template>
</Scheduler>
</div>
</template>
<script>
import '@progress/kendo-date-math/tz/Europe/Lisbon';
import {
Scheduler
} from '@progress/kendo-vue-scheduler';
import EditorForm from './FormEditor.vue';
import {
postCreateTask,
putCreateTask,
deleteTask,
getTasksByAudit
} from "../Services/tasksService";
export default {
name: 'Calendar',
components: {
Scheduler,
customEditForm: EditorForm,
},
props: {
selectedNorm: {
type: String,
default: null,
},
isNormObligatory: {
type: Boolean,
default: false,
},
userRole: {
type: String,
required: true,
},
},
created() {
let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
if (urlParams.has('task')) {
this.audit_id = urlParams.get('task');
this.status = "Scheduler";
this.place = "Scheduler";
this.getData()
} else {
//ERRO mostar mensagem de erro generico.
}
this.displayDate = new Date(); // Update displayDate to current date
},
data() {
return {
view: 'day',
valueProgressBar: 0,
success: false,
editable: {
add: true,
remove: true,
edit: true,
},
views: [{
name: 'day',
title: 'Day View'
}, {
name: 'workweek',
title: 'Week View'
}, {
name: 'month',
title: 'Month View'
}, {
name: 'agenda',
title: 'Agenda View'
}, ],
sampleData: [],
displayDate: new Date(),
formMode: '', // Propriedade para controlar o modo do formulário
selectedNormValue: null, // Nova propriedade para armazenar o valor da norma selecionada
isNormObligatoryValue: false,
selectedResponsiblesValue: null,
};
},
methods: {
.... // defined methods
}
< script >

General Discussions

Scheduler

asked on 02 Aug 2023

0 answers

216 views

import "@progress/kendo-ui jQuery not found error

After upgrading vue wrapper components from 2022.2.621 to 2023.2.606 and @progress/kendo-ui from 2022.2.621 to 2023.1.425

and our native component from 3.3.3 to 3.11.0 we are getting an error Uncaught ReferenceError: jQuery is not defined

This literary stops us from working.

Is there any solution that we can try? Thanks!

General Discussions

asked on 07 Jul 2023

1 answer

196 views

Kendo UI vs BootstrapVue

I have a large project that uses BootstrapVue. It also uses Vuelidate for validation. Why should I consider using Kendo UI instead? What are the major differences or pros/cons of one versus the other? Would Kendo UI be able to completely replace BootstrapVue + Vuelidate?

Thanks.

General Discussions

answered on 02 Jun 2023

0 answers

730 views

License activation failed for @progress/kendo-ui v2023.1.425

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...

General Discussions

asked on 12 May 2023

1 answer

118 views

Future of VUE at Telerik

While completing the annual survey a couple of weeks ago, I was surprised to see that the Vue framework was conspicuously absent from the question about which technologies we expect to use in the future. JQuery, Angular, and React were all there, along with many other technologies. But Vue was missing.

Does this mean that Telerik is planning to drop support for the Vue framework in the future?

General Discussions

answered on 27 Mar 2023

2 answers

1.1K+ views

SASS Compile error when kendo scss files are imported in stylesheet

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 :

_tokens.scss which contains color palette definition
the kendo scss theme (kendo-theme-bootstrap in this case, but same issue with the default theme)
_overrides.scss which may contains overrides (typhography, margin/padding on some components, etc)
and a base.scss file containing basically the import of the 3 preceding 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

General Discussions