Telerik Forums
Kendo UI for Vue Forum
2 answers
449 views

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?

Petar
Telerik team
 answered on 07 Oct 2020
3 answers
170 views

Here (below) is my attempt to "use" the Grid's PDF export feature.   I'm getting the error:   Property 'save' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'save' does not exist on type 'Vue'.Vetur(2339)

here is my function...

    private exportPDF() {
      (this.$refs.GridPdfExport).save(this.rosterItems);
    }

So is this because the GridPdfExport requires Vue 3.0?   (we are currently on Vue 2.0 current)

 

PS C:\Dev Projects\HealthQlix\Scheduler> npm install --save @progress/kendo-vue-pdf
npm WARN @progress/kendo-vue-excel-export@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-vue-common@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-jest@3.0.6 requires a peer of babel-core@^6.25.0 || ^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-vue-pdf@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-vue-common@1.1.0 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\mochapack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fork-ts-checker-webpack-plugin\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @progress/kendo-vue-pdf@1.1.0
updated 1 package and audited 2057 packages in 16.163s

Plamen
Telerik team
 answered on 05 Oct 2020
2 answers
3.8K+ views

I have a column like this:

 

<kendo-grid-column :command="[{name: 'open', click: open}]"></kendo-grid-column>

 

It works fine, but I want it to show a bootstrap glyphicon and no text instead of the text "open" that is showing now.

Is there any way to template the column so that I can get the click event and also use any content I want inside the column?

Thanks in advance.

 

Plamen
Telerik team
 answered on 05 Oct 2020
2 answers
122 views

in jQuery you have the option to set the "destroy" (boolean) attribute in the editable configuration.   My understanding is this enables (or disables) the "delete event" (shows as an x to the far right on the event display title).    By default, this is enabled.    I'm implementing the Kendo UI Scheduler in Vue.

How can I change this attribute to false (disabled)?

 

https://docs.telerik.com/kendo-ui/api/jsp/scheduler/editable#configuration-attributes
Jim
Top achievements
Rank 1
Veteran
 answered on 23 Sep 2020
5 answers
1.1K+ views

I am loading the kendo vue ui chart and displaying that in bootstrap cards (which is inside the bootstrap tab).
But some reason that that doesn't cover the entire width of the cards and render being so small.
There is already the style as: width: 100%; height: 100%; in the SVG of the chart but that doesn't expand. But when I changed some data then it occupies the full width.

Why it is not rendering properly initially? What's the issue causing this and what is the workaround for this?

 

http://jsfiddle.net/pdLncxoy/

Aakash
Top achievements
Rank 1
 answered on 11 Sep 2020
1 answer
101 views
How does on create a simple custom editor template for the Scheduler for Vue component?

My case is rather simple.  I want to provide some static details in the popup UI, and the user can Accept the event (or cancel).
At most, I would like to allow the user to edit the description (we call comments).

I get the jquery implementations, but :editor-template doesn't work
The Vue docs imply that editable can be either boolean or object.  I assumed the object would include the "details of how to set the editor template. But there is no example i can find on the "object" construction.

I can't imagine this would be that hard or not supported.
Ivan Danchev
Telerik team
 answered on 08 Sep 2020
2 answers
166 views

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

 

Plamen
Telerik team
 answered on 28 Aug 2020
7 answers
606 views

Hi,

using the zoom function in a chart is working very nice. Today I got a request from one of my customers.

Situation:

Consider a standard chart with time periods on the x-axis, The most recent period is to the right. If you look at the chart with all periods visible and you zoom in, the chart zooms into the center of the chart. So the most recent period drops out to the right and the older periods to the left. 

 

Question:

Is it possible to stick the most recent period to the right, even if you zoom in? Currently it zooms into the center. The requested behaviour would be: Keep the right border and zoom in/out to the left side. So regardless of the zoom level, the most recent period is allways visible.

 

 

Best regards

Oliver

 

Nikolay
Telerik team
 answered on 13 Aug 2020
1 answer
120 views
I need to call the addEvent method in the Scheduler without clicking into a specific time box in the UI. I basically want to do this, but in the Vue version: https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/methods/addevent

Specifically, I want to create a button on top of the calendar that will cause the event popup to appear and allow a new event to be entered into the calendar.
Can this be done with the Vue wrapper? I can't seem to access any of the methods in the underlying Scheduler widget (https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods).
Ivan Danchev
Telerik team
 answered on 13 Aug 2020
1 answer
515 views

Hello,

I can't make it work to have a custom placeholder when value of kendo-date-picker is empty. It always show the expected format even with the placeholder parameter set.

Example: https://cnslg5.stackblitz.io

One would expect to have the defined placeholder to be shown and not the date-input format-placeholder. How to avoid that ?

Plamen
Telerik team
 answered on 07 Aug 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Calendar
Input
MultiSelect
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
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
Button
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
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
SpeechToTextButton
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?