RadDataGrid Bug: Scrollbar is overlapping content in last column/row (UWP)

[Carolin]

Hello,

currently I'm experimenting with RadDataGrids and stumbled on the issue that the scrollbar on UWP is blocking the content (including the options button which is also not clickable because of it, screenshot is attached).

Looks like inputtransparent=true and cascadeinputtransparent=false on the scrollbar within the DataGrids is missing or something like that

Code Snippet (screenshot is attached):

<Grid Grid.Row="1">
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="Auto"/>
		<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition />
		<RowDefinition />
	</Grid.RowDefinitions>
	<dataGrid:RadDataGrid Grid.Column="0"  Grid.RowSpan="2"
				  ItemsSource="{Binding Resources}"
				  AutoGenerateColumns="True"
				  UserEditMode="Cell"
				  >
		
	</dataGrid:RadDataGrid>

	<Label Grid.Column="1" Grid.Row="0" Text="Placeholder for future adventures 🦄." BackgroundColor="PaleTurquoise"/>

	<dataGrid:RadDataGrid Grid.Column="1" 
				Grid.Row ="1"
				ItemsSource="{Binding Resources}"
				AutoGenerateColumns="True"
				UserEditMode="Cell"
				>
	</dataGrid:RadDataGrid>
</Grid>

[Didi]

Hi Carolin,

I tested the case and reproduced the behavior. I have logged it here: https://feedback.telerik.com/xamarin/1632226-datagrid-uwp-scrollbar-is-overlapping-content-in-last-column-row 

In general this is an issue in the ScrollView that is used internally in the RadDataGrid. If you replace the DataGrid with ListView, same behavior occurs. But here the case is the DataGrid header element - it is not scrollable along with the content (rows). This is the reason why the header options button is overlapped too. 

Workaround: Add a style for the column header and apply margin to the Options button:

  <ContentPage.Resources>
        <ResourceDictionary>

            <telerikGrid:DataGridColumnHeaderStyle x:Key="headerstyle"
                                           TextColor="Black" OptionsButtonMargin="0,0,20,0" 
                                                   OptionsButtonFontSize="30"
                                           BorderColor="Black" 
                                           BorderThickness="2"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid>
        <telerikGrid:RadDataGrid ItemsSource="{Binding Items}" BackgroundColor="Red" AutoGenerateColumns="false">
            <telerikGrid:RadDataGrid.Columns>
                <telerikGrid:DataGridTextColumn PropertyName="Country" HeaderStyle="{StaticResource headerstyle}"/>
                <telerikGrid:DataGridTextColumn PropertyName="Capital" HeaderStyle="{StaticResource headerstyle}"/>
            </telerikGrid:RadDataGrid.Columns>
        </telerikGrid:RadDataGrid>
    </Grid>

 

Regards,
Didi
Progress Telerik

[Carolin]

Hi Didi,

thanks for the quick answer and creating a bug report. The workaround seems to solve the problem.

Best Regards

Carolin