Can you turn off UI Virtualization? in UI for Xamarin

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

Can you turn off UI Virtualization?

9 Answers 38 Views

DataGrid

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

LM asked on 19 Jun 2018, 06:52 PM

When I scroll horizontally the headers get messed up. I assume due to virtualization.

Code I assume is in error (but would like to use).

DataGridTextColumn x = new DataGridTextColumn();

x.PropertyName = mf.name;

x.HeaderText = count.ToString();

DataGridColumnHeaderStyle z = new DataGridColumnHeaderStyle();

DataTemplate dt = new DataTemplate(() =>

{

View oView = null;

Label oNED = new Label()

{

Text = mf.legend,

BackgroundColor = Color.White,

FontSize = 24.0,

TextColor = Color.Black,

VerticalOptions = LayoutOptions.FillAndExpand,

HorizontalOptions = LayoutOptions.FillAndExpand

};

oView = oNED;

View rView = null;

Entry rNED = new Entry()

{

Text = "Mamba",

BackgroundColor = Color.White,

TextColor = Color.Black,

VerticalOptions = LayoutOptions.FillAndExpand,

HorizontalOptions = LayoutOptions.FillAndExpand

};

rView = rNED;

rView.IsVisible = false;

StackLayout tempStack = new Xamarin.Forms.StackLayout()

{

InputTransparent = true,

Orientation = StackOrientation.Vertical,

Children = { oView, rView },

Margin = new Thickness(0),

Padding = new Thickness(0)

};

return tempStack;

});

x.HeaderContentTemplate = dt;

z.OptionsButtonTextColor = Color.Transparent;

z.TextColor = Color.Black;

z.TextFontAttributes = FontAttributes.Bold;

z.TextFontSize = 20;

x.HeaderStyle = z;

DataGridTextCellStyle y = new DataGridTextCellStyle();

y.TextColor = Color.Black;

y.FontSize = 18;

x.CellContentStyle = y;

grid.Columns.Add(x);

9 Answers, 1 is accepted

answered on 20 Jun 2018, 01:07 PM

Hi Leif,

The provided code seems ok and I am not able to find what could be the reason for the erroneous behavior you've described just from it. In general, the UI Virtualization of the RadDataGrid control cannot be turned off, however, it doesn't cause such issues with horizontal scrolling at our side.

I will need more details on your setup, so I could research this further. It could be really helpful if you could send us a sample project where the issue is reproduced. Please open a support ticket and attach it there, as in the forums only image attachments are allowed.

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 21 Jun 2018, 09:22 PM

Upon further review... it seems just adding the DataTemplate causes the problem.

x.HeaderContentTemplate = dt;

Before I create a project, open ticket, ect. ... could I please trouble you to set

HeaderContentTemplate to a DataTemplate (just Label is fine)

with an existing project you have, that has horizontal scrolling with RadDataGrid,

to verify it's not an existing problem (if you haven't already)?

I only ask because a) should just take you a sec to verify, and b) I've read some of your doc's that suggest you should not do this at all (not in Xamarin specific doc's mind you).

I'm assuming Xamarin Forms.

Thank you for any effort you're able to put into this. I got a deadline tomorrow, so I won't be able to follow up by creating a ticket till next week.

answered on 22 Jun 2018, 12:04 PM

DataGridXF.zip

Hi Leif,

I have tried to reproduce the issue you have reported but on my side it works fine. It would be really helpful if you can send us a video or a screenshot that shows the undesired behavior.

Please take a look at the provided project and may I ask you to modify it according to your specific scenario and send it back to us? This way we could inspect the exact setup and advice you further.

Regards,
Didi
Progress Telerik

answered on 22 Jun 2018, 05:15 PM

I must be expert at breaking things. Didn't take long at all and is simple to reproduce. I just added 'DataTemplate' to a 'DataGridTextColumn'. This suggests a workaround (just use 'DataGridTemplateColumn', as perhaps intended). Haven't checked 'fix' yet, wanted to help you to see behavior. Update 'StartPage.xaml' (with below code) in your project, start, scroll right/left a few times and you'll see headers out of order. I'll update after I try using 'DataGridTemplateColumn' (to see if it IS a workaround).

Used 'HeaderContentTemplate' as you can see in code below.

just put whole page for ease... just added DataTemplate to the DataGridTextColumn(s).

<?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:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"

xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"

xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"

xmlns:local="clr-namespace:DataGridXF.Portable"

x:Class="DataGridXF.Portable.StartPage">

<Grid>

<telerikDataGrid:RadDataGrid AutoGenerateColumns="False"

ItemsSource="{Binding Clubs}"

UserEditMode="Cell"

x:Name="grid">

<telerikDataGrid:RadDataGrid.BindingContext>

<local:ViewModel />

</telerikDataGrid:RadDataGrid.BindingContext>

<telerikDataGrid:RadDataGrid.Columns>

<telerikDataGrid:DataGridTextColumn PropertyName="Name"

HeaderText="Name">

<telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<DataTemplate>

<StackLayout>

<Label Text="Problem1"/>

</StackLayout>

</DataTemplate>

</telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<telerikDataGrid:DataGridTextColumn.CellContentStyle>

<telerikDataGrid:DataGridTextCellStyle TextColor="Green"

FontSize="15"

SelectedTextColor="Orange" />

</telerikDataGrid:DataGridTextColumn.CellContentStyle>

</telerikDataGrid:DataGridTextColumn>

<telerikDataGrid:DataGridTextColumn PropertyName="Name"

HeaderText="Name">

<telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<DataTemplate>

<StackLayout>

<Label Text="Problem2"/>

</StackLayout>

</DataTemplate>

</telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<telerikDataGrid:DataGridTextColumn.CellContentStyle>

<telerikDataGrid:DataGridTextCellStyle TextColor="Green"

FontSize="15"

SelectedTextColor="Orange" />

</telerikDataGrid:DataGridTextColumn.CellContentStyle>

</telerikDataGrid:DataGridTextColumn>

<telerikDataGrid:DataGridTextColumn PropertyName="Name"

HeaderText="Name">

<telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<DataTemplate>

<StackLayout>

<Label Text="Problem3"/>

</StackLayout>

</DataTemplate>

</telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<telerikDataGrid:DataGridTextColumn.CellContentStyle>

<telerikDataGrid:DataGridTextCellStyle TextColor="Green"

FontSize="15"

SelectedTextColor="Orange" />

</telerikDataGrid:DataGridTextColumn.CellContentStyle>

</telerikDataGrid:DataGridTextColumn>

<telerikDataGrid:DataGridTextColumn PropertyName="Name"

HeaderText="Name">

<telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<DataTemplate>

<StackLayout>

<Label Text="Problem4"/>

</StackLayout>

</DataTemplate>

</telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

<telerikDataGrid:DataGridTextColumn.CellContentStyle>

<telerikDataGrid:DataGridTextCellStyle TextColor="Green"

FontSize="15"

SelectedTextColor="Orange" >

</telerikDataGrid:DataGridTextCellStyle>

</telerikDataGrid:DataGridTextColumn.CellContentStyle>

</telerikDataGrid:DataGridTextColumn>

<telerikDataGrid:DataGridPickerColumn PropertyName="Country"

HeaderText="Country"

ItemsSourcePath="Countries"/>

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

<telerikDataGrid:DataGridTimeColumn PropertyName="Established"

HeaderText="Time Column"/>

</telerikDataGrid:RadDataGrid.Columns>

</telerikDataGrid:RadDataGrid>

</Grid>

</ContentPage>

answered on 25 Jun 2018, 12:41 PM

Hi Leif,

I have tested the provided code and I was able to reproduce the issue. It comes from the recycling visual elements in the DataGrid's header when local properties are used instead of Binding. I can suggest you to use a single template and bindings to it if you are using headers that look the same:

<telerikDataGrid:DataGridTemplateColumn HeaderText="Template Column">

<telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

<DataTemplate>

<Label Text="{Binding HeaderText}"/>

</DataTemplate>

</telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

</telerikDataGrid:DataGridTemplateColumn>

As another workaround, you can implement a template selector feature inside the DataTemplate, in case you want to use headers that look different.

I have logged this in our Feedback portal, you can follow the item on the provided link below:
https://feedback.telerik.com/Project/168/Feedback/Details/251541-datagrid-columnheaders-are-inaccurately-visualized-when-headercontenttemplate-is

You can also find your Telerik points updated for reporting this to us.

Regards,
Didi
Progress Telerik

answered on 29 Jun 2018, 03:51 PM

DataGridXF.zip

Hi Leif,

You can achieve the required approach by implementing a TemplateSelector feature inside the DataTemplate.

Some of the steps you need to do are:
- create a class(MyContentView) that inherits from the ContentView class
- create another class (MyTemplateSelector) that inherits from the DataTemplateSelector class and inside this class use the OnSelectTemplate method to implement your logic which template to be returned.
- you need to add DataTemplare and MyTemplate selector as a resources in the Resource page of the app.
- in MyContentView class create a TemplateSelector property from type Datatemplate and in the Resources set "myTemplateSelector" as a static resource to this property.
- Inside all columns in the DataGrid set the HeaderContentTemplate to be a static resource from type DataTemplate.

For more details, please take a look at the provided example and let me know if you have any other questions on this.

Regards,
Didi
Progress Telerik