Dropdown for Page Sizes

[Christian DAquino]

Hi,

Why doesn't the page size dropdown gets rendered on this? Is there any conflict between the Gantt and Pager plugins?

<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"

          :projectStartDate="projectStartDate"

          :projectEndDate="projectEndDate"

        >

        </ejs-gantt>

        <ejs-pager

          id="ganttPager"

          :pageSize="pagerSettings.pageSize"

          :pageSizes="pagerSettings.pageSizes"

          :totalRecordsCount="pagerSettings.totalRecordsCount"

        />

    </div>

  </q-page>

</template>

<script>

import Vue from 'vue'

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

import { PagerPlugin } from '@syncfusion/ej2-vue-grids'

Vue.use(GanttPlugin)

Vue.use(PagerPlugin)

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' }

      ],

      projectStartDate: new Date(2021, 3, 1),

      projectEndDate: new Date(2021, 4, 30),

      pagerSettings: {

        pageSize: 21,

        pageSizes: ['21', '50', 'All'],

        totalRecordsCount: 0

      }

    }

  },

  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

      this.pagerSettings.totalRecordsCount = response.data.data.length

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

      pagerObj.totalRecordsCount = this.pagerSettings.totalRecordsCount

      pagerObj.refresh()

    })

  }

}

</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>

[Monisha Sivanthilingam]

Hi Christian, 

  

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

  

We appreaciate your patience until then. 

  

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Christian, 

 

We appreciate your patience. 

 

We have analyzed the code snippets you shared and have identified the reason for your issue. You have not injected the PagerDropdown module in the Pager compoenent which is the cause of the issue you faced. Please refer the following modules in your sample to render the pager dropdown. 

 

App.vue 

import Vue from "vue"; 

import { PagerPlugin } from "@syncfusion/ej2-vue-grids"; 

import { Pager, PagerDropDown } from "@syncfusion/ej2-grids"; 

import { 

  GanttPlugin, 

  ContextMenu, 

  Edit, 

  Selection, 

  Toolbar, 

} from "@syncfusion/ej2-vue-gantt"; 

 

Vue.use(GanttPlugin); 

Pager.Inject(PagerDropDown); 

Vue.use(PagerPlugin); 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.