Progress bar when you apply a filter

[Gerard]

I have a datagrid with pagination and filters in the columns. When I apply a filter I show a progress bar, I show it in the OnFiltering event and hide it in OnFiltered. After the OnFiltered event the datagrid takes about 2 seconds to update the rows. Is there any way to hide the progress bar after that the datagrid finish updating? I have not found any event that serves me. I have tried with the gridview.Items.CurrentChanged event but it triggers before the datagrid has been updated.

Is there any way to detect that the datagrid has finished filtering the items?

Regards,
Gerard.

[Stefan Nenchev]

Hello Gerard,

Generally, you can use the CollectionChanged event of the Items collection. It is fired whenever a data operation was applied over the RadGridView(sorting, grouping, filtering). However, keep in mind that when using a pager, the event will be fired on changing the pages as well.

Based on the picture provided the count of the items in the underlying collection is not that large so it is strange that it takes 2 seconds for the items to be filtered. If the CollectionChanged does not help, would it be possible to provide a sample so we can have a more detailed look and suggest a possible approach?

Regards,
Stefan Nenchev
Telerik by Progress

[Gerard]

Hello Stefan,

It takes 2 seconds to update the gridview after filtering and also when you change pages.

The gridview sourceitems is an ObservableCollection <OptimizerResultsViewModel> OptimizerResults:

(I need a dynamic object because the columns are not fixed)

01.public class OptimizerResultsViewModel : DynamicObject
02.    {
03.        private readonly Dictionary<string, dynamic> _properties = new Dictionary<string, dynamic>(StringComparer.InvariantCultureIgnoreCase);
04.
05.        public override bool TryGetMember(GetMemberBinder binder, out dynamic result)
06.        {
07.            if (_properties.ContainsKey(binder.Name))
08.            {
09.                result = _properties[binder.Name];
10.                return true;
11.            }
12.            else
13.            {
14.                result = null;
15.                return false;
16.            }
17.        }
18.        ...
19.    }

 

The gridview:

01.<telerik:RadGridView Grid.Row="1" Name="DatagridResults" FilterOperatorsLoading="DatagridResults_OnFilterOperatorsLoading" Filtering="DatagridResults_OnFiltering" Filtered="DatagridResults_OnFiltered" ItemsSource="{Binding OptimizerResults}" helpers1:BarLogColumnsBindingBehavior.Columns="{Binding ResultsOptimizerColumns}" Loaded="DatagridResults_OnLoaded" MouseDoubleClick="ResultsOnMouseDoubleClick" Sorting="DatagridResults_OnSorting" Sorted="DatagridResults_OnSorted" ShouldCloseFilteringPopupOnKeyboardFocusChanged="True" IsReadOnly="True" ShowGroupPanel="False" CanUserDeleteRows="False" CanUserInsertRows="False" AreRowDetailsFrozen="True" CanUserReorderColumns="False" CanUserResizeRows="False" CanUserResizeColumns="False" RowIndicatorVisibility="Collapsed" IsFilteringAllowed="True" EnableColumnVirtualization="False" FrozenColumnsSplitterVisibility="Collapsed">
02.    <telerik:RadContextMenu.ContextMenu>
03.        <telerik:RadContextMenu telerik:StyleManager.Theme="Windows7" ItemsSource="{Binding MenuItemContextMenuItemsCollection}" >
04.            <telerik:RadContextMenu.ItemContainerStyle>
05.                <Style TargetType="telerik:RadMenuItem">
06.                    <Setter Property="IsCheckable" Value="True"/>
07.                    <Setter Property="IsChecked" Value="{Binding IsChecked}"/>
08.                    <Setter Property="Command" Value="{Binding Command}"/>
09.                    <Setter Property="Header" Value="{Binding Header}"/>
10.                    <Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Self}}" />
11.                </Style>
12.            </telerik:RadContextMenu.ItemContainerStyle>
13.        </telerik:RadContextMenu>
14.    </telerik:RadContextMenu.ContextMenu>
15.    <telerik:RadGridView.Resources>
16.        <Style TargetType="telerik:GridViewRow">
17.            <Style.Triggers>
18.                <DataTrigger Binding="{Binding Color}" Value="Green">
19.                    <DataTrigger.Setters>
20.                        <Setter Property="Background" Value="LightGreen" />
21.                    </DataTrigger.Setters>
22.                </DataTrigger>
23.                <DataTrigger Binding="{Binding Color}" Value="Yellow">
24.                    <DataTrigger.Setters>
25.                        <Setter Property="Background" Value="LightGoldenrodYellow" />
26.                    </DataTrigger.Setters>
27.                </DataTrigger>
28.                <DataTrigger Binding="{Binding Color}" Value="White">
29.                    <DataTrigger.Setters>
30.                        <Setter Property="Background" Value="White" />
31.                    </DataTrigger.Setters>
32.                </DataTrigger>
33.            </Style.Triggers>
34.        </Style>
35.   </telerik:RadGridView.Resources>
36.</telerik:RadGridView>

 

Regards,

[Stefan Nenchev]

Hi Gerard,

Indeed, in the case of using late binding approach, the RadGridView would take more time to be visualized. However, I have noticed that you have set the EnableColumnVirtualization property of the control to False, which is not recommended as the UI Virtualization is the main tool for a performance boost of the RadGridView. You can test if switching it on will improve the performance at your end. 

Regards,
Stefan Nenchev
Telerik by Progress

[Gerard]

Hello Stefan,

With the property EnableColumnVirtualization to True the delay is solved, now the refresh of the datagrid after filtering is instant! It also takes less time to change pages.

With the EnableColumnVirtualization property false the size of the horizontal scroll bar was always the same (image 1).
Now with the EnableColumnVirtualization property, the horinzontal scroll bar size is very large and adapts as you scroll (image 2). Is it possible to leave the scroll bar fixed (as in EnableColumnVirtualization to false)?

Regards,
Gerard.

[Stefan Nenchev]

Hi Gerard,

I am glad to see there is an improvement.
 
Unfortunately, this is one of the undesired effects of enabling the column virtualization as not all elements are realized on the initial loading of the control.

However, I strongly advise you on using it as it boosts the performance of the RadGridView immensely as you have noticed. A partial workaround would be to lower the ViewportSize of the ScrollBar on loading the RadGridView, thus lowering the level of minimization of the scroll bar:

private void clubsGrid_Loaded(object sender, RoutedEventArgs e)
      {
          var scrollBar = this.clubsGrid.ChildrenOfType<ScrollBar>().Where(x => x.Name == "PART_HorizontalScrollBar").FirstOrDefault();
          if (scrollBar != null)
          {
              scrollBar.ViewportSize = 50;
          }
      }

I hope it helps.

Regards,
Stefan Nenchev
Telerik by Progress

[Gerard]

Hi stefan,

With the ViewportSize = 50 also decreases the size when scrolling. Is it possible to set the size of the scroll bar (which is always the same)?

Attachment captures what it looks like decreases in size.

Regards,
Gerard.

[Stefan Nenchev]

Hello Gerard,

Actually, I have missed the fact that setting a fixed width for the columns of the RadGridView will resolve the issue(ColumnWidth property of RadGridView). Please calculate what width will be appropriate for you and set it for the control. 

Regards,
Stefan Nenchev
Telerik by Progress

[Gerard]

Solved, I have apply fixed width.

Regards,
Gerard.

[Stanley]

Hi Stefan! Is the CollectionChanged Event available for UWP RadDataGrid?

Need view Items after Filtering is done. 

 

[Stefan]

Hi Stanley,

The UWP DataGrid does not expose an Items collection as its UI for WPF equivalent. Please note, that we are trying to keep our support communication consistent. So if any further assistance regarding the UWP DataGrid is needed, please post your inquiry in the relevant forum section.

Thank you in advance for understanding.

Regards,
Stefan
Progress Telerik