[Solved] Set grid overlay during data load

[uku]

Hello,

I've a RadGridView, a RadDataPager and a ViewModel which exposes the data via QueryableDomainServiceCollectionView.
Everything works fine but I want to set the overlay color to transparent when I'm using the pager for scrolling through the collection and I don't see how to do this. Always when a new chunk of data is loaded the grid is overlayed with a busy indicator on a black background. I want to set this color to transparent so that only the busy indicator is shown.

Thanks in advance

Uwe

[Maya]

Hello uku,

You may try to define a style for the BusyIndicator and set its OverlayStyle:

<UserControl.Resources>
    <Style TargetType="telerik:RadBusyIndicator">
        <Setter Property="OverlayStyle">
            <Setter.Value>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="HotPink" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

  

All the best,
Maya
the Telerik team

[uku]

Hello Maya,

thanks for the answer, but this didn't solve my problem. I've used just a RadGridView and a RadDataPager and no RadBusyIndicator in my XAML code. The black background and the busy indicator are shown automatically. Does it mean I have to explicitly insert a RadBusyIndicator in my xaml code to have control over the grid overlay color during paging?

Thanks for your support

Uwe

[Maya]

Hi uku,

The code-snippet above demonstrates how you may define an implicit style for a RadBusyIndicator. It will be applied to all the RadBusyIndicator-s in your application. You do not need to set any busy indicators.  Does this solution not work in your application ?
 

All the best,
Maya
the Telerik team

[uku]

Hello Maya,

this solution doesn't work in my app. May be I'm doing sth. wrong.
Please have a looked at the attached XAML code. May be you can identify the problem.

<UserControl.Resources>
    <VM:CustomerViewModel x:Key="vm"/>
    <Style TargetType="tel:RadBusyIndicator">
        <Setter Property="OverlayStyle">
            <Setter.Value>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="HotPink"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource vm}}">
    <Grid  x:Name="ListArea" VerticalAlignment="Top" >
        <StackPanel>
            <tel:RadGridView x:Name="CustomerList" ItemsSource="{Binding CustomerView}"
                        IsReadOnly="True" AutoGenerateColumns="False"
                        ShowGroupPanel="False"
                        RowIndicatorVisibility="Collapsed"
                        CanUserReorderColumns="True" CanUserSelect="True"
                        CanUserSortColumns="True" IsFilteringAllowed="True"
                        EnableRowVirtualization="True"
                        SelectionMode="Multiple"
                        DataLoaded="CustomerList_DataLoaded"
                        DistinctValuesLoading="CustomerList_DistinctValuesLoading"
                        >
                <tel:RadGridView.Columns>
                    <tel:GridViewSelectColumn/>
                    <tel:GridViewDataColumn Header="No" UniqueName="No" DataMemberBinding="{Binding Path=CustomerNo}" Width="60" ShowDistinctFilters="False"/>
                    <tel:GridViewDataColumn Header="Name" UniqueName="Name" DataMemberBinding="{Binding Path=CustomerName}" Width="120" ShowDistinctFilters="False"/>
                    .....
                </tel:RadGridView.Columns>
            </tel:RadGridView>
            <tel:RadDataPager Source="{Binding Items, ElementName=CustomerList}"
                                          DisplayMode="All"
                                          />
        </StackPanel>
    </Grid>
</Grid>

Thanks

Uwe

[Maya]

Hi uku,

I am sending you a sample project illustrating another approach for changing the style of the busy indicator. You may just copy the code in the Resources section and use it in your application. You may play along with the Background property so that it meets your requirements. 

Greetings,
Maya
the Telerik team