Grid Filter DataStateChange event responsive

[Nathan]

I am not sure what it is called so I will instead attempt to describe the behavior I am seeking in order to ask my question. 

It seems that the default filter implementation fires the dataStateChange event every time you type in the filter field. So example, if I have a city column in a grid with a default string filter and I begin to type the letter "A" for the city of Atlanta the dataStateChange event is immediately fired and then fires for each keystroke afterwards. This is an issue since we are attempting to figure out how to perform our filtering server side by passing the filters in a query string to a web api operation. I want to be able to allow the user to input say the entire text for the city of Atlanta before firing a dataStateChange event. If this is not an option I would like to be able to some how hold the response until the user clicks a filter button.  

I remember in the previous version of KendoUI for jQuery that we had filters that were inline of the column and had a filter button and a clear button. So you could type the full city for instance and then click filter. Are these still available and if so can you point me to any example code. 

I have attached an image to show what I am talking about.

[Hetali]

Hi Nathan,

Thank you for the description and the image.

We have a dedicated Filter Menu in the Kendo UI Grid to achieve the desired filter option.

Furthermore, you can edit the Filter Menu using the FilterMenuTemplateDirective and based on the column type use either of the following ready-to-use components:

• BooleanFilterMenuComponent
• DateFilterMenuComponent
• NumericFilterMenuComponent
• StringFilterMenuComponent

As seen in the image, to remove the second criteria you can set the extra property to false. For example:

<kendo-grid filterable="menu">
  <kendo-grid-column field="ProductName" title="Name">
    <ng-template kendoGridFilterMenuTemplate let-filter let-filterService="filterService" let-column="column">
      <kendo-grid-string-filter-menu
        [column]="column"
        [filter]="filter"
        [filterService]="filterService"
        [extra]="false">
      </kendo-grid-string-filter-menu>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

In this StackBlitz example, I have used a String Filter Menu and a Numeric Filter Menu in the Kendo UI Grid which works as per your requirement.

Please let me know if this helps or if you have any further questions pertaining to the Filter Menu in the Kendo UI Grid.

Regards,
Hetali
Progress Telerik