Telerik Forums
Kendo UI for Vue Forum
0 answers
119 views
With previous versions of the Kendo dropdowns I could just v-model only the ID of dataitems and end up with a simple array of values like so:
[1, 2, 3, 4]
or just a single value like number "1" in case of DropDownList

Is there a way I can achieve this result with the new 3.2.6 dropdowns but less verbose than this?

Jvxgxy (forked) - StackBlitz
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 02 May 2022
0 answers
117 views
Is it possible to have a custom group header template AND a detail row template on the same grid? I can't manage to this. When I try, the detail row just disappears.
ANTONIO
Top achievements
Rank 1
Iron
Iron
 asked on 27 Apr 2022
1 answer
182 views

I am trying to setup a blank project using Vite and Vue 3 since Vite is suggested tooling for new Vue 3 projects.

I am getting type errors despite "skipLibCheck": true in the tsconfig.

Environment:

> node -v
v16.14.2

> pnpm -v
6.32.4

> pnpm tsc -v
Version 4.6.3

Reproduction steps:

  1. Checkout https://github.com/shashwatsingh/kendo-vite
  2. cd dropdown
  3. pnpm install
  4. pnpm dev # this works
  5. pnpm build # this fails

... more lines...

node_modules/.pnpm/@progress+kendo-vue-popup@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-popup/dist/npm/additionalTypes.ts:9:68 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'. 9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type }; ~~~~~~~~ Found 6 errors in 3 files. Errors Files 2 node_modules/.pnpm/@progress+kendo-vue-common@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-common/dist/npm/additionalTypes.ts:9 2 node_modules/.pnpm/@progress+kendo-vue-dropdowns@3.2.4_4d853744181ba70ddba87c6a33341cef/node_modules/@progress/kendo-vue-dropdowns/dist/npm/additionalTypes.ts:9 2 node_modules/.pnpm/@progress+kendo-vue-popup@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-popup/dist/npm/additionalTypes.ts:9


Same steps, but tooltip folder in the repository root gives different errors:

node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
           ~~~~~~~~~~~~~~~
node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9:68 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
                                                                     ~~~~~~~~
Found 2 errors in the same file, starting at: node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9

 

All this works in a vue cli project without issues. However, due to the size of our project, the build times are increasing. So we're looking at alternatives.

I have two questions:

  1. Is s something wrong in the above code? Am I using something unsupported?
  2. Does Kendo for Vue product suite support Vite?
Plamen
Telerik team
 answered on 22 Apr 2022
1 answer
464 views

Hi,

I am trying to create a nav menu using the kendo Menu Component. My requirement is to make this nav menu similar to the dashkit nav menu. There are two major problems that I am currently facing

  1. Show Active navs [showing the active url]
  2. Make this NavMenu work in both web and mobile versions.

Problem with Making Responsive: In the web version, if we hover on a nav item that has children in the nav menu, it opens a submenu on the right side of that nav item. In the Mobile version, if we click on a nav item that has children, it opens a submenu on the right side same as the web version, but the submenu is outside of the viewable frame.

Showing Active navs: I looked for this in the forum, but unfortunately, I didn't find any proper solution for making the kendo menu nav items active.

DashKit Theme Reference: https://dashkit.goodthemes.co/index.html

Customize Setting:

  • Color Scheme: Light Mode
  • Navigation Position: SideNav
  • SideNav Sizing: Icons
  • Navigation Color: Default

Sample Vue Project: https://github.com/iamAdarshh/Kendo-Menu-Responsive

 

Petar
Telerik team
 answered on 21 Apr 2022
1 answer
299 views

Hi. The documentation (https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-headers/) shows how to make custom headers, but there is no example of a custom header with functional sorted colums (like the first grid on this page -> https://www.telerik.com/kendo-vue-ui/components/grid/sorting/ ).

I want to have a custom header template and I also want to click on it to sort the column. I actually managed to do that, but the arrows are missing. Here's a code sample:

<template #headerTemplate="{props}">
   <span @click="headerTemplateClickHandler(props)">{{ props.title }}</span>
</template>

headerTemplateClickHandler(props){
      const existentRuleIndex = this.sort.findIndex(rule => rule.field === props.field);
      if (existentRuleIndex >= 0) {
        this.sort[existentRuleIndex ].dir =
          this.sort[existentRuleIndex ].dir === "desc" ? "asc" : "desc";
      } else{
        this.sort.push({
          dir: 'desc',
          field: props.field
        })
      }
      props.sortchange({
         sort: this.sort
      });
    }

With this code I managed to sort the column, but the arrow indicators do not show up in the header.

Petar
Telerik team
 answered on 21 Apr 2022
1 answer
1.4K+ views

Hello,

I'm trying to use the custom kendo scss theme inside my Vite project but I'm getting errors when it tries to compile the theme.

Here I've made a reproduction of the problem:

Vitejs (forked) - StackBlitz

Does anyone know what I'm missing here?

 

Thanks in advance,

Vincent

Emil
Telerik team
 answered on 20 Apr 2022
1 answer
784 views

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text,  I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?

Petar
Telerik team
 answered on 15 Apr 2022
1 answer
247 views

In the Gantt chart, there are four types of views listed: day, week, month, year. Currently, the week type has week headings with day sub-headings that are snapped to. The Month view has week sub-headings, and the items snap to the weeks. 

I am interested in a Month type view, but instead of each week listed as sub-headings under each month, I'd like to use each day of the month, so moving/resizing tasks would display and snap to days instead of weeks on the month type view. Is this possible?

Petar
Telerik team
 answered on 12 Apr 2022
1 answer
1.7K+ views

I have a VueJS app that uses the kendo controls.

Is there a way to use the datepicker or another kendo control to select multiple dates? For example by holding the Ctrl+clicking on each date?

Is there an example?

 

Petar
Telerik team
 answered on 08 Apr 2022
1 answer
470 views

Hi, I am just getting started with using the Kendo Vue components and am trying to implement a context menu.  My application is using Vuejs 3 with typescript.

I have a version working with ContextMenu from the @progress/kendo-layout-vue-wrapper package.  However, with this, I can't seem to access anything from an event handler argument.  Example:  function onMenuSelect(e) - I can't seem to access anything about e in my typescript/javascript. 

In searching around for typescript types for this, I notice that there is a native kendo vue menu which requires Menu from @progress/kendo-vue-layout and Popup from @progress/kendo-vue-popup.  Should I be using this instead?  And with this, are there any examples for how to open the menu from rows in a table?  I need my context menu to be dynamic based on which table row is triggering it.

I hope some of this question makes sense - I am totally new to using this.  Thanks!

Petar
Telerik team
 answered on 06 Apr 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
Editor wrapper
DataSource wrappers (package)
DateInput
DateTimePicker
Scheduler wrapper
Styling / Themes
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?