'How to get Kendo Grid to stop refreshing on each filter key press

Every time I type a character in the filter box at the top of any of my columns, my Ajax Read method ("_CustomBinding") is called 2 times. The first call populates the type ahead of the filter box, and the second one refreshes the grid. I do not want the grid to refresh until the enter key is pressed in the filter box, not on each key press. How do I disable the call to refresh the grid on every key press in the filter box?

I have a very complicated Kendo Grid. Here is just part of it:

@(Html.Kendo().Grid<ProspectiveAdvantage.ViewModels.MemberListingModel>().Name("Members").TableHtmlAttributes(new { @class = "tblPatient" })
    .AutoBind(Model.AutoPopulateResults)
    .Columns(columns =>
    {
        columns.Bound(theMember => theMember.LastName).Width(30).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false).MinLength(3).SuggestionOperator(FilterType.Contains)));
        columns.Bound(theMember => theMember.FirstName).Width(30).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false).MinLength(3).SuggestionOperator(FilterType.Contains)));
        columns.Bound(theMember => theMember.DisplayClientMemberId).HeaderTemplate("Patient ID").Width(30).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false).MinLength(3).SuggestionOperator(FilterType.Contains)));
        columns.Bound(theMember => theMember.DisplayBirthDate).HeaderTemplate("DOB").Format("{0:MM/dd/yyyy}").Width(30).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false).MinLength(3).SuggestionOperator(FilterType.Contains)));
…
                .DataSource(dataBinding => dataBinding.Ajax()
                .Read(read => read.Action("_CustomBinding", "PCPandCA").Data("members_FetchSearchParameters"))
                .Events(events => events.Error("handleAjaxErrorFromGrid"))
                 .ServerOperation(true)
                 .PageSize(Model.PageSize).Model(model => { model.Id(e => e.MemberID); model.Field(f => f.FirstName); })
                 //default sort DisplaySignatureDue column by ascending
                 .Sort(sort => {
                     if (!AssessmentExpired) { sort.Add("DisplaySignatureDue").Ascending();}
                     if (AssessmentExpired) { sort.Add("DisplayExpiredDate").Ascending();}
                 })
    )
 
    .Pageable(pageable => pageable
        .PageSizes(true)
        .Refresh(true)
    )
    .Sortable()
    .NoRecords("No records found.")
    .Selectable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Events(events => events.Change("handleGridRowSelected").DataBinding("handleDataBinding").DataBound("handleDataBound").Filter("onFiltering"))
    .HtmlAttributes(new { style = "cursor:pointer;border: 0px;height: 380px;display: flex;overflow-y: scroll;" })
)


Solution 1:[1]

I finally figured out why I was noticing this unexpected behavior. I was running my website from Visual Studio and I had a VS breakpoint in my _CustomBinding method. This would cause my cursor focus to move from the filter field in the UI to the breakpoint in VS. Whenever the filter field loses focus, it triggers the grid to refresh. So, I was only seeing the second call to _CustomBinding because of the breakpoint, not because of any configuration of the grid control.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eric