RadDataGrid horizontal scrolling issue

5 posts, 0 answers
  1. Martin
    Martin avatar
    18 posts
    Member since:
    Oct 2018

    Posted 07 Dec 2018 Link to this post

    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

  2. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 12 Dec 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Martin
    Martin avatar
    18 posts
    Member since:
    Oct 2018

    Posted 12 Dec 2018 in reply to Yana Link to this post

    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

  4. Martin
    Martin avatar
    18 posts
    Member since:
    Oct 2018

    Posted 13 Dec 2018 Link to this post

    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" ?>
                 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>
  5. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 13 Dec 2018 Link to this post

    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.progress.com/Project/168/feedback/Details/259531-datagrid-scrollviewer-is-not-always-visualized-when-dynamically-changing-the-ite

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top