This is a migrated thread and some comments may be shown as answers.

How to style the RadBusyIndicator associated with the GridView

5 Answers 227 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 07 Oct 2019, 07:44 PM

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.  

 

5 Answers, 1 is accepted

Sort by
0
Vicky
Telerik team
answered on 08 Oct 2019, 08:46 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott
Top achievements
Rank 1
answered on 08 Oct 2019, 03:44 PM

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!

0
Scott
Top achievements
Rank 1
answered on 08 Oct 2019, 05:26 PM
Just FYI, for now, I'm overriding all RadBusyIndicators, but this isn't typically how I do things (maybe I should be).  
0
Accepted
Vicky
Telerik team
answered on 09 Oct 2019, 11:40 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott
Top achievements
Rank 1
answered on 15 Oct 2019, 08:10 PM
Thank you for the sample project.  Very helpful !
Tags
GridView
Asked by
Scott
Top achievements
Rank 1
Answers by
Vicky
Telerik team
Scott
Top achievements
Rank 1
Share this question
or