TreeGrid vue 3 support

[Viktor Romanyuk]

Hello! Does TreeGrid have vue3 support? I'm receiving this error

Also VirtualScroll, Page, Sort, Filter and the other modules are not available in '@syncfusion/ej2-vue-treegrid'.

The package version - 19.4.41

  

My code is bellow. Thanks in advance!

<template>
  <ejs-tree-grid
    :dataSource="data"
    :treeColumnIndex="1"
    :allowFiltering="true"
    :allowSorting="true"
    :sortSettings="sortSettings"
    childMapping="subtasks"
    :allowPaging="true"
    :pageSettings="pageSettings"
  >
    <e-columns>
      <e-column field="taskID" headerText="Task ID" textAlign="Right" width="90" />
      <e-column field="taskName" headerText="Task Name" textAlign="Left" width="180" />
      <e-column field="startDate" headerText="Start Date" textAlign="Right" format="yMd" width="90" />
      <e-column field="duration" headerText="Duration" textAlign="Right" width="80" />
    </e-columns>
  </ejs-tree-grid>
</template>

<script lang="ts">
import { defineComponent, provide } from 'vue'
import {
  VirtualScroll,
  Page,
  Sort,
  Filter,
  TreeGridComponent,
  ColumnsDirective,
  ColumnDirective
} from '@syncfusion/ej2-vue-treegrid'

export default defineComponent({
  name: 'App',
  components: {
    'ejs-tree-grid': TreeGridComponent,
    'e-columns': ColumnsDirective,
    'e-column': ColumnDirective
  },

  setup () {
    provide('treegrid', [VirtualScroll, Page, Sort, Filter])

    const localData = [{
      taskID: 1,
      taskName: 'Planning',
      startDate: new Date('02/03/2017'),
      endDate: new Date('02/07/2017'),
      progress: 100,
      duration: 5,
      priority: 'Normal',
      approved: false,
      subtasks: [
        { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
        { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, approved: true },
        { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
        { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
      ]
    },
    {
      taskID: 6,
      taskName: 'Design',
      startDate: new Date('02/10/2017'),
      endDate: new Date('02/14/2017'),
      duration: 3,
      progress: 86,
      priority: 'High',
      approved: false,
      subtasks: [
        { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
        { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
        { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true },
        { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true },
        { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
      ]
    },
    {
      taskID: 12,
      taskName: 'Implementation Phase',
      startDate: new Date('02/17/2017'),
      endDate: new Date('02/27/2017'),
      priority: 'Normal',
      approved: false,
      duration: 11,
      subtasks: [
        {
          taskID: 13,
          taskName: 'Phase 1',
          startDate: new Date('02/17/2017'),
          endDate: new Date('02/27/2017'),
          priority: 'High',
          approved: false,
          duration: 11,
          subtasks: [{
            taskID: 14,
            taskName: 'Implementation Module 1',
            startDate: new Date('02/17/2017'),
            endDate: new Date('02/27/2017'),
            priority: 'Normal',
            duration: 11,
            approved: false,
            subtasks: [
              { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
              { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
              { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
              { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
              { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
              { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority: 'Low', approved: true }
            ]
          }]
        }]
    }]

    const sortSettings = {
      columns: [
        { field: 'taskName', direction: 'Ascending' },
        { field: 'taskID', direction: 'Descending' }]
    }
    const pageSettings = { pageSize: 7 }

    return {
      localData,
      sortSettings,
      pageSettings
    }
  }
})
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
</style>

Attachment: treegrid_21164b87.zip

[Pon Selva Jeganathan]

Hi Viktor, 

 

We checked your shared sample, we are able to reproduce the issue at our end. We are validating this issue with high priority and will update further details by 20 January 2022. Until then we value your patience. 

 

Regards, 

Pon selva 

[Priyadarshan Selvan]

Hi Viktor,


Sorry for the inconvenience caused.

Due to some complexities, we need time to validate this issue at our end and will update further details by 25 January 2022. Until then we value your patience.

Regards,
Priyadarshan S

[Priyadarshan Selvan]

Hi Viktor, 

We appreciate your patience.   

On further validation, we suggest you to change the plugin-babel version and also add the babel-eslint in the package.json file.

 

"devDependencies": {

  "@vue/cli-plugin-babel": "~4.5.0",

  "@vue/cli-plugin-eslint": "~4.5.0",

   "@vue/cli-plugin-typescript": "~4.5.0",

   "@vue/cli-service": "~4.5.0",

   "babel-eslint": "^10.1.0",

}

For your reference we have prepared a sample. Please refer to the sample 

If you still face the issue, please replicate the issue with our attached sample. 

Regards, 

Priyadarshan S

Attachment: Treegrid_vue_3_48bae179.zip