This is a migrated thread and some comments may be shown as answers.

Server Side Filtering With Row Filter Mode Filters Too Soon!

2 Answers 181 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ray
Top achievements
Rank 1
Ray asked on 08 Sep 2014, 07:08 PM
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))
    )

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Popov
Telerik team
answered on 10 Sep 2014, 12:25 PM
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
 

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.

 
0
Ray
Top achievements
Rank 1
answered on 10 Sep 2014, 03:52 PM
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!
Tags
Grid
Asked by
Ray
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Ray
Top achievements
Rank 1
Share this question
or