Telerik Forums / UI for Xamarin Forum / DataGrid /

Can you turn off UI Virtualization?

10 posts, 0 answers

LM

9 posts

Member since:
Sep 2010

Posted 19 Jun 2018 Link to this post

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);
Didi
Admin

367 posts

Posted 20 Jun 2018 Link to this post

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
LM

9 posts

Member since:
Sep 2010

Posted 21 Jun 2018 in reply to Didi Link to this post

Thank you for reply.

Can't turn it off, not a known problem.

Ok... let me look more. I'm using a inherited class, from 'Entry', and perhaps it's custom renderer is causing problems.

I'll post answer if I see what's going on. If I come up empty I'll throw an example project together, open ticket, and link here.

Thanks again
LM

9 posts

Member since:
Sep 2010

Posted 21 Jun 2018 in reply to Didi Link to this post

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.
Didi
Admin

367 posts
Posted 22 Jun 2018 Link to this post

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
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

DataGridXF.zip
LM

9 posts

Member since:
Sep 2010

Posted 22 Jun 2018 in reply to Didi Link to this post

asap

ty again..
LM

9 posts

Member since:
Sep 2010

Posted 22 Jun 2018 in reply to Didi Link to this post

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>
Didi
Admin

367 posts

Posted 25 Jun 2018 Link to this post

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
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
LM

9 posts

Member since:
Sep 2010

Posted 26 Jun 2018 in reply to Didi Link to this post

Binding works as you show, but when I add a second item (Entry) to the DataTemplate, that specific control get's shown In wrong column on scrolling. Tried binding it's ClassIdProperty to HeaderText, not working. When I bind to TextProperty of the Entry to HeaderText, it works... but that's not helpful in that I need user to interact with the Entry.

Do you (please!) have a suggestion/workaround that will allow me to have a second control (Entry) in the DataTemplate?

Thank you...
Didi
Admin

367 posts
Posted 29 Jun 2018 Link to this post

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
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

DataGridXF.zip

Can you turn off UI Virtualization?

LM

Didi

LM

LM

Didi

LM

LM

Didi

LM

Didi