1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Filtering is not working

Filtering is not working

Hi,
i am using combobox control.i want filtering service in combobox .After doing all the configuration for filtering service.when i am searching data  it is showing "Request Failed".could you please give me example how to filtering service when databinding to datasource is Remote data binding.
here,i am giving code that i have tried.please let me know if i have done any mistake.

app.component.html:
app.component.ts

import { Component, ViewChild } from '@angular/core';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { FilteringEventArgs } from '@syncfusion/ej2-dropdowns';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public data: DataManager = new DataManager({
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
public fields: Object = { text: 'ContactName', value: 'CustomerID' };
public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5);
public placeholder: string = 'Select customers';
public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
let query: Query = new Query();
// frame the query based on search string with filter type.
query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
// pass the filter data source, filter query to updateData method.
e.updateData(this.data, query);
}


}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ComboBoxModule } from '@syncfusion/ej2-ng-dropdowns';



@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
ComboBoxModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }



3 Replies
GG Gopi Govindasamy Syncfusion Team February 5, 2018 12:46 PM UTC

Hi Prangya,  

Thanks for using Syncfusion EJ2 components. 

We have checked the shared code snippet for ComboBox filtering with remote data. In your code snippet, filtering event passed empty query object. It does not have select table name and column filed as like below code, Hence your have facing request failed problem. Now we have prepared simple sample for your requirement. Please find the sample below link   

  //Bind the filter event 
    public onFiltering: EmitType = (e: FilteringEventArgs) => { 
    // load overall data when search key empty. 
    if (e.text === '') { 
        e.updateData(this.data); 
    } else { 
        let query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']); 
        // change the type of filtering 
        query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query; 
        e.updateData(this.data, query); 
    } 
}; 
 


Please let us know if you have any concern, we will happy to help you. 

Regards,
Gopi G 


PT Prangya Tiwari February 7, 2018 08:17 AM UTC

Hi,i am facing issue in filteration of combobox.i have sent you the code ,i have tried.but it is not working the "add item popup" is coming as soon as i am typing any thing in combobox.
could you please take a look on my code and please let me know if i have done any mistake.
"company data " coming as array of objects[{id:'09','name':'Ram'},{id:'09','name':'Ram'}].
another question if there is any method through which when i click on on external button, i can clear the data selected in combobox


 <ej-combobox id='comboelement' #remote [dataSource]='data'
        [fields]='Fields' [placeholder]='PlaceHolder'  [allowFiltering]=true
        (filtering)='onFiltering($event)' (select)="onSelectdata($event)" [popupHeight]='height'>
<ng-template #noRecordsTemplate>
        <div id="nodata"> No matched item, do you want to add it as new item in list?</div> <button (click)="addNewItem($event)" class="e-control e-btn">Add New Item</button>
    </ng-template>
  </ej-combobox>
  

import { ComboBoxComponent } from '@syncfusion/ej2-ng-dropdowns';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.css']
})
export class Appcomponent implements OnInit{
  @ViewChild('companyremote')
  public comboObj: ComboBoxComponent;
  public dataSelected: DataI;
   

  ngOnInit() {
     
    //  ComboBox
    this.data= new DataManager({
      url: //url is given,
      adaptor: // i have used custom adaptor
      crossDomain: true,
      headers: //here header is passed
    });
    this.Fields = { text: 'name', value: 'id' };
    this.PlaceHolder = 'Select an item';
    
}
    
  // item Selection
  onSelectdata() {
   //functionality written on selection of item using systemevnt args
  }
 
  public addNewItem = () => {
    // get the typed characters
    let customValue: string = (this.comboObj.element.getElementsByClassName('e-input')[0] as HTMLInputElement).value;
   //api is called 
    //here m calling my calling my service by providing obj using custom value ,i am subscribing the response coming from server//.subscribe(response => {
      this.comboObj.hidePopup();// hiding the popup
      this.comboObj.addItem(response.obj);//adding obj item in combobox
      this.comboObj.value = response.obj.name;//seting current selected value as response obj text
    });
}

public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {

  if (e.text === '') {
    let query: Query = new Query().select(['name', 'id']);
    e.updateData(this.data.executeLocal(query));
  } else {
    let query: Query = new Query().select(['name', 'id']);
    // change the type of filtering
    query = (e.text !== '') ? query.where('name', 'startswith', e.text, true) : query;
    e.updateData(this.data.executeLocal(query));
  }
}

 

  
}


GG Gopi Govindasamy Syncfusion Team February 8, 2018 12:51 PM UTC

Hi Prangya,  

Query 1: Add item popup in combobox 

We have checked your shared code snippet for “add item popup” in ComboBox. In filtering event, you have used excuteLocal() method  and for remote datasouce  used excuteLocal() method, the excuteLocal() method used only local  . For remote data you can pass the query parameter in updateData() method directly. We have prepared sample based on your requirement, please find the code snippet and sample link below.     

We have prepared sample based on your requirement, please find the code snippet and sample link below.   

public onFiltering: EmitType =  (e: FilteringEventArgs) => { 
          let query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']); 
          query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query; 
          e.updateData(this.data, query); 
    } 

The custom value character is added in the existing list as a new item by click the Add new item button.   

Query 2: clear the data selected in combobox 

We have checked your requirement on dynamically remove the selected items through programmatically. In the below sample the “clear value” button click take the ComboBox instance and set null in “value” property. We have prepared a sample based on your requirement.   



Let us know if you have any concern, we will happy to help you. 

Regards, 
Gopi G. 


Loader.
Up arrow icon