BusyIndicator blocking content when not busy

[jen]

So I often use the BusyIndicator in my application to provide a nicely styled modal window with overlay. I am attempting to add a BusyIndicator to a view that already has 5 others set up to cover the whole view. They are not nested; they all cover the same grid rowspan. I copied the code from another already on the page and gave it a new name. I can't see any difference in the code.

For some reason this new busy indicator is blocking access to my view while it is set to IsBusy="False". It is not applying the styled colour overlay or showing the modal itself, but I can't click on any buttons or interact with the screen at all.

 

    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <telerik:RadBusyIndicator Grid.RowSpan="4" x:Name="SecurityAnswers" IsBusy="False" OverlayStyle="{StaticResource BusyIndicator_OverlayStyle}" ProgressBarStyle="{StaticResource BusyNoProgress}">
            <telerik:RadBusyIndicator.BusyContent>
                <StackPanel>
                    <!-- This is the indicator that works perfectly. There are 5 similar to this one that all work fine. -->
                </StackPanel>
            </telerik:RadBusyIndicator.BusyContent>
        </telerik:RadBusyIndicator>

        <telerik:RadBusyIndicator Grid.RowSpan="4" x:Name="SelectUserLocation" IsBusy="False" OverlayStyle="{StaticResource BusyIndicator_OverlayStyle}" ProgressBarStyle="{StaticResource BusyNoProgress}" >
            <telerik:RadBusyIndicator.BusyContent>
                <Grid >
                    <!-- this is the indicator that is causing the problems! I can't see anything to explain the different behaviour -->
                </Grid>
            </telerik:RadBusyIndicator.BusyContent>>
        </telerik:RadBusyIndicator>
    </Grid>

  

I have moved the offending BusyIndicator above and below the others, and I have removed all the others to see if there was an issue due the number of indicators on the screen. Even if its the only BusyIndicator on the screen, it still blocks the screen while not busy!

I have also tried removing the styles, the problem continues. The only thing that solves the problem is removing that one BusyIndicator

 

Any insight into this issue would be greatly appreciated! thanks

[Lance | Manager Technical Support]

Hi Jen,

The problem appears to be your RowSpan. You only have 3 RowDefinitions defined, but your BusyIndicators are all starting in Row 0 and spanning across all three available rows. So the result you're seeing is the expected behavior.

If you want the individual BusyIndicators to be for a specific row, you'll need to set Grid.Row value of each and get rid of the RowSpan entirely

I've updated your code with the fixes below, here's a short screencast of it running.


If this answers your question, you can let me know by selecting the ticket's "Mark as resolved" button. If it doesn't, please update the code I've pasted below so that it reproduces the new problem and I'll investigate further.

Thank you for contacting Support and for choosing UI for WPF.


Updated XAML

<Grid x:Name="LayoutRoot"
          Background="White"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <telerik:RadBusyIndicator x:Name="SecurityAnswers"
                     Grid.Row="0"
                      IsBusy="True">
            <telerik:RadBusyIndicator.BusyContent>
                <StackPanel>
                    <!-- This is the indicator that works perfectly. There are 5 similar to this one that all work fine. -->
                    <TextBlock Text="Im in section one" Foreground="White" HorizontalAlignment="Center"/>
                </StackPanel>
            </telerik:RadBusyIndicator.BusyContent>

            <Rectangle Fill="Blue"
                       Height="100"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch" />
        </telerik:RadBusyIndicator>

        <telerik:RadBusyIndicator x:Name="SelectUserLocation"
                     Grid.Row="1"
                     IsBusy="True">
            <telerik:RadBusyIndicator.BusyContent>
                <Grid>
                    <!-- this is the indicator that is causing the problems! I can't see anything to explain the different behaviour -->
                    <TextBlock Text="Im in section two"
                               Foreground="White"
                               HorizontalAlignment="Center" />
                </Grid>
            </telerik:RadBusyIndicator.BusyContent>

            <Rectangle Fill="DarkRed"
                       Height="100"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch" />
        </telerik:RadBusyIndicator>
    </Grid>

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[jen]

Sorry but you seem to have completely misunderstood the issue. The rowspan is fine, it is covering the area I need it to cover. The issue is that when IsBusy=False, while the indicator is not showing and the overlay is also not visible, the controls under the indicator are not responding to clicks. Its as if the indicator is still up and running when it should not be.

I have 5 other indictors covering the same rowspan, using the same styles and everything, that do not block the screen while not busy. I don't think I'll be able to reproduce this, there is no logical reason why this is happening. Its only for this ONE indicator, no matter what I name it.

To get around this issue I am keeping the indicator's Visibility=Collapsed until I need it to be displayed.

[Lance | Manager Technical Support]

Hello Jen,

Thank you for clarifying further. This is likely because you are placing the UI content underneath the RadBusyIndicator.

You should be placing the content inside the RadBusyIndicator not underneath it, for example:

<telerik:RadBusyIndicator x:Name="radBusyIndicator">
    <Grid>
<!-- Your content goes here -->
    </Grid>
</telerik:RadBusyIndicator>

You can still use the approach you're taking, but it's not the intended operation of the control. You'll need to remove the BusyIndicator from the Visual Tree (i.e. Visibility=Collapased) so that elements underneath it are accessible.

Please let me know if you have any additional questions.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[jen]

Thanks for the reply. I understand I'm not using the control in the intended way, but its never given me this issue before. It makes no sense to me that it would work perfectly 5 times of out 6 on the same page with the same code.

Since you likely won't be able to reproduce this issue and I have a useable workaround I will consider this issue resolved for now