Search results

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

22 Jul 2021 / 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
app.component.ts
app.module.ts
main.ts
template.html
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'

@Component({
    selector: 'control-content',
    // specifies the template path for DropDownList component
    templateUrl: `template.html`
})
export class AppComponent {
    @ViewChild('sample')
    public dropDownListObject = DropDownListComponent;
    constructor() {

    }
    ngAfterViewInit(){
        let proxy=this;
        document.getElementById('btn').onclick = () => {
            // get items count using getItems method
            console.log("Total items count: " + proxy.dropDownListObject.getItems().length);
            let element: HTMLElement = document.createElement('p');
            element.innerText = "Total items count: " + proxy.dropDownListObject.getItems().length;
            document.getElementById('event').append(element);
        }
    }
    //bind the DataManager instance to dataSource property
    public data: DataManager = new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
            adaptor: new ODataV4Adaptor,
            crossDomain: true
        });
    // maps the appropriate column to fields property
    public fields: Object = { text: 'ContactName', value: 'CustomerID' };
    //bind the Query instance to query property
    public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
    //set the placeholder to DropDownList input
    public text: string = "Select a customer";
    //sort the result items
    public sorting: string = 'Ascending';
    public actionComplete(e: any): void {
         // get total items count
        console.log("Total items count: " + e.result.length);
        let element: HTMLElement = document.createElement('p');
        element.innerText = "Total items count: " + e.result.length;
        document.getElementById('event').append(element);
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, DropDownListModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div class="control-section">
    <div class="content-wrapper"> 
        <div id='icon'>
            <div class="content" style="margin: 50px auto 0; width:250px;">
                <ejs-dropdownlist id='ddlelement' #sample [dataSource]='data' [fields]='fields' [placeholder]='text' [query]='query' 
				[sortOrder]='sorting' (actionComplete)="actionComplete($event)"></ejs-dropdownlist>
                <div style='padding: 50px 0'>
					<button ej-button id='btn' #btn class="e-control e-btn"> Get Item Count </button>
				</div>
				 <p id='event'> </p>
            </div>
        </div>
    </div>
</div>