Questions on Kendo UI for Vue Forum

3 answers

233 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

552 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

204 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

147 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

167 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

202 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

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

}

answered on 22 Dec 2020

1 answer

264 views

Menu child items do not display with MenuItem

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

answered on 22 Dec 2020

4 answers

121 views

Month Selection is not working

When clicking on the month up at the top of the popup, the list of available months shows up for a second and then the calendar panel slides back in, preventing new month selection. What can be done to address this behavior and let user pick the new month from the list?

General Discussions