Search results

Get the total count of data when remote data bind with DropDownList in React DropDownList component

29 Nov 2022 / 2 minutes to read

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

After rendering this component, you can get the total items count by using getItems method.

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

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        // bind the DataManager instance to dataSource property
        this.customerData = new DataManager({
            adaptor: new ODataV4Adaptor,
            crossDomain: true,
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        });
        // bind the Query instance to query property
        this.query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
        // maps the appropriate column to fields property
        this.fields = { text: 'ContactName', value: 'CustomerID' };
        // sort the resulted items
        this.sortOrder = 'Ascending';
        this.onclick = this.onclick.bind(this);
    }
    onActionComplete(e) {
        // get total items count
        console.log("Total items count: " + e.result.length);
        const element = document.createElement('p');
        element.innerText = "Total items count: " + e.result.length;
        document.getElementById('event').append(element);
    }
    onclick() {
        // get items count using getItems method
        console.log("Total items count: " + this.dropDownListObject.listData.length);
        const element = document.createElement('p');
        element.innerText = "Total items count: " + this.dropDownListObject.listData.length;
        document.getElementById('event').append(element);
    }
    render() {
        return (
        // specifies the tag for render the DropDownList component
        <div>
        <DropDownListComponent ref={(scope) => { this.dropDownListObject = scope; }} id="ddlelement" query={this.query} dataSource={this.customerData} fields={this.fields} sortOrder={this.sortOrder} placeholder="Select a customer" actionComplete={this.onActionComplete}/>
          <div id='event'/>
        <button id='btn' className="e-control e-btn" onClick={this.onclick}> Get items </button>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DropDownList</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		#btn{
			margin: 50px;
		}
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
	<div id='event'></div>
</body>

</html>
Copied to clipboard
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
  // bind the DataManager instance to dataSource property
  private customerData: DataManager = new DataManager({
    adaptor: new ODataV4Adaptor,
    crossDomain: true,
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
  });
  private dropDownListObject: any;
  // bind the Query instance to query property
  private query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
  // maps the appropriate column to fields property
  private fields: object = { text: 'ContactName', value: 'CustomerID' };
  // sort the resulted items
  private sortOrder: string = 'Ascending';
  constructor(props: any) {
    super(props);
    this.onclick = this.onclick.bind(this);
  }
  public onActionComplete(e: any) {
    // get total items count
    console.log("Total items count: " + e.result.length);
    const element: HTMLElement = document.createElement('p');
    element.innerText = "Total items count: " + e.result.length;
    (document.getElementById('event') as any).append(element);
  }
  public onclick() {
    // get items count using getItems method
    console.log("Total items count: " + this.dropDownListObject.listData.length);
    const element: HTMLElement = document.createElement('p');
    element.innerText = "Total items count: " + this.dropDownListObject.listData.length;
    (document.getElementById('event') as any).append(element);
  }
  public render() {
    return (
      // specifies the tag for render the DropDownList component
      <div>
        <DropDownListComponent ref={(scope) => { this.dropDownListObject = scope; }} id="ddlelement"
          query={this.query} dataSource={this.customerData}
          fields={this.fields} sortOrder={this.sortOrder} placeholder="Select a customer" actionComplete={this.onActionComplete} />
          <div id='event'/>
        <button id='btn' className="e-control e-btn" onClick={this.onclick}> Get items </button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));