Kendo UI Angular 2 Grid initial default filter - kendo-ui-angular2

Question

I need to add a default filter into the DataSourceRequestState so that the database request automatically contains some initial filter value. I'm trying to filter by this.applicationName. Does anyone know how I can add a pre-filter to the grid?
export class ServerCertificationGrid implements OnInit {
public data: GridDataResult;
private filter: CompositeFilterDescriptor;
public state: DataSourceRequestState = {
skip: 0,
take: 20,
filter: filterBy(this.data, { // This also does not work.
logic: 'and',
filters: [
{ field: "name", operator: "contains", value: this.applicationName, ignoreCase: true }
]
})
};
#Input() public applicationName: string;
constructor(private dataService: DataService, private dialogService: DialogService) {
console.log(this.applicationName);
// This does not work because this.state.filter is null.
//let fd: FilterDescriptor = {
// field: "name",
// operator: "contains",
// value: this.applicationName,
// ignoreCase: true
//}
//this.state.filter.filters.push(fd);
this.dataService.getCertificationOverview(this.state)
.subscribe(r => {
console.log(r);
this.data = r;
});
}
Here is the DataService code this component is calling.
public getApplicationServers(state: DataSourceRequestState): Observable<DataResult> {
const queryStr = `${toDataSourceRequestString(state)}`; // Serialize the state
const hasGroups = state.group && state.group.length;
return this.http
.get(`${'api/BircCertificationForm'}?${queryStr}`) // Send the state to the server
.map(response => response.json())
.map(({ Data, Total, AggregateResults }) => // Process the response
(<GridDataResult>{
// If there are groups, convert them to a compatible format
data: hasGroups ? translateDataSourceResultGroups(Data) : Data,
total: Total,
// Convert the aggregates if such exist
//aggregateResult: translateAggregateResults(aggregateResults)
})
)
}

Answer 1

You can bind the filter input of the Grid component and provide an initial filter descriptor, like in the following demo:
Initial filter
<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"
>
...
export class AppComponent {
public state: State = {
skip: 0,
take: 5,
// Initial filter descriptor
filter: {
logic: "and",
filters: [{ field: "ProductName", operator: "contains", value: "Chef" }]
}
};
The filter needs to have the "logic" and "filters" fields only, not to be the result of a filterBy() function call.