How can I filter data from inside the grid but from outside it?

[Dana Sarghe]

My requirements are to filter data inside the grid from outside it.

Thank you in advance!

<div class="filter-container" >

                 <div class="row">

                     <div class="col">

                        <input class="e-input" type="text" placeholder="Numar"/>

                     </div>

                     <div class="col">

                        <input class="e-input" type="text" placeholder="Adresa"/>

                     </div>

                     <div class="col content-wrapper">

                            <ejs-dropdownlist

                            #ddlelement

                            id='dropdown'

                            [dataSource]='dropdata'

                            [fields]='fields'

                            [popupHeight]='height'

                            [showClearButton]="true"

                            [placeholder]="placeholder">

                        </ejs-dropdownlist>

                     </div>

                     <div class="col">

                        <button ejs-button  class="btn btn-primary">X</button>

                     </div>

                 </div>

             </div>

  <ejs-grid  #grid id="grid" [dataSource]='data' offline='true' [allowPaging]='true' [allowSorting]='true'

             [pageSettings]="pageSettings"  [selectionSettings]="selectOptions" [allowSelection]="true">

                <e-columns>

                    <e-column type='checkbox' [allowFiltering]='false' [allowSorting]='false' width='30' checked="false"></e-column>

   

                    <e-column field='Type' headerText='Tip'  width='60' isPrimaryKey="true" ></e-column>

                 

                    <e-column field='Number' headerText='Numar'  width='60'></e-column>

                 

                    <e-column field='Description' headerText='Descriere' [allowFiltering]='false' [allowSorting]='false' width='60'></e-column>

                 

                    <e-column field='Address' headerText='Adresa'  width='60'></e-column>

                 

                  </e-columns>

            </ejs-grid>

[Rajapandiyan Settu]

Hi Dana, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using filterByColumn method of Grid. It is used to apply filtering in the EJ2 Grid by programmatic way. 

 

filterByColumn: https://ej2.syncfusion.com/angular/documentation/api/grid/#filterbycolumn 

 

 

  btnClick(args) { 

     // apply filter 

    this.grid.filterByColumn('ShipCountry', 'contains', 'fr'); // filterByColumn(field, operator, value) 

  } 

 

 

Sample: https://stackblitz.com/edit/angular-bsapta?file=app.component.ts 

 

Note: To enable filtering in the Grid, set the allowFiltering to true. To use filter, inject FilterService in the provider section of AppModule. 

 

 

<ejs-grid 

  #grid 

  [dataSource]="data" 

  allowFiltering="true" 

> 

</ejs-grid> 

 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Dana Sarghe]

Thank you!

This is what I'm looking for.

[Rajapandiyan Settu]

Hi Dana, 

 

We are glad that you have resolved your requirement with the provided solution. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S 

[AYEDI Yessmine]

I want to perform dropdown list filter outside the grid but it doesn't work

[Rajapandi Ravi]

AYEDI,

Based on your query, you want to apply external filtering in the Grid using the selected value from a DropDownList. To achieve this, the change event of the DropDownList will trigger when a value is selected, allowing you to access the selected value through the event arguments. You can then use these arguments to programmatically invoke the filterByColumn method to apply filtering in the Grid.

While passing the field name inside the filterByColumn method, ensure that the specified field name exists in the Grid's dataSource and that the filtering is applied to the intended column.

For your convenience, we have provided a StackBlitz sample demonstrating how to apply filtering to the Grid using an external DropDownList. Please see the code example and sample below for more details.

App.component.ts

 

public onChange(args: any): void { //change event of dropdownlist

      //here we have defined the field name as ‘Statut’, based on the dropdown selection value the Statut column gets filtered.

    this.grid.filterByColumn('Statut', 'equal', args.value); 

  }

 

Sample: https://stackblitz.com/edit/angular-bsapta-g78jynfi?file=app.component.ts,app.component.html

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#filterbycolumn

Please get back to us if you need further assistance.

Regards,

Rajapandi R