Delete the filtered data in Igx grid

Hi Team,

I am using Igx Data grid in my project.

Scenario: Using Excel style filter, to filter the grid and get the filtered data.

Requirement: On click of Delete button, only should Delete the filtered data and not the grid data.

Expected Result: Only Delete the filtered data,

Hello,

I have been looking into your question and in order to achieve these requirements, you have to first set a primary key with the primaryKey property on the grid so that you can delete rows from it.

After that, when you click the button, you will execute a function with which you could access the filtered rows through the filteredData accessor grid and then delete each row with the deleteRow() method of the grid, as in the method you will submit the given primary key of the row.

public deleteFilteredRows(){
        for(let i = 0; i < this.grid.filteredData.length; i++){
            this.grid.deleteRow(this.grid.filteredData[i].ProductID);
        }
        this.grid.clearFilter();
}

The described scenario could be observed here:

 

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Thank U Georgi for quick reply but i am using Version 9 and i think the filtering event is not triggering. Could u pls help me if it works differently for version 9.

 <igx-grid

    #grid

    [data]="data"

    [primaryKey]="'ProductID'"

    [autoGenerate]="false"

    height="600px"

    width="100%"

    [allowFiltering]="true"

    [filterMode]="'excelStyleFilter'"

    (filtering)="filtering($event)"

  >

Hello,

Thank you for following up.

After further investigation what you could use in @igniteui-angular version ^9 is the onFilteringDone event. As an event, it is fired after the filtering is done, as is the case with the filtering event in the latest version.

Please keep in mind that according to our policy @igniteui-angular version 9 is considered retired and it is no longer eligible for Developer Support Services, to achieve your requirement and take advantage of all introduced features and enhancements, I would suggest upgrading to the supported versions of @igniteui-angular or latest version i.e. 15.0.

Thank you for your cooperation.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Hello Georgi,

Thank you for quick response.

To be precise, we are using Ignite 9.1.16 version and when tried onFilteringDone event, it is still not triggering.

<igx-grid #grid1 [filterMode]="'excelStyleFilter'" width="100%" height="600px" [paging]="false"

                [allowFiltering]="true" (onFilteringDone)="filteringDone($event)">

please let me know if i am missing here something.

 

Hello,

I have trying to reproduce the described behavior. I am using igx-grid component with allowFiltering property set to true and Excel Style Filter, columns filterable property also set to true. On my side when I handle onFilteringDone event it gets triggered and I get the event on the console, everything works as expected and I am able to handle the event.

In order to ensure that your issue is addressed correctly, I will need some additional information regarding your scenario. Can you please answer the following questions:

• What exactly are you trying to do with the given event.
• Could you print the console event and see that it is firing.
• Could you provide additional information, code snippets or an isolated sample.

This information is going to be highly appreciated and will help me in my further investigation. 

However if you use the button disable and enable event as in the sample I provided what you need to do is change the event accessor as in the if check instead of:

event.filteringExpressions.filteringOperands.length > 0

You will usе: 

event.filteringOperands.length > 0

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Hello Georgi,

I am using Infragistics 9.1.16 version.

I am trying to trigger the filtering event in Igx-data grid. I tried with both ways to trigger event i.e. onfilteringdone event and filtering event mentioned as above.

But i am not getting anything on console.

I am trying to enable/disable the delete button based on filtered data.

Hello,

Thank you for following up and for the provided information.

What I could suggest achieving your requirements is to handle another igx-grid component event which is filteringExpressionsTreeChange.

The event is fired after filtering a given grid column and immediately after that you can enable or if the filters are cleared you can disable the given button.

public filteringExprTreeChange(event){
        if(event.filteringOperands.length > 0){
            this.disabled = false;
        }else {
            this.disabled = true;
        }
    }

The described scenario could be observed here:

 

I have prepared small sample illustrating my suggestion which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

This works. Thank you for all the help!! Appreciate it.

Hello,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics