Telerik Forums
Kendo UI for Vue Forum
2 answers
123 views

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.

Petar
Telerik team
 answered on 22 Apr 2021
3 answers
50 views

There is a way to block appointments in hours.

Example in the image

Petar
Telerik team
 answered on 15 Mar 2021
1 answer
81 views

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!









Petar
Telerik team
 answered on 12 Mar 2021
2 answers
66 views

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.

Petar
Telerik team
 answered on 03 Feb 2021
3 answers
88 views
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
Petar
Telerik team
 answered on 19 Jan 2021
4 answers
71 views

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?

Plamen
Telerik team
 answered on 24 Dec 2020
1 answer
81 views

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?

Plamen
Telerik team
 answered on 24 Dec 2020
2 answers
130 views

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>
Plamen
Telerik team
 answered on 24 Dec 2020
1 answer
69 views

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.");
}
Petar
Telerik team
 answered on 22 Dec 2020
1 answer
140 views

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

 

Petar
Telerik team
 answered on 22 Dec 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DatePicker
DropDownTree wrapper
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
Calendar
DataSource wrappers (package)
Styling / Themes
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
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
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?