Make headers scroll down with the data in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

Make headers scroll down with the data

6 Answers 45 Views

DataGrid

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 26 Mar 2019, 09:46 AM

datagrid.zip

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

answered on 26 Mar 2019, 03:26 PM

DG.zip

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

answered on 26 Mar 2019, 05:21 PM

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>

</telerikBusyIndicator:RadBusyIndicator.Content>

</telerikBusyIndicator:RadBusyIndicator>

</ContentPage.Content>

answered on 27 Mar 2019, 09:00 AM

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