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.
There is a way to block appointments in hours.
Example in the image
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!
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.
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?
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?
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
>
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."
);
}
When using a template as below then the child items do not display:
<
template
>
<
kendo-menu
>
<
kendo-menu-item
text
=
"Baseball"
>
<
kendo-menu-item
text
=
"Top News"
></
kendo-menu-item
>
<
kendo-menu-item
text
=
"Radio Records"
></
kendo-menu-item
>
</
kendo-menu-item
>
<
kendo-menu-item
text
=
"Swimming"
>
<
kendo-menu-item
text
=
"Top News"
></
kendo-menu-item
>
<
kendo-menu-item
text
=
"Radio Records"
></
kendo-menu-item
>
</
kendo-menu-item
>
</
kendo-menu
>
</
template
>
The same problem can be seen in your docs under 'Basic Usage':
https://www.telerik.com/kendo-vue-ui/components/layout/menu/
Using 'ul' instead of 'MenuItem' it seems to work fine