Loading background width not 100%

[Stefania]

Hi,

I notice that on grid with ColumnSelctionButton the loading background is not expaded at 100%, as shown on the attachment, and the external area is active.

There is a way to expand the loading at 100%

 

Thank you

[Dilyan Traykov]

Hello Stefania,

Thank you for reporting this issue. I've logged a new bug report in our feedback portal which you can find here.

To show our gratitude for your help, I've awarded you with some Telerik points.

In the meantime, as a workaround, you can modify the control template of the RadGridView control and increase the ColumnSpan of the PART_GridViewLoadingIndicator element by 1.

For your convenience, I'm attaching the modified template for the Office_Black theme. If you're using a different one, you should modify it accordingly.

<ControlTemplate x:Key="RadGridViewTemplate" TargetType="telerik:RadGridView">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="GridViewActivity">
                <VisualState x:Name="Idle">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GridViewLoadingIndicator" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Busy">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GridViewLoadingIndicator" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ColumnHeadersVisibility">
                <VisualState x:Name="ColumnHeadersVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderRow" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ColumnHeadersCollapsed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderRow" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ColumnFootersVisibility">
                <VisualState x:Name="ColumnFootersVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FooterRow" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ColumnFootersCollapsed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FooterRow" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="GroupPanelVisibility">
                <VisualState x:Name="GroupPanelVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupPanel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="GroupPanelCollapsed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupPanel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="InsertRowVisibility">
                <VisualState x:Name="InsertRowVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_AddNewRow" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="InsertRowCollapsed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_AddNewRow" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="DisabledStates">
                <VisualState x:Name="Enabled"/>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background_Disabled" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition x:Name="PART_AttachedBehaviorRow" Height="Auto"/>
            <RowDefinition/>
            <RowDefinition x:Name="ScrollBarRow" MinHeight="0" Height="0"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="ScrollBarColumn" MinWidth="0" Width="0"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <telerik:GridViewSearchPanel x:Name="PART_SearchPanel"
        Grid.ColumnSpan="4"
        Visibility="{Binding ShowSearchPanel, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
        Background="{TemplateBinding SearchPanelBackground}"
        Foreground="{TemplateBinding SearchPanelForeground}"
        BorderBrush="{StaticResource GridView_SearchPanelOuterBorder}"/>
        <telerik:GridViewGroupPanel x:Name="PART_GroupPanel"
        Grid.ColumnSpan="4"
        Grid.Row="1"
        Background="{TemplateBinding GroupPanelBackground}"
        Foreground="{TemplateBinding GroupPanelForeground}"
        BorderBrush="{StaticResource GridView_GroupPanelOuterBorder}"/>
        <ItemsControl x:Name="PART_ControlPanelItemsControl" Grid.Column="2" Grid.Row="1" IsTabStop="False" HorizontalAlignment="Right">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <telerik:ControlPanelItemControl/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <telerik:RadDropDownButton x:Name="PART_GridViewColumnsSelectionButton"
        Grid.Column="3"
        Grid.Row="1"
        MinWidth="22"
        MinHeight="22"
        VerticalAlignment="Center"
        DropDownIndicatorVisibility="Collapsed"
        Padding="0"
        Margin="0 0 4 0"
        Style="{StaticResource ControlPanelItem_DropDownButtonStyle}"
        IsTabStop="False"
        Visibility="{Binding ColumnsSelectionButtonVisibility, RelativeSource={RelativeSource TemplatedParent}}">
            <ToolTipService.ToolTip>
                <ToolTip Placement="Right" telerik:LocalizationManager.ResourceKey="GridViewColumnsSelectionButtonTooltip"/>
            </ToolTipService.ToolTip>
            <telerik:RadDropDownButton.Content>
                <Path
                Data="M14.7,9 L16,10.2 L10.1,17 L6,13 L7.2,11.8 L10.1,14.6 z M12,4 L16,4 L16,8 L12,8 z M6,4 L10,4 L10,11 L6,11 z M0,4 L4,4 L4,16 L0,16 z M12,0 L16,0 L16,2 L12,2 z M6,0 L10,0 L10,2 L6,2 z M0,0 L4,0 L4,2 L0,2 z"
                Height="17"
                Width="16"
                Stretch="Fill"
                UseLayoutRounding="True"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Fill="{StaticResource ControlForeground}"/>
            </telerik:RadDropDownButton.Content>
            <telerik:RadDropDownButton.DropDownContent>
                <telerik:RadListBox ItemsSource="{Binding Columns}" BorderThickness="0" Padding="4 1" MaxWidth="200" MaxHeight="250">
                    <telerik:RadListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel/>
                        </ItemsPanelTemplate>
                    </telerik:RadListBox.ItemsPanel>
                    <telerik:RadListBox.ItemContainerStyle>
                        <Style TargetType="telerik:RadListBoxItem">
                            <Setter Property="Padding" Value="3"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerik:RadListBoxItem">
                                        <CheckBox Padding="{TemplateBinding Padding}" Content="{Binding Converter={StaticResource ColumnHeaderConverter}}" IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </telerik:RadListBox.ItemContainerStyle>
                </telerik:RadListBox>
            </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>
        <Border
        Name="PART_MasterGridContainer"
        Grid.Row="3"
        Grid.RowSpan="2"
        Grid.ColumnSpan="4"
        BorderBrush="{TemplateBinding BorderBrush}"
        Background="{TemplateBinding Background}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Padding="{TemplateBinding Padding}"
        Margin="0 -1 0 0"/>
        <telerik:GridViewScrollViewer x:Name="PART_ItemsScrollViewer" Background="Transparent" CanContentScroll="True" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="4" Margin="1 0 1 1">
            <telerik:GridViewScrollViewer.HeaderRow>
                <telerik:GridViewHeaderRow x:Name="PART_HeaderRow" IndentLevel="{TemplateBinding GroupCount}"/>
            </telerik:GridViewScrollViewer.HeaderRow>
            <telerik:GridViewScrollViewer.NewRow>
                <telerik:GridViewNewRow x:Name="PART_AddNewRow" IndentLevel="{TemplateBinding GroupCount}" Visibility="Collapsed"/>
            </telerik:GridViewScrollViewer.NewRow>
            <telerik:GridViewScrollViewer.FooterRow>
                <telerik:GridViewFooterRow x:Name="PART_FooterRow" IndentLevel="{TemplateBinding GroupCount}"/>
            </telerik:GridViewScrollViewer.FooterRow>
            <telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
        </telerik:GridViewScrollViewer>
        <telerik:ScrollPositionIndicator x:Name="PART_ScrollPositionIndicator"
        Margin="0 0 28 0"
        IsHitTestVisible="False"
        HorizontalAlignment="Right"
        Grid.Row="3"
        Grid.ColumnSpan="4"
        Visibility="{Binding IsScrolling, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
        ContentTemplate="{TemplateBinding ScrollPositionIndicatorTemplate}"/>
        <Border x:Name="PART_FrozenColumnsPreview"
        Grid.Row="2"
        Visibility="Collapsed"
        HorizontalAlignment="Left"
        VerticalAlignment="Stretch"
        Grid.RowSpan="4"
        Background="#33000000"
        Width="6"/>
        <telerik:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator"
        Visibility="Collapsed"
        IsBusy="{Binding IsBusy, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
        Grid.RowSpan="6"
        Grid.ColumnSpan="4"/>
        <Rectangle x:Name="Background_Disabled" Fill="{StaticResource Background_Disabled}" IsHitTestVisible="False" Grid.RowSpan="6" Grid.ColumnSpan="4" Visibility="Collapsed"/>
    </Grid>
</ControlTemplate>

Let me know if this solves the issue for you.

Regards,
Dilyan Traykov
Telerik by Progress