Kendo UI Angular 2 Grid initial default filter

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.