How to get total count of data in Vue Dropdown List

03 Sep 20266 minutes to read

Before the component renders, you can get the total items count by using the actionComplete event with its result arguments.

After the component is rendered, you can get the total items count by using the getItems method.

The following example demonstrates how to get the total items count.

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-dropdownlist id='dropdownlist' ref='dropdown' placeholder='Select a customer'
        :actionComplete='actionComplete' :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
    <div style='padding: 50px 0'>
      <button id='first' class="e-control e-btn" v-on:click="getItems"> Get items</button>
    </div>
    <p id='event'> </p>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";

const dropdown = ref(null);
const query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
const dataSource = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
});
const fields = { text: 'ContactName', value: 'CustomerID' };

const actionComplete = function (e) {
  // initially result contains 6 items
  console.log("Before modified the result: " + e.result.length);
  // remove first 2 items from result.
  e.result.splice(0, 2);
  // now displays the result count is 4.
  console.log("After modified the result: " + e.result.length);
};
const getItems = function (e) {
  // get items count using getItems method
  console.log("Total items count: " + dropdown.value.getItems().length);
  let element = document.createElement('p');
  element.innerText = "Total items count: " + dropdown.value.getItems().length;
  document.getElementById('event').append(element);
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-dropdownlist id='dropdownlist' ref='dropdown' placeholder='Select a customer'
        :actionComplete='actionComplete' :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
    <div style='padding: 50px 0'>
      <button id='first' class="e-control e-btn" v-on:click="getItems"> Get items</button>
    </div>
    <p id='event'> </p>
  </div>
</template>
<script>
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";

export default {
  name: "App",
  components: {
    "ejs-dropdownlist": DropDownListComponent
  },
  data() {
    return {
      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
      dataSource: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
      }),
      fields: { text: 'ContactName', value: 'CustomerID' }
    }
  },
  methods: {
    actionComplete: function (e) {
      // initially result contains 6 items
      console.log("Before modified the result: " + e.result.length);
      // remove first 2 items from result.
      e.result.splice(0, 2);
      // now displays the result count is 4.
      console.log("After modified the result: " + e.result.length);
    },
    getItems: function (e) {
      // get items count using getItems method
      console.log("Total items count: " + this.$refs.dropdown.getItems().length);
      var element = document.createElement('p');
      element.innerText = "Total items count: " + this.$refs.dropdown.getItems().length;
      document.getElementById('event').append(element);
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>