DataTable header template columns (custom control, dropdown) are not getting reset

Question

I'm having templates in the header of primeNg DataTable.

1. Custom DateRange Filter (child) component
2. Dropdown to list activities
3. Regular column
4. Regular template column

I've a Global Filter Reset button, on which all filters has to be reset. dataTable.reset() method is resetting regular column (#3) and regular template custom (#4), but NOT other header controls (#1, #2).

I tried to invoke childComponent.Reset() using @ViewChild option, but I'm getting the childComponent as "undefined" on runtime. I could see @ViewChild option is working for regular child controls outside the dataTable.

How can I reset all controls in the primeNg DataTable in the right way?

 <p-column field="updatedOn" header="Updated On" sortable="custom" (sortFunction)="dateSort($event)" [style]="{'width':'180px'}" filter="true" filterMatchMode="contains">
 <template pTemplate="filter" let-col>
 <date-range-filter #dateRangeFilter (dateRangeUpdated)="onRangeUpdated($event)"></date-range-filter>
 </template>
 <template let-col let-val="rowData" pTemplate="body">
 <div class="bodyText">
 {{val[col.field] | date: 'MM/dd/yyyy hh:mm a'}}
 </div>
 </template>
 </p-column>
 <p-column field="activity" header="Activity" sortable="true" filter="true" filterMatchMode="equals" [style]="{'width':'100px', 'overflow':'visible'}">
 <template pTemplate="filter" let-col>
 <p-dropdown #activityType appendTo="body" [options]="_activityList" [style]="{'width':'100%'}" (onChange)="memoTable.filter($event.value,col.field,col.filterMatchMode)"
 styleClass="ui-column-filter"></p-dropdown>
 </template>
 <template let-col let-val="rowData" pTemplate="body">
 <span class="ActivityBox" [ngClass]="getActivityColor(val[col.field])">{{getActivityType(val[col.field])}}</span>
 </template>
 </p-column>
 <p-column field="User" header="User" sortable="true" filter="true" filterMatchMode="contains" [style]="{'width':'95px'}"></p-column>
 <p-column field="comment" header="comment" sortable="true" filter="true" filterMatchMode="contains">
 <template let-col let-val="rowData" pTemplate="body">
 <div>
 <div class="NotesColumn" [ngClass]="val[col.field].length > 15? 'underlined' : ''" (mouseenter)="op.show($event)" (mouseleave)="op.hide($event)">
 {{val[col.field]}}
 </div>
 <p-overlayPanel #op [styleClass]="overlayDiv" [appendTo]="overlayTarget">
 <div class="overlayDiv">
 {{val[col.field]}}
 </div>
 </p-overlayPanel>
 </div>
 </template>
 </p-column>

• Shyam Sailendran: Resetting p-dropdown can be accomplished by - 1: include [(ngModel)]="_selectedActivityType" to capture the selected value. 2: Reset _selectedActivityType to default value from the activityList - 'this._selectedActivityType = this._activityList[0]'. The issue still persists on custom control. I believe the component is not getting rendered during the globalFilterClear event which results in error Cannot read property 'clearDates' of undefined. clearDates() is custom component public method.

Answer 1

I 've found a fix for this issue on clearing controls on the custom component.

1. Use ElemenRef to get hold of the elements on the page. 
 constructor(private _element: ElementRef) {}
 // Clear all filters from DataTable
 clearAllFilters(dataTable: DataTable) {
 dataTable.reset()
 dataTable.globalFilter.value = ''
 DateRangeComponent.clearDateFilter(this._element)
 }
2. Use querySelector to get the control. 
 public static clearDateFilter(pageElement: ElementRef) {
 let dri = pageElement.nativeElement.querySelector('#dateRangeInput')
 dri.value = ""
 dri.tooltipText = ""
 // Dispatch a 'change' event to trigger onSearchKeyUp method to clear filter based on date range.
 var event = new Event('change')
 dri.dispatchEvent(event)
 // Another way of doing this is dri.focus() followed by dri.blur() to fire change event.
 }
 // Html dateRangeInput Control
 <input #dateRangeInput class="theInput" id="dateRangeInput" type="text" placeholder="Search" pTooltip="{{_dateRangeInputText}}"
 tooltipPosition="top" (keyup)="onSearchKeyUp($event)" (change)="onSearchKeyUp($event)" (keydown)="onSearchKeyDown($event)">
 // The below code is just test logic to ensure the control is reset 
 // and an event is emitted back to the parent component.
 private onSearchKeyUp(event: any) {
 let input = event.target.value
 if (input.length === 0) {
 this.reset()
 this.dateRangeUpdated.emit(this)
 }
 }