RadDataGrid horizontal scrolling issue

[Martin]

Hello all together.

The problem is, that the RadDataGrids horizontal scrolling stops working on dynamically reloading the RadDataGrids ItemsSource. Horizontal srolling is no longer possible then. (I have a bit of a complex UI, where the RadDataGrid is wrapped inside a Grid inside a StackPanel, ..., but I could not find any coherence to the issue.)

What you need:

1. RadDataGrid with 1 DataGridTemplateColumn
2. ItemsSource bound to ObservableCollection in ViewModel
3. DataTemplate in Column 1 with Label to display text from binding through ItemsSource. Important: Text length to display in the Label must be wider than RadDataGrids with, to let the horizontal scollbar appear.
4. Two buttons in the view. On each button tap reassign the ObservableCollection in ViewModel with "new ObservableCollection" (see added source code).
5. Switch two or three times between Button1 and Button2 to let the ItemsSource be reassigned.
6. Try horizontal scrolling on white space in RadDataGrid. Scrollbar won't appear and scrolling won't be possible. If you set RadDataGrids SelectedItem after reassining the ItemsSource, scolling will only be possible again if you tap the selected item again.

 

(property ListItems is binding to RadDataGrids ItemsSource. Source code is not optimized, just from scratch to catch the point.)

private void Button1ClickCommand()
{
    List<string> list = new List<string>
    {
        "This is a very long text for testing horizontal scrollbar issue.",
        "This is a very long text for testing horizontal scrollbar issue.",
        "This is a very long text for testing horizontal scrollbar issue.",
        "This is a very long text for testing horizontal scrollbar issue.",
        "This is a very long text for testing horizontal scrollbar issue.",
        "This is a very long text for testing horizontal scrollbar issue."
    };

    Device.BeginInvokeOnMainThread(() => ListItems = new ObservableCollection<string>(list));
}

private void Button2ClickCommand()
{
    List<string> list = new List<string>
    {
        "This is another very long text for testing horizontal scrollbar issue.",
        "This is another very long text for testing horizontal scrollbar issue.",
        "This is another very long text for testing horizontal scrollbar issue.",
        "This is another very long text for testing horizontal scrollbar issue.",
        "This is another very long text for testing horizontal scrollbar issue.",
        "This is another very long text for testing horizontal scrollbar issue."
    };

    Device.BeginInvokeOnMainThread(() => ListItems = new ObservableCollection<string>(list));
}

ObservableCollection<string> listItems;
public ObservableCollection<string> ListItems
{
    get
    {
        return listItems;
    }
    set
    {
        listItems = value;
        OnPropertyChanged();
    }
}

 

Thank you,

best regards

Martin

[Yana]

Hi Martin,

I have tried to replicate the issue following the provided steps, but on my side the horizontal scrolling is working without a problem.  I have attached my test project, could you download it and give it a try? Can you observe the erroneous scrolling behavior with it? If not, can you modify it with your code, so that the issue could be reproduced and send it back to us?

Looking forward to your reply.

Regards,
Yana
Progress Telerik

[Martin]

Hi Yana,

thank you for the sample solution. The problem is, the RadDataGrid in your view is wider than the sample text in the first column. I have modified the main view in the solution and the issue is now reproducible.

 

How to test:

Switch between Button 1 and Button 2 to reload the grid. Most of the time after reloading, horizontal scrolling is not possible until you tap one item in the grid or the grid itself. Tapping the column header won't work. Sometimes horizontal scrolling is possible without tapping the grid before. That would be the standard behaviour as you can see by RadTreeView vertical scrolling. RadTreeView always scrolls after realoading also without tapping the treeview before.

 

How can I send the solution back? You could send me an email to the address in my profile, and I will send back a zip file...

 

Regards,

Martin

[Martin]

I forgot I can post here. So this is the new MainPage.xaml. Notice the column with width 250 where the DataGrid is in. With this limitation, the sample text to display is wider than the grid, which enables horizontal scrolling.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
             xmlns:local="clr-namespace:GridHorizontalScrolling"
             x:Class="GridHorizontalScrolling.MainPage">
    <StackLayout>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <StackLayout Orientation="Horizontal">
                <Button Text="Click 1" Clicked="Button1ClickCommand" />
                <Button Text="Click 2" Clicked="Button2ClickCommand" />
            </StackLayout>

            <telerikGrid:RadDataGrid x:Name="DataGrid" Grid.Row="1" AutoGenerateColumns="False" ItemsSource="{Binding ListItems}">
                <telerikGrid:RadDataGrid.Columns>
                    <telerikGrid:DataGridTemplateColumn HeaderText="Template Column">
                        <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                            <DataTemplate>
                                <Grid BackgroundColor="Orange" Margin="0, 10, 0, 0">
                                    <Label Text="{Binding}"
                                       Margin="0, 5, 0, 5"
                                       HorizontalOptions="Center"
                                       VerticalTextAlignment="Center"/>
                                </Grid>
                            </DataTemplate>
                        </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                    </telerikGrid:DataGridTemplateColumn>
                </telerikGrid:RadDataGrid.Columns>
            </telerikGrid:RadDataGrid>
        </Grid>
    </StackLayout>
</ContentPage>

[Yana]

Hello Martin,

Thank you for the updated xaml - I have managed to reproduce the erroneous behavior you've described.  I have logged it in our public portal, you could follow the item below:
https://feedback.telerik.com/xamarin/1380407-datagrid-scrollviewer-is-not-always-visualized-when-dynamically-changing-the-itemsource-of-the-control 

in order to receive notifications on status changes.

Thank you for reporting this issue, I've updated your Telerik points as a small sign of gratitude for your involvement.

Regards,
Yana
Progress Telerik