Questions on Kendo UI for Vue Forum

2 answers

224 views

Using Gantt wrapper in Nuxt app

Is this possible?

I took a chance and ran through the regular installation process here:

https://www.telerik.com/kendo-vue-ui/components/gantt/#toc-initializing-with-webpack

but I get error 'window is not defined' in kendo.core.js for this line:

....

})(jQuery, window);

General Discussions

answered on 10 Feb 2021

2 answers

119 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

219 views

Using Single File Component as template in Vue 3

Howdy Folks,

anyone had any joy using a Vue single file component as a kendo template in Vue 3?

I had previously done this using the instructions here (https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/#toc-using-single-file-components) for Vue 2, but they haven't been updated to Vue 3 yet and seems that Vue.component is no longer a thing?

EF.

General Discussions

answered on 29 Jan 2021

3 answers

536 views

Kendo UI Grid Vue- scroll to selected row

Hi,
I am having two grid's in my page and I want to scroll to a particular row when the page gets loaded.

Each rows are having unique years and I want to scroll to the current year row once the page is loaded, with the class selector and the year value inside <td> i can identify the row into which I have to scroll.

I have done the similar functionality in another project but there we are using kendo UI for jquery version and https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-selected-row link I had followed to achieve the same. As my current requirement is for Kendo UI Grid for Vue , I am looking forward to the correct solution or an approach for achieving the same..

Thank you for your help in advance.
Best regards
Jaydeep

Grid

answered on 19 Jan 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

135 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

158 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

196 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.");

}