How to bind to remote data and filter using Angular Http Client?

[EBrito]

Hi, 

The remote data bind and filter is well documented using the DataManager.

While using the control in an Angular app, I'd like to keep using my existing data services which are based on Angular Http Client  and Http Interceptors.

On this post you explain well how to hook into grid events and use the grid while leveraging http client and observables.

I looked into the DropDownList documentation but I couldn't find similar events.

Would this be even possible?

One advantages of not using Http Client is that my requests won't be intercepted by my current Http Interceptors.

Thanks in advance,

[Ilakkiya Baskar]

Hi Emersion, 

Thank you for contacting Syncfusion Support. 

We analyzed your query. As per your requirement, you can load the data from the observable using the service. Please refer the code snippet below, 

@Component({ 

    selector: 'app-container', 

    template:` 

    <ejs-dropdownlist id='ddlelement' #samples [dataSource]='data | async'  [fields]='fields' [placeholder]='text' ></ejs-dropdownlist> 

   ` 

 

}) 

export class AppComponent { 

    public data: Observable<any>; 

    public pageOptions: Object; 

    public data1: any; 

    public ddlstate: any; 

    public true: boolean =true; 

    public fields: Object = { text: 'ShipName', value: 'CustomerID' }; 

    

    //set the placeholder to DropDownList input 

    public text: string = "Select a customer"; 

    constructor( private service: OrdersService) { 

        this.data = service; //set the service 

    } 

 

    public ngOnInit(): void { 

        this.pageOptions = { pageSize: 10, pageCount: 4 }; 

        let state = { skip: 0, take: 12 }; 

        this.service.execute(state); 

    } 

} 

 

 

If you find any issue,  

1. Kindly share the scenario where you want to change the query in filtering or change or any other interaction.
2. Kindly share the code snippet
3. Kindly share the screenshot of the error.

 

Please refer the sample in the below location 

http://www.syncfusion.com/downloads/support/forum/137154/ze/ej2-ng-grids-asynpipe-master-103950786 

 

Regards, 

Ilakkiya B 

[Dimitris]

Hello,

I have the same question. Your answer is about the grid. What about the dropdownlist?

Can the dropdownlist be populated with remote data and filtered server-side using the same approach as the grid?

[UdhayaKumar Duraisamy]

The previously shared sample was created using the Dropdownlist component ( Response Link ). So, you can refer to the sample for more information.

[Dimitris]

Hello,

The problem is when filtering data. If the filtering text is empty, all data should appear in the dropdown list but that does not happen unless e.preventDefaultAction is set to true in onFiltering:

onFiltering (e: FilteringEventArgs) {
  this.state = { skip: 0, take: AppConfig.gridDefaults.pageSize, sorted: [{ name: 'title' }] };
  if (e.text !== '') {
    this.state.where = [{
      predicates: [{
        field: 'title',
        operator: 'contains',
        value: e.text
      }]
    }];
  }
  this.service.get(this.state);


  e.preventDefaultAction = true;
}

The above code seems to work but I am not sure why this is necessary. Also, if I am not mistaken, e.updateData cannot/should not be called when binding with async pipe?

[Priyanka Karthikeyan]

Hi Dimitris,

As the name suggests, preventDefaultAction will prevent the default filtering action from occurring on the list passed in the updateData method. If you are using an async pipe to set the filtered list, you can also call the updateData method during the filtering event. Please find the below code for your reference.

public async onFiltering(e: any) {

    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('CustomerID', 'endswith', e.text, true)

          : query;

      let a: any = document.getElementById('customers2');

      a.ej2_instances[0].dataSource;

      await e.updateData(a.ej2_instances[0].dataSource, query);

    }

  }

Sample: https://stackblitz.com/edit/angular-wwjr8b-hue649?file=app.component.html,data.service.ts,app.component.ts,app%2Fapp.module.ts

Please get back to us if you need any further assistance.

Regards,

Priyanka K