title: Kendo UI Angular 2 Grid initial default filter
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
                  console.log(r);
                  this.data = r;
              });
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the DataService code this component is calling.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>public getApplicationServers(state: DataSourceRequestState): Observable&lt;DataResult&gt; {
          const queryStr = `${toDataSourceRequestString(state)}`; // Serialize the state
          const hasGroups = state.group &amp;&amp; state.group.length;
  
          return this.http
              .get(`${'api/BircCertificationForm'}?${queryStr}`) // Send the state to the server
              .map(response =&gt; response.json())
              .map(({ Data, Total, AggregateResults }) =&gt; // Process the response
                  (&lt;GridDataResult&gt;{
                      // 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)
  
                  })
              )
      }</code></pre>
  </div>
  </div>
  </p>