Server Side Filtering With Row Filter Mode Filters Too Soon!

[Ray]

I picked the Row filtering mode because my users want to be able to see the filters all the time, but there's a bit of a problem.

The second the user starts typing something into a filter, the page starts to refresh itself. If a user were typing "SalesOrder," by the time the page loads, only the 's' would show in the filter. I do not want this behavior. I want the user to be able to finish typing, then either tab out of the filter they were typing in or click somewhere else or click one of the filter options like "Contains" or "Starts With" AND THEN the page can load.

Is there something I'm missing in the code to do that? I can get a lot of records by filtering, and I can't afford for the page to load every time a user types in one character.

Please help! :(

​    @(Html.Kendo().Grid(Model)
        .Name("TransactionGrid")
        .DataSource(dataSource => dataSource
            .Server()
            .Model(model => model.Id(o => o.TransactionID))
            .PageSize(1000)
        )
        .Columns(columns =>
        {
            columns.Bound(r => r.TransactionID).Title("ID").Hidden();
            columns.Bound(r => r.MessageType);
            columns.Bound(r => r.SourceSystem.Name);
        })
        .HtmlAttributes(new { style = "width:100%;" })
        .Resizable(resizing => resizing.Columns(true))
        .Pageable()
        .Groupable()
        .Filterable(filtering => filtering.Mode(GridFilterMode.Row))
        .Sortable(sorting => sorting.Enabled(true))
        .Selectable(selecting => selecting.Enabled(true))
        .Scrollable(s => s.Height(600))
    )

[Alexander Popov]

Hi Ray,

This happens because the AutoComplete in the filter row is using the same DataSource as the Grid in order to populate the possible options. Since the Grid is using server binding, so does the AutoComplete too, causing the entire page to be reloaded. This could be handled by using a custom function to initialize an AutoComplete widget using a remote DataSource, for example: 

@model IEnumerable<Kendo.Mvc.Examples.Models.Product>
@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ProductName).Filterable(x=>x.Cell(c=>c.Template("custom")));
        columns.Bound(p => p.UnitPrice);
    })
    .Filterable(filtering => filtering.Mode(GridFilterMode.Row))
)

<script>
    function custom(input) {
        $(input).kendoAutoComplete({
         //....
        });
    }
</script>

Alternatively, you could increase the delay after which the filter is applied. For example: 

columns.Bound(p => p.ProductName).Filterable(x => x.Cell(a => a.Delay(2000)));

Regards,
Alexander Popov
Telerik

 

 

[Ray]

Thanks for the response! This fixed the issue I've been having!

I went with the delay alternative. This allows my users to either tab or select an option before the page tries to refresh.

I've set the delay to 60000 (which I assume is in milliseconds), but I would prefer an argument, such as 0, that sets the it to infinite.

I would like an option in the Grid helper to turn off the autocomplete entirely. Please take this into consideration in the next release!

Thanks again!