How to use Gantt with graphql backend

[Al]

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>

[Al]

I managed to get this working but the docs are really lacking in this regard. schema-parse is not mentioned anywhere and it was only by deduction from other components' docs that I ended up with the solution below:

Add schema-parse prop to gantdatasource

:schema-parse="returnData"

 

Add the equivalent method to the component:

returnData: function(data) {
    return data.data.projecttasks;
}

[Plamen]

Hello,

Thank you for your feedback.

Yes indeed, the Wrapper Vue components are a thin layer over the jQuery widgets add that is why in many cases we need to reference the Kendo jQuery documentation to handle some specific issues.

Please excuse us for this confusion caused.

Regards,
Plamen
Progress Telerik