Grid filter row weird behaviour

[Frederike]

I'm trying to add the new filter row to my grids. I'm using the MVC wrappers and ajax data sources.
The filter row displays fine. However, when I enter a value in one of the filters, all the other filters in the row also get this value (see screen snippet), and no filtering actually happens (no data source request).

In the page source I can see that all filter inputs have a MVVM value data binding to the same property. This may explain why they all get the same value when one of them changes, although this does not seem to be a problem in the online demo's.
My application is a single page application and I use MVVM on most pages. The grids are not in the scope of an MVVM binding though.

Does somebody have an idea in which direction I should be looking for a solution?

[Alexander Popov]

Hi Edi,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide a runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior and advise you further.

Regards,
Alexander Popov
Telerik

 

 

[Frederike]

Hi Alexander,

I have attached a simple project that reproduces the problem.

[Alexander Popov]

Hello again Edi,

Thank you for the provided project. I reviewed it and noticed that the Grid is initialized using the wrappers, however it is displayed using a Kendo UI View. In the current scenario, the Grid is first rendered, then the MVVM binds it, then the View's MVVM overrides the Grid bindings, thus causing the unexpected behavior of the row filters. If you prefer using the MVVM approach I would suggest sticking to it entirely, as mixing different approaches might have unpredictable results as this one. The workaround for this exact scenario is to use deferred execution, so the Grid's MVVM bindings are executed after the View has finished loading. For example:  

<div class="ng-view">
    @(Html.Kendo().Grid<EmployeeListItemViewModel>()
            .Name("grid")
            .Deferred()
            ....
        )
</div>

<script>
    //use a timeout to let the View's MVVM finish before initializing the Grid
    setTimeout(function(){
         @(Html.Kendo().DeferredScripts(false)) //render the Grid's initialization options here
    })

</script>

Regards,
Alexander Popov
Telerik