How to using custom filter pipe for grid datasource ?

[lorryl]

Hi,

When I delete the grid row, I need to set "Deleted" flag to the row, not real remove the row from the grid datasource.

I used the "hideDeletedDataRow" pipe, but it will infinite loop execution.

What should I do ?

html:

When deleting row, I need to set the "Deleted" flag:

It will infinite loop execution:

[lorryl]

Anybody?

[Balaji Sekar]

Hi lorryl, 

 

Sorry for inconvenience caused, 

 

We have created a sample with provided the code example. We are tried to perform the delete action using toolbar button and it is include the RowState value to Grid’s row selected record then refresh the Grid component but we are unable to reproduce the infinite loop execution of “hideDeleteDataRow” pipe. 

 

Please refer the below sample for more information. 

 

Sample link: https://stackblitz.com/edit/pure-pipe-example-fw7xp5  

 

If still facing same problem, please replicate the reported problem in above sample that will help to validate further. 

 

Regards, 

Balaji Sekar 

[lorryl]

Hi,

I upload the demo code. After used the pure "hideDeletedDataRow" pipe, it will infinite loop execution.

Please check.

Attachment: demo_c27509c4.rar

[Balaji Sekar]

Hi lorryl, 

 

Thanks for your update. 

 

We have validated your query with provided sample and we found that you have set the pure option is false. When set pure to false, the pipe is invoked on each change-detection cycle. It is cause of the problem. 

Please refer the below link to know more details about pure option of Angular Pipe concept. 

 

https://angular.io/api/core/Pipe#pure  

 

Since it is not related to EJ2 Grid component issue and we suggest you to set pure as true then you can overcome the reported problem. 

 

Regards, 

Balaji Sekar 

[lorryl]

But if I set the pure as true, the grid data would not hide If I delete one row.

You can see no effect when click the delete button in  your sample link.

Sample link: https://stackblitz.com/edit/pure-pipe-example-fw7xp5  

[lorryl]

Hi,

How can I achieve the effect I want?

This is a general problem. Deleting is just adding a deletion mark, and it will not be deleted immediately, but the interface needs to be hidden.

I need your help.

[Balaji Sekar]

Hi lorryl, 

Thanks for your valuable patience. 

We have modified the provided sample with pure pipe without Grid component and we are able to reproduce the reported problem while enable pure option as false in the Angular Pipe and this problem is not related to the Syncfusion component. 

If you overcome this problem with enabled pure as false state in Angular Pipe, you can find the general solution for this issue or set the pure value is true 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/159907/ze/Sample-Pure-pipe-1869371703.zip  

Video link: https://www.syncfusion.com/downloads/support/directtrac/159907/ze/Pure-Pipe1982175299.zip  

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

Regards, 

Balaji Sekar. 

[lorryl]

Hi,

I cannot download the files from the link.

If I need to set the pure option is true, why not work when deleting row in this sample link.

Sample link: https://stackblitz.com/edit/pure-pipe-example-fw7xp5  

What code should I modifiy in the provided sample.

[Balaji Sekar]

Hi lorryl, 

Query #1: I cannot download the files from the link. 

Before download the provided sample link, we suggest you to use You should use the Syncfusion credentials which is associated with the incident/ticket that has the file you are trying to download. 

If still facing problem, please share video demonstration of the reproducing problem to us that will help to validate further. 

Query #2: why not work when deleting row in this sample link 

 

Based on your query we have achieved delete action in selected row when click on custom toolbar item. Please refer the below code example and sample for more information. 

[app.component.ts] 

  toolbarClick(args) { 

    switch (args.item.id) { 

      case "bardelete": 

        let selectRows = this.grid.getSelectedRecords(); 

        if (selectRows.length == 0) { 

          return; 

        } 

        let row: any = selectRows[0]; 

        row.RowState = "Deleted"; 

        this.grid.deleteRecord("OrderID", selectRows[0]); 

        break; 

    } 

  } 

Sample link: https://stackblitz.com/edit/pure-pipe-example-1h1p5a  

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

Regards, 

Balaji Sekar  

[lorryl]

Hi, 

You don't understand what I mean.

When I click the delete button, I will set the deleted flag to this selected row. 

I hope the "hideDeletedDataRow" pipe will work, not actually call grid.deleteRecord() method.  

But when I set [dataSource]='dataSource | hideDeletedDataRow' in grid, it does not work.

I'm not sure if your grid.dataSource supports hideDeletedDataRow pipe or if I need to implement it in another way.

[Balaji Sekar]

Hi lorryl,  

  

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.     

https://www.syncfusion.com/account/login  

  

Regards,  

Balaji Sekar