Server Side Filtering With Row Filter Mode Filters Too Soon!

3 posts, 1 answers
  1. Ray
    Ray avatar
    3 posts
    Member since:
    May 2013

    Posted 08 Sep 2014 Link to this post

    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)
            .DataSource(dataSource => dataSource
                .Model(model => model.Id(o => o.TransactionID))
            .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))
            .Filterable(filtering => filtering.Mode(GridFilterMode.Row))
            .Sortable(sorting => sorting.Enabled(true))
            .Selectable(selecting => selecting.Enabled(true))
            .Scrollable(s => s.Height(600))
  2. Answer
    Alexander Popov
    Alexander Popov avatar
    1444 posts

    Posted 10 Sep 2014 Link to this post

    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>
        .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))
        function custom(input) {

    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)));

    Alexander Popov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Ray
    Ray avatar
    3 posts
    Member since:
    May 2013

    Posted 10 Sep 2014 in reply to Alexander Popov Link to this post

    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!
Back to Top