Filter by external

[Jothikumar]

Hi, 

I would like to Filter the Grid using External textboxs/Dropdown/etc.... with external button. Please provide the suggestions.

[Pavithra Subramaniyam]

Hi Jothikumar, 

You can achieve your requirement by using filterByColumn  method of Grid component which will filter the grid by field name, filter operator and filter value. We have prepared a simple sample based on your query in which we have performed Grid Filtering with external TextBox,DropDownList and Button component. Please refer to the below code example , Documentation link and sample link. 

[component.html] 

  <input class="e-input e-filtering_box" type="text" placeholder="Enter Name" /> 

    <ejs-dropdownlist #ddl id='ddlelement' [dataSource]='ddldata' placeholder = 'Select Column to filter'></ejs-dropdownlist> 

   <button ej-button class='e-flat' (click)='click()'>Filter</button> 

   <button ej-button class='e-flat' (click)='clear()'>Clear</button> 

        <ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions"> 

        <e-columns> 

        .    .    . 

        </e-columns> 

    </ejs-grid> 

 

[component.ts] 

export class FilterComponent implements OnInit { 

    public data: Object[]; 

     .   .   . 

    @ViewChild('grid') 

    public grid: GridComponent; 

     

     @ViewChild('ddl') 

    public ddl: any; 

    .   .   . 

    click(): void {  // filters the grid 

          this.grid.filterByColumn(this.ddl.value, 'startswith',fValue);     

    }; 

    clear(): void {   // clears the filtering of Grid 

            this.grid.clearFiltering(); 

    }; 

   } 

 

Documentation: https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-filter.html  

                              https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/filtering.html#filter-operators 

 

Sample               : https://plnkr.co/edit/0FTlLPHSV0bbOCn5RGRY?p=preview    

Regards, 

Pavithra S. 

[Jothikumar]

Thanks Pavithra,

If possible to remove/hide first row in the Grid. because already we have external control.

[Pavithra Subramaniyam]

Hi Jothikumar, 

You can hide or remove the default filter bar row in the ‘created’ event of Grid component which will be triggered when Grid is created. Please refer to the below code example , documentation link and sample link. 

[component.ts] 

@Component({ 

    selector: 'control-content', 

    template:`  <ejs-grid #grid [dataSource]='data' (created)='created($event)' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions"> 

        <e-columns> 

        .     .     . 

        </e-columns> 

    </ejs-grid>` 

}) 

export class FilterComponent implements OnInit { 

     .    .    . 

    @ViewChild('grid') 

    public grid: GridComponent; 

     

    public ngOnInit(): void { 

    .     .    . 

    } 

    created(e:object){ 

    this.grid.getHeaderTable().querySelector('.e-filterbar').style.display = 'none' 

    } 

   } 

Documentation: https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-gridComponent.html#created  

Sample               : https://plnkr.co/edit/AGNxImdj1Leg54AyXpGw?p=preview 

Regards, 

Pavithra S.