How to style the RadBusyIndicator associated with the GridView

[Scott]

This seems like an easy one and I'm probably missing something obvious.  If so, I apologize in advance.  But I'm confused how to style the Busy indicator associated with the RadGridView.  If I drop an independent RadGridView on my UI, I can used Blend to create a copy of the template and style it.  But I can't figure out how to bind that with my GridView. 

I included a screenshot that is a composite of 2 screenshots.  The top is GridView.IsBusy = false.  The bottom is GridView.IsBusy = true.  The arrows include the Busy Indicator I'm trying to style.  

 

[Vicky]

Hi Scott,

The little things sometimes turn out as the most challenging :). To style that particular grid's loading indicator, you need to define a style targeting the RadBusyIndicator control. If you want this style to apply only for this grid, you need to create it as its resource:

 

<telerik:RadGridView Grid.Row="0" Name="clubsGrid" ItemsSource="{Binding Clubs}" AutoGenerateColumns="False" Margin="5" IsBusy="True">
    <telerik:RadGridView.Resources>
        <Style TargetType="telerik:RadBusyIndicator">
            <Setter Property="Background" Value="#40FFD700"/>
            <Setter Property="BorderBrush" Value="#FFD700"/>
        </Style>
    </telerik:RadGridView.Resources>
</telerik:RadGridView>

 

If you need to customize the entire template of the indicator, including its progress indicator parts, you will need to extract the default control template. The following articles on styling the BusyIndicator and the ProgressBar controls may be useful for you - BusyIndicator & ProgressBar. You can learn more about how to edit control templates in the following article. If you only need to change the content of the busy indicator, you can use either of the RadGridView's properties - BusyIndicatorContent and BusyIndicatorContentTemplate. An example of how to use them is given in this article.

Please, try out the above suggestions and if you need further assistance, do not hesitate to contact me - I'll be more than glad to help.

Regards,
Vicky
Progress Telerik

[Scott]

I do need to customize the entire template, ..and I've created a copy of the style, styled it to my liking, and it is called x:Key="RadBusyIndicatorStyle1".  How to I assign this style to the Busy Indicator associated with the GridView ?  

Thanks!

[Scott]

Just FYI, for now, I'm overriding all RadBusyIndicators, but this isn't typically how I do things (maybe I should be).  

[Vicky]

Hi Scott,

I created a sample project for you that demonstrates how to achieve this. The project uses StyleManager with the default theme (Office Black) and a separate ResourceDictionary (CustomGridBusyIndicatorStyle.xaml) that is added to the RadGridView's resources. The CustomGridBusyIndicatorStyle resource dictionary contains the default styles and templates of the RadBusyIndicator control and its progress bars as well + a custom progress bar style that is applied to the BusyIndicator.

The style that you created has an x:Key which makes it an explicit style that will be applied only where it is used as a StaticResource/DynamicResource's key. If you remove the key and replace the style <Style TargetType="telerik:RadBusyIndicator">...</Style> from the CustomGridBusyIndicatorStyle.xaml file with yours, everything should look like you want it to.

Could you please check the attached project, give it a try, make the suggested modification and let me know if the result is the desired one?

Regards,
Vicky
Progress Telerik

[Scott]

Thank you for the sample project.  Very helpful !