Custom Filter Row scroll issue

[ianr]

Hi,

I have a problem with the custom filter row which I have implemented this as per the 2010 Q3 release.

The issue occurs when the width of the grid view causes a horizontal scroll bar to be used.  When scrolling this is ok as the GridView ScrollViewer ScrollChanged event is handled and the handler moves the filtering row's scroll viewer to the correct offset.  Therefore the filter cells are kept in sync with the columns of the grid.

However, if you start entering a value into one of the filter cells the filter row snaps back to its original position - which means it is out of line with the grid.  It can even mean the cell you are editing is not in view.

I don't know if this behaviour is the same in your demo, as the demo doesn't allow for scroll bars.

Could you verify if this happens in your version and suggest any solutions?

Thanks.
Ian.

[Yordanka]

Hello ianr,

We have tested the issue with our latest internal build (version .1507) and we could not reproduce it. Can you try the binaries from this build and let us know how it goes? Thank you.
 
Kind regards,
Yordanka
the Telerik team

[ianr]

Hi,

Could you provide the test application that you used for this test?

Did this test include a horizontal scroll-bar?

Thanks.

[ianr]

Hi,

I have an update to this issue:

- I have downloaded the latest version for WPF4, including the new binaries and the C# examples (Version: 2011.1 419 (Apr 19, 2011) )
- In the examples, I have modified the RadGridView properties for the CustomFilterRow demo page as follows:
    - Changed the width of the grid from 748 to 548
    - Changed the column widths to 190, 200, 100, 200, 130
    - Here is the xaml:

 

 

 

<telerik:RadGridView x:Name="RadGridView1" AutoGenerateColumns="False"

 

 

 

MinHeight="386" MaxHeight="500" Width="548"

 

 

 

CanUserFreezeColumns="False" RowIndicatorVisibility="Collapsed"

 

 

 

 

GridLinesVisibility="Horizontal" ItemsSource="{Binding RandomProducts}"

 

 

 

 

telerikGridViewFilter:CustomFilterRow.IsEnabled="True">

 

 

 

 

<telerik:RadGridView.Columns>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" Width="190"/>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Width="200"/>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding UnitPrice}" Header="Unit Price" Width="100"/>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding Date}" Width="200"/>

 

 

 

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding Discontinued}" Width="130"/>

 

 

 

 

</telerik:RadGridView.Columns>

 

 

 

 

</telerik:RadGridView>

 

The result is that the grid view is now not as wide as the space required for the columns (unlike in your demo).  Therefore the horizontal scroll bar is displayed.

- Executing the demos and navigate to Browse Controls > Grid View > Filtering > Custom Filter Row.
    - The horizontal scroll bar will now be visible
- Scroll the bar to the right
- Click into and edit any of the visible filter cells


What you will see is that the alignment of the filter row is now incorrect.

Could you please replicate this issue (the only thing required is to change the xaml as above) and recommend a solution?

I'm not sure how you tested it with your latest binaries?  There is no issue if there is no scrolling, but it is very easy to replicate when scrolling is used.

Thanks.
Ian.

[Yordanka]

Hello ianr,

Thank you for the details.
After further tests, we managed to replicate the problem. Since the Custom Filter Row is not a build-in feature of the RadGridView but just an example, this scenario is not handled when the demo has been created. But you have full access to the filter row implementation so that you can easily modify the code. We will do our best to fix the problem in our example as well.

The mentioned problem will no longer appear if you modify the code as shown below:

private void GridViewScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            if (e.HorizontalChange != 0)
            {
                this.filteringRow.ScrollViewer.ScrollToHorizontalOffset(e.HorizontalOffset);
            }
        }

Let us know if you need further assistance.
 
Greetings,
Yordanka
the Telerik team

[ianr]

Hi Yordanka,

Thank you for the very quick response.  I have implemented the change you suggested and this has fixed the primary issue.

However, there was still one issue:

If you have scrolled to the right, and you have a filter cell partially within the view of the grid view (e.g. a text filter cell which is at the left but only the right half of it is visible) and you click into it, the filter row then snaps across to make sure the full filter cell is visible, but it does not scroll the grid view's scroll viewer with it - so you are again out of alignment.

I have fixed this by adding a couple of lines as follows:

 

if (e.HorizontalChange != 0)
{
   this.filteringRow.ScrollViewer.ScrollToHorizontalOffset(e.HorizontalOffset);

   GridViewScrollViewer gridViewScrollViewer = this.radGridView.ChildrenOfType<GridViewScrollViewer>().FirstOrDefault();
   gridViewScrollViewer.ScrollToHorizontalOffset(e.HorizontalOffset);
}

It's not perfect, but seems to work ok.

Regards,
Ian.