Questions on Kendo UI for Vue Forum

2 answers

187 views

Scheduler - Set the date format of recurrenceRule's datepicker

Hello,

I have a problem with the datePicker of recurrenceRule.

As you can see in the picture, the datetimepicker of "start" uses a custom date format as dd/MM/yyyy and the culture "fr-BE".

If I understand correctly how the datepicker of recurrence rule works, this one picks the date of "start". But the problem is the datepicker doesn't understand the custom format so it shows me an error

Uncaught TypeError: Cannot read property 'getFullYear' of null

If I delete the custom format and the culture, all works perfectly but if I set a custom format it doesn't work.

Is there a solution to set globally the format of a date ? or how can I set a custom date format to the datepicker of recurrence rule ?

Thank you for the help.

answered on 22 Apr 2021

3 answers

113 views

Block appointments with scheduler

There is a way to block appointments in hours.

Example in the image

answered on 15 Mar 2021

1 answer

150 views

Change Kendo Vue UI dynamically with local scripts

Hi, we have a multilanguage application and we need to change the Kendo UI for Vue language dynamically.

Currently, we were doing it like this and it worked:

var that = this;

var selectedLang = this.$refs.dl.kendoWidget().value();

$.getScript("https://kendo.cdn.telerik.com/2018.3.1017/js/messages/kendo.messages." + selectedLang + ".min.js", function() {

var lb = that.$refs.lb.kendoWidget();

lb.setOptions({

messages: kendo.ui.ListBox.fn.options.messages

});

But we need the script to grab it locally for possible own modifications. I am trying this way :

var that = this;

var script = document.createElement('script');

script.src = "../../../../storage/kendo-grid/messages/kendo.messages." +selectedLang+ ".min.js";

if(document.head){

document.head.appendChild(script);

var lb = that.$refs[ref].kendoWidget();

lb.setOptions({

messages: kendo.ui.ListBox.fn.options.messages

});

}

But it gives me a javascript error when pointing to the script ('Module is not defined').

Could you guide me a bit? Thanks!

answered on 12 Mar 2021

2 answers

117 views

Upload Component Sending Empty Body with Vue3

Hi Folks,

I have been trying to get the upload component working correctly in Vue 3.

I have noticed that when sending the post body it seems to be going without any file content in the post body. see attached. I would have expected the post body to be set.

Stack blitz link is here:

https://stackblitz.com/edit/vue-zqxlxq

Same code works as expected in Vue 2. Have I missed something?

EF.

answered on 03 Feb 2021

3 answers

190 views

Single Click instead of Double Click

Hello,

the current behaviour of Kendo Scheduler stands like this - you have to double-click to create / view / edit an event.

I'm looking for solution like here: https://dojo.telerik.com/IPOsutAD but for Vue.

Any help would be appreciated

Axel

answered on 19 Jan 2021

4 answers

134 views

Gantt task duplication/hang bug

Looking at the example below (for local data source)

https://www.telerik.com/kendo-vue-ui/components/gantt/data-binding/

Clicking 'Add Task' causes the child tasks to be duplicated + when choosing 'Add Child' the whole thing hangs.

I see the same behaviour in my own project - is there some other code required or is this a bug?

answered on 24 Dec 2020

1 answer

155 views

Gantt - how to handle updates to backend service

I have a Gantt connected to my backend, retrieving and writing data is working just fine but I am not sure that I am using the correct approach. For writes I am using the transport-update props like so:

:transport-update-url="serviceRoot + '/graphql'"

:transport-update-data="updategql"

transport-update-content-type="application/json"

transport-update-data-type="json"

transport-update-type="POST"

This is working ok in terms of calling the backend but there is no event that I am currently handling whereby I can check that the call to the backend was successful or not.

So I was wanted to know whether I should be using my current method along with some other code to check the callback result or if I should rather be using the Gantt events add/edit/remove etc. to process updates from the UI?

answered on 24 Dec 2020

2 answers

192 views

How to use Gantt with graphql backend

I have used some of the concepts from the link below to try to databind the Gantt Vue wrapper to a graphql datasource:

https://demos.telerik.com/kendo-ui/grid/graphql

I have got so close to making this work in that I can query the graphql service and return the correct data just fine, but I don't know how to bind to the result of the graphql. From REST the data might look as follows:

[{Gantt task data}, {Gantt task data}]

but from GQL the data looks like this:

{"data":{"projecttasks":[{Gantt task data}, {Gantt task data}] }}

ie. the datasource needs to be set to "data.projecttasks" - how to I do this?

This is what I have got so far:

<template>

<div>

<ganttdatasource ref="ganttdatasource1"

:transport-read-url="serviceRoot + '/graphql'"

:transport-read-data="fetchgql"

transport-read-content-type="application/json"

transport-read-data-type="json"

transport-read-type="POST"

:transport-parameter-map="parameterMap"

schema-model-id="id"

:schema-model-fields="fields"

.........

>

</ganttdatasource>

</div>

</template>

<script>

import { GanttDataSource, GanttDependencyDataSource } from '@progress/kendo-datasource-vue-wrapper';

import { Gantt, GanttColumn, GanttView } from '@progress/kendo-gantt-vue-wrapper'

export default {

name: 'GanttView',

components: {

'gantt': Gantt,

'ganttdatasource': GanttDataSource,

},

methods: {

parameterMap: function(options, operation) {

return JSON.stringify(options);

}

},

computed: {

fetchgql: function() {

return {query: `

query {

projecttasks {

PRT_id

PRT_text

PRT_order

PRT_parent

PRT_end_date

PRT_start_date

PRT_progressperc

}

`

}

},

data: function() {

return {

serviceRoot: "http://localhost:4000",

fields: {

id: { from: 'PRT_id', type: 'number' },

parentId: { from: 'PRT_parent', type: 'number', defaultValue: null, validation: { required: true } },

start: { from: 'PRT_start_date', type: 'date' },

......................

}

</script>

answered on 24 Dec 2020

1 answer

114 views

Is JQuery required for wrapper components?

I'm using the Menu widget but I guess this would apply to any of the Vue wrappers.

As per the docs, to access the clicked menu item it appears that $ is needed but I just get errors because $ is undefined. So my question is - do I need to manually include JQuery in order to access the item and/or is there no better way to do this?

onSelect: function (e) {

var currentItemText = $(e.item.firstChild).text().trim();

console.log(currentItemText + " clicked.");

}