No scrolling bar after set :enableVirtualization to true and hight to 150

[Fan Zhang]

No scrolling bar after set :enableVirtualization to true and hight to 150.

<template>

  <div class="dlgconsolidatedpulsereport">

    <VueLabel classCtrl="labelmonthly" label="Report Month:" />

    <VueDropDownList

      :options="report_monthly"

      classCtrl="dropdown_monthly"

      v-model="selected_monthly"

      @input="handlemonthlyFieldChanged"

    />

    <VueLabel classCtrl="labelformat" label="Report Format:" />

    <VueDropDownList

      :options="report_formats"

      classCtrl="dropdown_format"

      v-model="selected_format"

    />

    <VueLabel classCtrl="labelreporttype" label="Type:" />

    <VueDropDownList :options="report_type" classCtrl="dropdown_type" v-model="selected_type" />

    <VueButton

      classCtrl="btnreportpreview"

      label="Report Preview"

      @click.stop.prevent="previewHanlder"

    />

    <VueButton

      classCtrl="btnsubmitbothreports"

      label="Submit Both Reports"

      @click.stop.prevent="submitbothreportsHanlder"

    />

    <VueLabel classCtrl="labelmarketlist" label="Market list:" />

    <div id="flat-list" class="flat-list">

      <ejs-listview

        id="sample-list-flat"

        :dataSource="marketlist"

        showCheckBox="true"

        showHeader="true"

        :enableVirtualization="true"

        :height="150"

        :fields="fields"

        :key="refreshcount"

        :width="250"

      ></ejs-listview>

    </div>

  </div>

</template>

<script>

import dlgmixin from "@/mixins/dlg_mixin";

import langmixin from "@/mixins/lang_mixin";

import Vue from "vue";

import { ListViewPlugin, Virtualization } from "@syncfusion/ej2-vue-lists";

import { getSysInfo } from "@/utils/UtilsSys";

Vue.use(ListViewPlugin);

export default {

  name: "DlgConsolidatedPulse",

  mixins: [dlgmixin, langmixin],

  data() {

    return {

      report_monthly: [],

      selected_monthly: "Current Month",

      report_formats: ["PDF", "Excel"],

      selected_format: "PDF",

      report_type: ["Consolidation", "Design"],

      selected_type: "Consolidation",

      marketlist: [],

      enableUi: true,

      fields: { text: "CountryName" },

      refreshcount: 0

    };

  },

  provide: {

    listview: [Virtualization]

  },

  methods: {

    previewHanlder() {

      //get selected paramater here

      /*       const param = {

        startyear: this.startselyear,

        endyear: this.endselyear

      };

      this.sendOkEevent(param); */

    },

    submitbothreportsHanlder() {

      //this.sendCancelEvent();

    },

    getmonthandannual() {

      const currentdate = new Date();

      var iToken = currentdate.getFullYear() * 12 + currentdate.getMonth();

      for (var ii = 0; ii < 13; ii++) {

        if (ii == 0) {

          this.report_monthly.push("Current Month");

        } else {

          var iYear = parseInt((iToken - ii) / 12);

          var iMonth = ((iToken - ii) % 12) + 1;

          var RptMonth = iYear.toString() + "-" + iMonth.toString();

          this.report_monthly.push(RptMonth);

        }

      }

    },

    handlemonthlyFieldChanged(para) {

      this.selected_monthly = para;

    }

  },

  created() {

    this.getmonthandannual();

    const userRegion = getSysInfo();

    this.marketlist = userRegion.ConsolidCountryList;

    this.refreshcount++;

  },

  computed: {}

};

</script>

<style lang = "scss" scoped>

$edge-space: 25px;

$firstrow-top: 20px;

$secondrow-top: 50px;

$thirdrow-top: 80px;

$fouthrow-top: 120px;

$fifthrow-top: 160px;

$sixthrow-top: 260px;

$seventhrow-top: 280px;

$eighthrow-top: 510px;

$ninthrow-top: 530px;

$tenthrow-top: 560px;

$label-width: 80px;

$dropdown-left: 130px;

$dropdown-width: 120px;

$storetype-left: 250px;

$ddlstoretype-left: 320px;

$button-width: 150px;

$button-preview-left: 35px;

$button-submit-left: 220px;

.dlgconsolidatedpulsereport {

  width: 400px;

  height: 500px;

}

.labelbaseclass {

  position: absolute;

  left: $edge-space;

  text-align: right;

  width: $label-width;

}

.labelmonthly {

  position: absolute;

  top: $firstrow-top;

  left: 35px;

}

.dropdown_monthly {

  position: absolute;

  width: $button-width;

  top: $firstrow-top;

  left: 135px;

}

.btnreportpreview {

  position: absolute;

  top: $fouthrow-top;

  left: $button-preview-left;

  width: $button-width;

}

.btnsubmitbothreports {

  position: absolute;

  width: $button-width;

  top: $fouthrow-top;

  left: $button-submit-left;

}

.labelformat {

  position: absolute;

  top: $secondrow-top;

  left: 35px;

}

.dropdown_format {

  position: absolute;

  width: $button-width;

  top: $secondrow-top;

  left: 135px;

}

.labelreporttype {

  position: absolute;

  top: $thirdrow-top;

  left: 35px;

}

.dropdown_type {

  position: absolute;

  width: $button-width;

  top: $thirdrow-top;

  left: 135px;

}

.labelmarketlist {

  position: absolute;

  top: $fifthrow-top;

  left: 35px;

}

.flat-list {

  position: absolute;

  left: 35px;

  top: 180px;

  width: 250px;

  height: 150px;

}

.sample-list-flat {

  position: absolute;

  display: block;

  max-width: 400px;

  border-radius: 3px;

  cursor: pointer;

}

</style>

[Sowmiya Padmanaban]

Hi Fan Zhang,  

 

Greetings from Syncfusion support. 

 

We have checked your reported issue with ListView component. Unfortunately, we were unbale to reproduce the reported issue. For your reference, we have  prepared a sample for ListView component based on your shared code snippet. 

 

<ejs-listview 

        id="sample-list-flat" 

        :dataSource="marketlist" 

        showCheckBox="true" 

        showHeader="true" 

        headerTitle="Contacts" 

        :enableVirtualization="true" 

        :height="150" 

        :fields="fields" 

        :key="refreshcount" 

        :width="450" 

      ></ejs-listview> 

 

Refer the below screenshot. 

 

Refer the sample link below. 

https://codesandbox.io/s/vue-template-opb1z?file=/src/components/DefaultMenu.vue 

 

If the issue still persist, could you please share the below details. It will help us to resolve your issue at the earliest. 

1.     Package version you have used in your application. 

2.     Share the issue reproducing video footage. 

3.     If possible, replicate the issue in attached sample. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Fan Zhang]

When i install :npm install @syncfusion/ej2-vue-lists

It shows some WARN:

npm WARN @syncfusion/[email protected] requires a peer of [email protected] - 2.5.21 but none is installed. You must install peer
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourse
npm WARN [email protected] requires a peer of webpack@^4.36.0 but none is installed. You must install peer dependencies yours
npm WARN [email protected] requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yours
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (c)

Will those cause the error.

[Muthukrishnan Kandasamy]

 

Hi Fan, 

 

Thanks for the update. 

 

We have checked your reported issue in local sample, we were unable to replicate your reported issue. The scrolling bar was added when we set the height as 150. We have attached the sample for your convenience, please check the below link for the sample. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewVue292814751 

 

To run the sample. 

 

1)     npm install 

2)     npm run dev 

 

Please check the below screenshot of the attached sample. 

 

If you are still facing the issue, kindly share the following details.   

  

1.     If facing any console error, share the screenshots. 

2.     If possible, please share the issue reproducing sample or reproduce the issue in the provided sample. 

3.     Screen recorded video of issue with issue replicating steps. 

  

This information would help us to validate your reported problem and to provide you the prompt solution needed. 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K