Make headers scroll down with the data

7 posts, 0 answers
  1. Tayfun
    Tayfun avatar
    8 posts
    Member since:
    Dec 2018

    Posted 26 Mar 2019 Link to this post

    Is there a way to make the headers stay on top of the grid while scrolling down?

  2.
  3. Didi
    Admin
    Didi avatar
    367 posts

    Posted 26 Mar 2019 Link to this post

    Hello Tayfun,

    I am guessing you are talking about the RadDataGrid control. The position of the Headers in the DataGrid is top and they are not scrolling down when scrolling the control's data. I have recorded a video. Please refer to the attached file.

    If the control is RadListView, The Header and the Footer Templates are scrolled along with the ListView Items.

    I hope this information was helpful. If you have any additional question on this please let me know.

    Regards,
    Didi
    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
  5. Tayfun
    Tayfun avatar
    8 posts
    Member since:
    Dec 2018

    Posted 26 Mar 2019 in reply to Didi Link to this post

    For some reason this is not how my DataGrid behaves, when I scroll down the data, the headers stays up. Can you share the code for the grid in the video?
  7. Didi
    Admin
    Didi avatar
    367 posts

    Posted 26 Mar 2019 Link to this post

    Hi Tayfun,

    I have attached the sample project for reference. Please review it and may I ask you to modify it according your setup and send it back to me? In this way I could research it further. Also please note that you should open a support ticket and attach the file there because in the forum only image attachments are allowed.

    Thank you in advance.

    Regards,
    Didi
    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
  9. Tayfun
    Tayfun avatar
    8 posts
    Member since:
    Dec 2018

    Posted 26 Mar 2019 in reply to Didi Link to this post

    I don't seem to be able to open a support ticket, due to some licensing problems. Here's my XAML:

     

    <ContentPage.Content>
            <telerikBusyIndicator:RadBusyIndicator x:Name="BusyIndicator"
                                           AnimationType="Animation8"
                                                   AnimationContentHeightRequest="150"
                                                   AnimationContentWidthRequest="150"
                                                   AnimationContentColor="#ffa31a"
                                           IsBusy="false">
                <telerikBusyIndicator:RadBusyIndicator.Content>
                    <StackLayout>
                        <ScrollView>
                        <telerikGrid:RadDataGrid  AutoGenerateColumns="False" SelectionChanged="dataGrid_SelectionChanged">
                            <telerikGrid:RadDataGrid.Columns>
                                <telerikGrid:DataGridTextColumn PropertyName="RAName" HeaderText="{i18n:TranslateExtension RiskAssessmentName}"/>
                                <telerikGrid:DataGridTextColumn PropertyName="FirmName" HeaderText="{i18n:TranslateExtension Firm}"/>
                                <telerikGrid:DataGridTextColumn PropertyName="Personnel" HeaderText="{i18n:TranslateExtension Personnel}"/>
                                <telerikGrid:DataGridDateColumn PropertyName="CreationDate" HeaderText="{i18n:TranslateExtension Date}"/>
                            </telerikGrid:RadDataGrid.Columns>
                            </telerikGrid:RadDataGrid>
                        </ScrollView>
                        <StackLayout>
                            <telerikInput:RadButton BackgroundColor="#ffa31a" TextColor="Black" Clicked="Button_Clicked"  Text="{i18n:TranslateExtension Text = NewRA}" />
                            <telerikInput:RadButton BackgroundColor="#ffa31a" TextColor="Black" Clicked="dataTransfer"  Text="{i18n:TranslateExtension Text = DataTransfer}" />
                            <Button BackgroundColor="#ffa31a" TextColor="Black" Clicked="logout"  Text="{i18n:TranslateExtension Text = Exit}" />
                        </StackLayout>
                    </StackLayout>
                </telerikBusyIndicator:RadBusyIndicator.Content>
            </telerikBusyIndicator:RadBusyIndicator>
        </ContentPage.Content>
  11. Tayfun
    Tayfun avatar
    8 posts
    Member since:
    Dec 2018

    Posted 27 Mar 2019 in reply to Tayfun Link to this post

    I've found out that the problem was the StackLayouts I wrapped my grid in, it works when I remove them and the ScrollView. Now trying to figure out how to place the buttons at the bottom of the screen.
  13. Didi
    Admin
    Didi avatar
    367 posts

    Posted 27 Mar 2019 Link to this post

    Hello Tayfun,

    I am glad to hear you have managed to solve the issue.

    Please note that some of the Telerik UI for Xamarin controls, like RadListView, RadDataGrid and RadTreeView, use UI Virtualization, or other optimization methods, that require the visual parent to provide vertical or horizontal space for the control to fill into. In this case placing the control inside a StackLayout with ScrollView causes some issues. We have a help article in our documentation regarding this - please check the link below:

    https://docs.telerik.com/devtools/xamarin/troubleshooting/controls-are-not-appearing 

    As a solution you could use a Grid layout with 2 rows. For example:

    <telerikBusyIndicator:RadBusyIndicator x:Name="BusyIndicator"
                                        AnimationType="Animation8"
                                                AnimationContentHeightRequest="150"
                                                AnimationContentWidthRequest="150"
                                                AnimationContentColor="#ffa31a"
                                        IsBusy="false">
        <telerikBusyIndicator:RadBusyIndicator.Content>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <telerikDataGrid:RadDataGrid x:Name="dataGrid"
                                ItemsSource="{Binding Items}"
                                UserEditMode="Cell"/>
     
                <StackLayout Grid.Row="1">
                    <telerikInput:RadButton BackgroundColor="#ffa31a" TextColor="Black" Text="NewRA" />
                    <telerikInput:RadButton BackgroundColor="#ffa31a" TextColor="Black" Text="DataTransfer" />
                    <Button BackgroundColor="#ffa31a" TextColor="Black" Text="Exit" />
                </StackLayout>
            </Grid>
        </telerikBusyIndicator:RadBusyIndicator.Content>
    </telerikBusyIndicator:RadBusyIndicator>

    I hope I was helpful.

    Regards,
    Didi
    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