Questions on Kendo UI for Vue Forum

2 answers

57 views

Kendo Vue Window Content template from component

Hello,

I'm building a general modal component using the Window. Is it possible to pass a Vue component as template for a kendo Window?

Thanks!

answered on 01 Nov 2018

1 answer

167 views

why not show title in grid?

<template>
  <grid :style="{ height: '280px' }" :data-items="items" :columns="columns">
  </grid>
  <button @click="onClick">clicked</button>
</template>

<script setup lang="ts">
import '@progress/kendo-theme-default/dist/all.css'
import { Grid } from '@progress/kendo-vue-grid'
import { ref } from 'vue'

const columns = ref([
  { field: 'ProductID', title: 'ID', headerCell: 'myTemplate', hidden: false },
  { field: 'ProductName', title: 'Product Name', headerCell: 'myTemplate', hidden: false },
  { field: 'UnitPrice', title: 'Unit Price', headerCell: 'myTemplate', hidden: false }
])

const items = [{
  ProductID: 1,
  ProductName: 'Chai',
  UnitPrice: 18.0000
},
{
  ProductID: 2,
  ProductName: 'Chang',
  UnitPrice: 19.0000
},
{
  ProductID: 3,
  ProductName: 'Aniseed Syrup',
  UnitPrice: 10.0000
},
{
  ProductID: 4,
  ProductName: "Chef Anton's Cajun Seasoning",
  UnitPrice: 22.0000
}]

const onClick = () => {
  columns.value.map((item) => {
    console.log(item)
    if (item.field === 'ProductID') { item.hidden = true }
    // item.hidden = true
  })
}
</script>

I can not saw title in grid. Thanks.

Grid

answered on 16 Aug 2021

0 answers

56 views

display month in kendo native multiview calendar vue

I am using kendo native calender for my project. I want to show months in calendar.

<template>
  <div id="vueapp" class="vue-app">
    <div class="example-config">
      Number of rendered views: &nbsp;
      <numerictextbox
        :style="{ width: '230px' }"
        :min="1"
        :max="10"
        @change="handleInputChange"
        :value="views"
      >
      </numerictextbox>
    </div>
    <calendar :views="views" />
  </div>
</template>

Calendar

asked on 16 Feb 2023

1 answer

84 views

kendo-upload async problem

hi I am the user of kendo-uploader

when I open the kendo-window, my fileUpload have to Keep some files what I can remove, so I use a Initailfile Option like the Code of below

$("#fileUpload").kendoUpload({
        async: {
          saveUrl: "save",
          removeUrl: "remove",
          autoUpload: false,
          removeVerb: "DELETE",
        },
        remove: onRemove,
        files: this.mUploadFiles
      });

but I make a Problem because when I press the X button ,It works remove process immediately but I want to use my Custom remove process.

How can I use my Custom remove Process . Please help me to solve the problem

General Discussions

answered on 19 Dec 2019

1 answer

151 views

vue 3 Grid Excel Export from DataSource

Hello there!

Many examples show how to export data from the grid, specifically using the saveExcel method, using local data. How do you do it using a remote DataScource?

Grid

answered on 05 Mar 2021

0 answers

367 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

2 answers

92 views

Spreadsheet for Vuejs, adding tab in tabstrip

I want to add a tab on the tabstrip in the Spreadsheet component. I have done so by adding this line of code to the toolbar attribute

<spreadsheet ref="spreadsheet"
:toolbar="toolbar"

Where toolbar is a value in data that looks like

toolbar = {
'custom': [
// for all available options, see the toolbar items configuration
// https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items
{
type: "button",
text: "Save",
showText: "both",
icon: "k-icon k-i-save",
click: function() {
// Some code
}
},

However, this new tab shows up with the name 'undefined', next to the other tabs. Is there some way to give it a proper name?

General Discussions

answered on 23 Apr 2020

1 answer

240 views

DropDownList popup-setting className doesn't take effect

I'm trying to add a custom class name to the DropDownList popup div like so:

Qtavuz (forked) - StackBlitz

But the custom class name isn't applied, while the custom width is. Is there a way to make this work?

DropDownList

answered on 16 May 2022

2 answers

263 views

how to hook into the destroy (delete) of the scheduler editor

Precepts:

> Kendo UI for Vue - Scheduler (using typescript)

> using :editable-template (with template imbedded into script in the markup)

I want to be able to hook into the destroy (editable-destroy option) such that when executed, I can call my own function to manage the event.
If possible, I would even like to manage (alter or even possibly replace) the default delete confirmation modal.

Can anyone help me figure out how this can be accomplished?