Make headers scroll down with the data

[Tayfun]

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

[Didi]

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

[Tayfun]

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?

[Didi]

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

[Tayfun]

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>

[Tayfun]

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.

[Didi]

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