Telerik Forums
Kendo UI for Vue Forum
1 answer
154 views

Hi,

I am using Vue JS 2.6 stable version. Will the UI Controls work without issue or Is there any other configuration i need to do use with 2.x version?

Plamen
Telerik team
 answered on 24 May 2021
2 answers
254 views

Hi everybody,

I defined a window component with a onclick event in the template like that :

<window
        id="windowMD"
        :width="'300px'"
        :title="'Window title'"
        :actions="actions"
        :content="{
            url: 'http://localhost:3100/api/metadata',
            dataType: 'json',
            iframe: false,
            template:`
              <ul>
                # for (let i=0; i < data.mediaRequests.length; i++){ #
                    <li style='padding-bottom:5px;' onclick='#=eventClick(data.mediaRequests[i])#' > 
                      #= data.mediaRequests[i].id #
                    </li>
                # } # 
              </ul>
            `
        }"
    >
    </window>

But I have a problem when I click in a element in the list. I have a "the function is not defined" even if I declared it

[...]
methods: {
    eventClick: function(data) {
        console.log(data);
    }, 
  },
[...]

I see in this documentation that the function must be declared in the global scope but I need to use "$emits" to transfer data to parent component and I don't think it is possible in global scope. Even if it is possible, I have the same problem with the function ....

is there a solution to my problem ?

Thanks.
VB
Top achievements
Rank 1
Veteran
Iron
 answered on 20 May 2021
4 answers
193 views

Hello,

I have a problem with the grouping of scheduler. Now, I'm grouping the data with local ressource.

I would like to group the data with remote ressource but it doesn't work, although the format of the remote ressource array is the same as the local ressource.

Here an example of the local ressource which works : 

<kendo-scheduler

[...]

:group="resources:['Canaux']}" >

<kendo-scheduler-resource :field="'canalId'" :name="'Canaux'" :data-source="arrayCanaux" ></kendo-scheduler-resource>

</kendo-scheduler>

let arrayCanaux = [];
for (let i = 0; i < 15; i++) {
  arrayCanaux[i] = { text: "A-" + i + "", value: i };
}

And here the code with remote resource : 

axios.get('....').then(response => {

let res = responses.data.canaux

this.arrayCanaux = res.map(canal =>{ return ({ text: canal.nom, value: canal.canalId }) }) console.log(this.arrayCanaux); })


The combobox that I use works perfectly when I fill it with the arrayCanaux with remote ressource but when I want to use it for the grouping of scheduler it doesn't work.

I found this documentation I think it is a solution to my problem but is there a solution that looks like mine?

Thanks

VB
Top achievements
Rank 1
Veteran
Iron
 answered on 06 May 2021
0 answers
194 views

update to version 2021.1.33 and this does not work for me.

{ field: 'Order', title: 'Número de orden', width: '100px', editor: function (container, options) {
                        if(options !== undefined) {
                            $('<input data-bind="value:' + options.field + '"/>').appendTo(container).kendoNumericTextBox({
                                format: "#",
                                min: 1,
                                step: 1,
                                decimals: 0
                            });
                        }
                    }},

I show you a picture

Error (Uncaught TypeError: $(...).appendTo(...).kendoNumericTextBox is not a function)
Could you help me

Luis Ismael
Top achievements
Rank 1
 updated question on 05 May 2021
1 answer
493 views

Hello Folks, 

After updating vue to lattest version, I have this error after each 'npm run build' command:

 

Maybe, you have some project example with vue 3 and these libs (@progress/kendo-base-components-vue-wrapper,  @progress/kendo-base-components-vue-wrapper etc).

Here is my packege.json:

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "3.0.11",
    "vue-template-compiler": "^2.6.12",
    "@progress/kendo-base-components-vue-wrapper": "^2021.1.330",
    "@progress/kendo-charts-vue-wrapper": "^2021.1.330",
    "@progress/kendo-inputs-vue-wrapper": "^2021.1.330",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-popups-vue-wrapper": "^2021.1.330",
    "@progress/kendo-theme-bootstrap": "^4.35.1",
    "@progress/kendo-ui": "^2021.1.119",
    "@progress/kendo-vue-dateinputs": "^2.1.5",
    "@progress/kendo-vue-dropdowns": "^2.1.5",
    "@progress/kendo-vue-inputs": "^2.1.5",
    "@progress/kendo-vue-intl": "^2.1.5",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "cldr-core": "36.0.0",
    "cldr-dates-full": "36.0.0",
    "cldr-numbers-full": "36.0.0",
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.11",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue": "3.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 

 

Thanks.

Andrew
Top achievements
Rank 1
Iron
 answered on 05 May 2021
8 answers
377 views

My Gantt config is like this:

 

<ganttdatasource ref="ganttdatasource1"
                        :transport-read="ganttRead"
                        :transport-update="ganttUpdate"
                        :transport-create="ganttCreate"
                        :transport-destroy="ganttDestroy"
                        :transport-parameter-map="parameterMap"                          
                        :transport-submit="ganttSubmit"
                        schema-model-id="id"
                        :schema-model-fields="fields"
>
</ganttdatasource>
 
<ganttdependencydatasource ref="ganttdependencydatasource1"
                        :transport-read="dependRead"
                        :transport-update="dependUpdate"
                        :transport-create="dependCreate"
                        :transport-destroy="dependDestroy"
                        :transport-parameter-map="parameterMap"
                        schema-model-id="id"
                        :schema-model-fields="dependencyFields"
>
</ganttdependencydatasource>
 
    <gantt
        ref="kendogantt"
        id="gantt"
        :height="500"
        :editable-create="true"        
        data-source-ref="ganttdatasource1"           
        dependencies-data-source-ref="ganttdependencydatasource1"
        :assignments="assignments"         
        :resources="resources"
    >
    </gantt>

 

Then methods:

methods: {
    dependRead: async function(options) {
        console.log("dependRead!", options)
        try {
 
            const links = await this.$axios.$get(................)
 
            options.success(links)
 
        } catch (ex) {
            options.error(ex)
        }          
    },

 

All works fine except that I get spurious calls to dependRead, in the console I see two or three logs for 'dependRead' every time the gantt loads.

If I remove the async/await code then I see only one call to dependRead as expected - so my question is, should I be using blocking or non-blocking handlers for this? async handlers are the correct approach by my thinking...

 

[Interestingly ganttRead uses exactly the same async mechanism but that is only ever called once]

Al
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 29 Apr 2021
3 answers
470 views

I have some additional info that I want to capture when creating a new task for the Gantt eg. task owner, status etc. so obviously I will need a custom screen to capture the extra info, I was thinking along these lines:

- Have a custom 'add task button' & hide the built-in one

- The button will open my custom screen which mimics the builtin one, but with some additional fields

- On save, the screen directly updates that backend and then refresh the gantt

 

Is this the best way to do this and/or is there any flaw with this approach?

If ok, then how would I refresh the gannt? would I have to rebind it or is it better/possible to add the new task to the datasource and then sync?

Petar
Telerik team
 answered on 23 Apr 2021
2 answers
188 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
13 answers
477 views

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

<kendo-scheduler id="scheduler"
      :data-source="localDataSource"
      :event-template="eventTemplate"
      :editable="{template:editTemplate}"
    >

 

The code of the method editTemplate()

methods: {
    editTemplate: function(){
      return {
         template: Vue.component(CustomEditTemplate.name, CustomEditTemplate),
      
    }
},

 

The code of the component that contains the custom template

<template>
    <div class="k-edit-form-container">
        <p> Titre <input type="text" /> </p>
        <p>
            <span >Start <input data-role="datetimepicker" name="start" /> </span>
            <span >End <input data-role="datetimepicker" name="end" /> </span>
        </p>
    </div>
</template>
 
<script>
export default {
    name:"CustomEditTemplate",
}
</script>

 

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

 

Thanks.

 

 

 

Petar
Telerik team
 answered on 12 Apr 2021
3 answers
127 views

I have config like this:

 

<ganttdatasource ref="ganttdatasource1"
                        :transport-read="ganttRead"
                        :transport-update="ganttUpdate"
                        :transport-create="ganttCreate"
                        :transport-destroy="ganttDestroy"
                        :transport-parameter-map="parameterMap"                          
                        :transport-submit="ganttSubmit"
                        schema-model-id="id"
                        :schema-model-fields="fields">
</ganttdatasource>

 

From what I can tell from the docs if transport-submit is defined then the create/update/destroy functions should not be fired and all should be batched up into a single call to transport-submit, but this does not happen: transport-submit is never called and transport-update etc. are all called as normal.

Is this a bug or do I misunderstand the operation?

Petar
Telerik team
 answered on 29 Mar 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
DataSource wrappers (package)
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
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?