Pagination on Gantt Chart

[Christian DAquino]

Hi,

Is the pagination module available on the Gantt Chart? I have a quite large data set of 500+ items and even with Virtual Scroll enabled it just becomes too laggy and almost unusable. Is there any work around for this?

[Monisha Sivanthilingam]

Hi Christian, 

 

Thank you for contacting Syncfusion support. 

 

Currently, we do not have support for pagination in Syncfusion Gantt and work-around also can’t be possible for all use cases. However, we have already logged a feature report for this. You can track its status from the following feedback link. 

 

Feedback: https://www.syncfusion.com/feedback/10806/support-for-pagination-in-gant 

 

However, as we have already lined up some major features, we could not implement this support immediately. We will implement this and include it in any of our upcoming releases. Please cast your vote on this feature based on the customer demand we will prioritize the features in our upcoming road map. 

 

Regards, 

Monisha. 

[Christian DAquino]

I've managed to integrate both the DataManager and Pager modules into the Gantt Chart to achieve the intent. It works on the tasks view, but not on the Resources view. The whole datasource is displayed on the view and not only the selected page. And the data just disappears while scrolling up or down. Any suggestions on how to fix it? 

      this.getSchedules(params).then(response => {

        if ((this.objectID === 'tspDemandGantt') || (this.objectID === 'tspResourcesGantt')) {

          dataSource = new DataManager(response.data)

          query = new Query()

          const page = dataSource.executeLocal(query.take(this.pagerSettings.pageSize))

          gridObj.updateDataSource(page)

          this.pagerSettings.totalRecordsCount = response.data.length

          const pagerObj = document.getElementById('ganttPager').ej2_instances[0]

          pagerObj.totalRecordsCount = this.pagerSettings.totalRecordsCount

          pagerObj.refresh()

        } else {

          gridObj.dataSource = [...response.data]

        }

      })

Attachment: SPS_•_Services_Planning_System__Google_Chrome_20210318_213447_70f1b7d2.zip

[Christian DAquino]

Another question: how to refresh the grid data after collapsing/expanding a row? How to implement that on the DataManager so that the rows are added or removed from the current page?

[Pooja Priya Krishna Moorthy]

Hi Christian, 

Currently, we are working on this. We will update you further details in two business day.(March 24, 2021) 

Until then we appreciate your patience. 

 

Regards, 

Pooja K. 

 

[Christian DAquino]

Hi,

Is there an update to this?

[Pooja Priya Krishna Moorthy]

Hi Christian, 

We are sorry for the delay. 

Please find the below response. 

S.No	Query	Syncfusion Comments
1	The whole datasource is displayed on the view and not only the selected page. And the data just disappears while scrolling up or down. Any suggestions on how to fix it?	We are able to replicate this issue when paging and virtualization is enabled. Can you please check in your application, whether you have enabled virtualization or not?  If you still face the issue even after disabling the virtualization, please share us your issue reproduceable sample, so that it will be very helpful to check from our end and provide you proper solution.
2	how to refresh the grid data after collapsing/expanding a row? How to implement that on the DataManager so that the rows are added or removed from the current page?	As Grid is our dependent component, we have forwarded this query to the concerned team. We will update you further details, after we get an update from them.

  

Regards, 

Pooja K. 

[Pooja Priya Krishna Moorthy]

Hi Christian, 

Thanks for your patience. 

We would like to suggest you to make use of virtualization support without enabling the paging concept. We have rendered nearly 2050 records and Gantt renders without any delay. Please find the below sample link. 

https://ej2.syncfusion.com/vue/demos/#/material/gantt/virtual-scroll.html 

If you face any issue, please share us your issue reproducible sample.  

Else if you need to use paging concept for any purpose, please share more detail on this.  

1. Purpose of using paging concept.
2. Workaround sample, so that it will be very helpful, to analyze it and provide you a proper solution according to your implementation.

  

Regards, 

Pooja K. 

[Christian DAquino]

Hi Pooja,

Only reason to use the paging is because the virtualization doesn't seem to be working for me. This is an overly simplified version of my code and you can see from here that the gantt is already extremely laggy:

<template>

  <q-page padding>

    <div class="grid-height">

        <ejs-gantt ref='gantt' id="virtualscroll"

          :dataSource= "data"

          :taskFields= "taskFields"

          :allowSelection= "true"

          :enableVirtualization= "true"

          :labelSettings= "labelSettings"

          :height= "height"

          :treeColumnIndex= "1"

          :highlightWeekends= "true"

          :columns= "columns"

          :splitterSettings= "splitterSettings"

          :renderBaseline="true"

          baselineColor="#e9c46a"

          :tooltipSettings="tooltipSettings"

          :holidays="holidays"

        >

        </ejs-gantt>

    </div>

  </q-page>

</template>

<script>

import Vue from 'vue'

import { GanttPlugin, Selection, VirtualScroll } from '@syncfusion/ej2-vue-gantt'

Vue.use(GanttPlugin)

export default {

  name: 'test',

  data () {

    return {

      data: [],

      taskFields: {

        id: 'id',

        name: 'task_name',

        startDate: 'start_date',

        endDate: 'finish_date',

        duration: 'duration',

        progress: 'progress',

        parentID: 'parent_id'

      },

      columns: [

        { field: 'id' },

        { field: 'task_name' },

        { field: 'start_date' },

        { field: 'duration' },

        { field: 'progress' }

      ],

      height: '650px',

      labelSettings: {

        taskLabel: 'progress'

      },

      splitterSettings: {

        columnIndex: 2

      },

      tooltipSettings: {

        showTooltip: true

      },

      holidays: [

        { from: '04/02/2021', to: '04/02/2021', label: 'Good Friday (AUS)', cssClass: 'e-custom-holiday' },

        { from: '04/05/2021', to: '04/05/2021', label: 'Easter Monday (AUS)', cssClass: 'e-custom-holiday' },

        { from: '04/26/2021', to: '04/26/2021', label: 'ANZAC Day (AUS)', cssClass: 'e-custom-holiday' },

        { from: '06/07/2021', to: '06/07/2021', label: 'WA Day (AUS)', cssClass: 'e-custom-holiday' },

        { from: '09/27/2021', to: '09/27/2021', label: "Queen's Birthday (AUS)", cssClass: 'e-custom-holiday' },

        { from: '12/27/2021', to: '12/27/2021', label: 'Christmas Day (AUS)', cssClass: 'e-custom-holiday' },

        { from: '12/28/2021', to: '12/28/2021', label: 'Boxing Day (AUS)', cssClass: 'e-custom-holiday' }

      ]

    }

  },

  provide: {

    gantt: [Selection, VirtualScroll]

  },

  created () {

    this.$axios.get('https://tst-api.tfmch.com/api/v1/tsp-schedule-views').then(response => {

      this.data = response.data.data

    })

  }

}

</script>

<style>

@import "~@syncfusion/ej2-base/styles/material.css";

@import "~@syncfusion/ej2-buttons/styles/material.css";

@import "~@syncfusion/ej2-calendars/styles/material.css";

@import "~@syncfusion/ej2-dropdowns/styles/material.css";

@import "~@syncfusion/ej2-inputs/styles/material.css";

@import "~@syncfusion/ej2-navigations/styles/material.css";

@import "~@syncfusion/ej2-lists/styles/material.css";

@import "~@syncfusion/ej2-layouts/styles/material.css";

@import "~@syncfusion/ej2-popups/styles/material.css";

@import "~@syncfusion/ej2-splitbuttons/styles/material.css";

@import "~@syncfusion/ej2-grids/styles/material.css";

@import "~@syncfusion/ej2-richtexteditor/styles/material.css";

@import "~@syncfusion/ej2-treegrid/styles/material.css";

@import "~@syncfusion/ej2-vue-gantt/styles/material.css";

@import "~@syncfusion/ej2-vue-grids/styles/material.css";

</style>

And my real code is rendering way more things on the screen than that, to the point that it unusable. Let me know if there is something that can be done to improve the responsiveness with the virtualization, otherwise I can share my final code to get help on the paging component.

Also, after upgrading to version "@syncfusion/ej2-vue-gantt": "^18.4.47", I am getting the error message below after date is rendered on grid:

[Pooja Priya Krishna Moorthy]

Hi Christian, 

Thanks for sharing the code snippet. 

We are able to replicate the reported console error. We will validate more on this and update you further details on April 5, 2021. 

Until then we appreciate your patience. 

Regards, 

Pooja K. 

[Christian DAquino]

Hi,

Any feedback on this?

[Monisha Sivanthilingam]

Hi Chrisitan, 

  

Currnetly, we are validating your query. We will provide you with an update within one business day(13-04-2021). 

  

We appreciate your pateince until then. 

  

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Christian, 

  

We apologize for the delay. 

  

We were able to replicate the issue in our dependent component also. Hence, we have forwarded the query to the concerned team. We will update you with further details on 14-04-2021. 

  

We appreciate your patience until then. 

  

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Christian, 

 

We appreciate your patience. 

 

We were able to replicate your issue and have logged a bug report for it. You can track its status from the below feedback link. 

 

Feedback: https://www.syncfusion.com/feedback/24300/script-error-when-binding-data-source-to-tree-grid-using-axios-with-virtualization 

 

The fix will be provided in the 2021 Volume 1 SP 1 Release scheduled for the mid of May 2021. 

 

We appreciate your patience until then.                                                                                                                                            

 

Regards, 

Monisha.