1. Home
  2. Forum
  3. Angular - EJ 2
  4. Async Pipe is not Working

Async Pipe is not Working

Hi Team,

I was trying to work with the Async Pipe stuff in the SyncFusion Grid.

I tried the sample available in the documentation/online provided by SyncFusion and unfortunately, it didn't work for me.

My requirement for this task will be loading the Grid with the displaying content only and not the entire data from the WebAPI or WebServices.

By doing this, the pagination changes with the concerned data[In my case, I sent only 10 records at a time and the pagination for TotalPages, turned to 1 whereas I have 33 pages with 330 records]

I set the count as 330 and the list of data with 10 records, which failed in my case.

Any support will be appreciated and would save my day.

Thanks,

Raj


9 Replies
DR Dhivya Rajendran Syncfusion Team March 12, 2018 11:21 AM UTC

Hi Anandraj, 
Thanks for contacting Syncfusion support, 

We have validated your query  and create a sample as per your requirement , In this sample Grid load only the displaying content(10 records) not load entire data from the Webservices. Grid will be refreshed with new data every time the Observable is resolved. Instead of assigning new Observable we need to resolve the same object with new data. kindly please refer the below code snippet and  sample for more information, 

app.component.ts 

@Component({ 
    selector: 'app-container', 
    template:`<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowSorting= 'true' allowGrouping= 'true' (dataStateChange)= 'dataStateChange($event)'> 
    . . . . . 
    </ejs-grid>`     
}) 
export class AppComponent { 
     
    constructor( private service: OrdersService) { 
        this.data = service; 
    } 

    public dataStateChange(state: DataStateChangeEventArgs): void { 
        this.service.execute(state); 
    } 

    public ngOnInit(): void { 
        this.pageOptions = { pageSize: 10, pageCount: 4 }; 
        let state = { skip: 0, take: 12 }; 
        this.service.execute(state); 
    } 
} 


Order.service.ts 
. . . . . 
export class OrdersService extends Subject<DataStateChangeEventArgs> { 
    private BASE_URL = 'http://services.odata.org/V4/Northwind/Northwind.svc/Orders'; 
 
   . . . . .  
    public execute(state: any): void { 
        this.getData(state).subscribe(x => super.next(x)); 
    }    
 
    protected getData(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> { 
        const pageQuery = `$skip=${state.skip}&$top=${state.take}`; 
        . . . . .  
        return this.http 
            .get(`${this.BASE_URL}?${pageQuery}${sortQuery}&$count=true`) 
            .map((response: any) => response.json()) 
            .map((response: any) => (<DataResult>{ 
                result: response['value'], 
                count: parseInt(response['@odata.count'], 10) 
            })) 
            .map((data: any) => data); 
    } 
} 
 



Regards,
R.Dhivya 


AN Anandraj replied to Dhivya Rajendran March 14, 2018 04:44 PM UTC

Hi Anandraj, 
Thanks for contacting Syncfusion support, 

We have validated your query  and create a sample as per your requirement , In this sample Grid load only the displaying content(10 records) not load entire data from the Webservices. Grid will be refreshed with new data every time the Observable is resolved. Instead of assigning new Observable we need to resolve the same object with new data. kindly please refer the below code snippet and  sample for more information, 

app.component.ts 

@Component({ 
    selector: 'app-container', 
    template:`<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowSorting= 'true' allowGrouping= 'true' (dataStateChange)= 'dataStateChange($event)'> 
    . . . . . 
    </ejs-grid>`     
}) 
export class AppComponent { 
     
    constructor( private service: OrdersService) { 
        this.data = service; 
    } 

    public dataStateChange(state: DataStateChangeEventArgs): void { 
        this.service.execute(state); 
    } 

    public ngOnInit(): void { 
        this.pageOptions = { pageSize: 10, pageCount: 4 }; 
        let state = { skip: 0, take: 12 }; 
        this.service.execute(state); 
    } 
} 


Order.service.ts 
. . . . . 
export class OrdersService extends Subject<DataStateChangeEventArgs> { 
    private BASE_URL = 'http://services.odata.org/V4/Northwind/Northwind.svc/Orders'; 
 
   . . . . .  
    public execute(state: any): void { 
        this.getData(state).subscribe(x => super.next(x)); 
    }    
 
    protected getData(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> { 
        const pageQuery = `$skip=${state.skip}&$top=${state.take}`; 
        . . . . .  
        return this.http 
            .get(`${this.BASE_URL}?${pageQuery}${sortQuery}&$count=true`) 
            .map((response: any) => response.json()) 
            .map((response: any) => (<DataResult>{ 
                result: response['value'], 
                count: parseInt(response['@odata.count'], 10) 
            })) 
            .map((data: any) => data); 
    } 
} 
 



Regards,
R.Dhivya 


 Hi Dhivya Rajendran,

Thank you for helping me out with this issue. Appreciated...

Thanks,
Raj Srinivasan.

DR Dhivya Rajendran Syncfusion Team March 16, 2018 03:47 AM UTC

  
Hi Anandraj, 
 
Thanks for your update, 
 
we are glad to hear that the provided solution helped you. 
please contact us if you have any queries 
 
Regards, 
R.Dhivya 


AN Anandraj March 21, 2018 09:59 PM UTC

Hi Dhivya,

I am playing around with the Async Pipe example. For my scenario I have a grid with pagination, sorting, filtering and searching options. From the example I can able to get pagination and sorting details on dataStateChange event. Can you help to figure out to get the filtering (fieldName, matchCase, operator, predicate, value) and searching (fieldName, ignoreCase, operator, key) properties?

Thank you in advance.


Regards,
Raj

DR Dhivya Rajendran Syncfusion Team March 22, 2018 05:19 PM UTC

Hi Anandraj, 
Thanks for your update, 
We have analyzed your requirement and create a sample for your reference, In this Async pipe sample we have achieved a filtering feature of Grid and generated a filter query for both column type as number and string. You can achieve searching by using the state.search property and generate a query as per your requirement. Kindly please refer the below code snippet and sample for more information and run the sample by using the below commands, 
 
  • npm install
  • npm start
import { DataStateChangeEventArgs, Sorts,PredicateModel, DataResult, Search } from '@syncfusion/ej2-ng-grids' 
import { Predicate } from '@syncfusion/ej2-data'; 

@Injectable() 
export class OrdersService extends Subject<DataStateChangeEventArgs> { 

   . . . . . .  
    protected getData(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> { 
        const pageQuery = `$skip=${state.skip}&$top=${state.take}`; 
        let sortQuery: string = ''; 
        let filterQuery: string = ''; 

        if(state.where){ 
           filterQuery = `&$filter=` + state.where.map((obj: PredicateModel) => { 
               return (<Predicate>obj).predicates.map((predicate)=> { 
                  return predicate.operator === 'equal' ? `${predicate.field} eq ${predicate.value}` : `${predicate.operator}(tolower(${predicate.field}),'${predicate.value}')`; 
               }).reverse().join(' and '); 
            }); 
        } 

        return this.http 
            .get(`${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`) 
            .map((response: any) => response.json()) 
            .map((response: any) => (<DataResult>{ 
                result: response['value'], 
                count: parseInt(response['@odata.count'], 10) 
            })) 
            .map((data: any) => data); 
    } 
} 

 

Regards,
R.Dhivya 


AN Anandraj March 27, 2018 12:18 AM UTC

Hi Dhivya,

From your example, I am facing two issues:
  1. How to get date column type field details in search object?
  2. Sometimes search object doesn't contain filter details. E.g: Apply filter condition for column 1 then using tab key in keyboard / mouse click move to another column and add filter condition. When I press the Enter key, search object contains filter details of the last field from which I pressed the Enter key but in UI it showing filter conditions for all the fields. How to get filter conditions of all the columns when I apply the filter?
Thank you in advance.


Regards,
Raj
  

DR Dhivya Rajendran Syncfusion Team March 27, 2018 05:34 PM UTC

Hi Anandraj, 
Thanks for your update, 
Query1: How to get date column type field details in search object? 
 
We have analyzed you query, we have created a sample for your reference, In this below sample we have generate filterQuery for date Column field. You can get the column type or column object by using getColumnByField method. Kindly please refer the below code snippet and documentation link for more information. 
export class OrdersService extends Subject<DataStateChangeEventArgs> { 
 
    public execute(state: any, grid: any): void { 
        this.getData(state, grid).subscribe(x => super.next(x)); 
    } 
 
protected getData(state: DataStateChangeEventArgs, grid): Observable<DataStateChangeEventArgs> { 
        if (state.where) { 
            filterQuery = `&$filter=` + state.where.map((obj: PredicateModel) => { 
                return (<Predicate>obj).predicates.map((predicate) => { 
                    if ((<any>predicate).predicates) { 
                        if (<any>grid.getColumnByField((<any>predicate).predicates[0].field).type === 'date') {                            \\ get the type of column  
                            return `((${(<any>predicate).predicates[0].field} gt ${(<any>predicate).predicates[0].value}) and (${(<any>predicate).predicates[1].field} lt ${(<any>predicate).predicates[1].value}))`; 
                         . . . . .  
                       } 
                }).reverse().join(' and '); 
            }); 
        } 
 
 
 
 
Query 2:  How to get filter conditions of all the columns when I apply the filter? 
 
We have validated about your requirement, When you press enter key after entering the filter value, by default, filterobject contains the current filter column object only.

Regards,
R.Dhivya 


LF LF November 5, 2018 03:52 PM UTC

Hi, I'm working on the same functionality as Anandraj but on Angular 6.
Could you tell me what would be the equivalent code in Angular 6 using HTTPClient?

Thank you

Attachment: customer.service.ts_50fdc772.7z

MS Madhu Sudhanan P Syncfusion Team November 7, 2018 07:01 AM UTC

 
There is no specific changes from Grid component for using async pipe in Angular 6. Please refer to the below documentation and demo for using async pipe and get back to us if you have faced any difficulties.  
 
 
 
Regards, 
Madhu Sudhanan P 


Loader.
Up arrow icon