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

Can you turn off UI Virtualization?

9 Answers 195 Views
DataGrid
This is a migrated thread and some comments may be shown as answers.
LM
Top achievements
Rank 1
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

Sort by
0
Didi
Telerik team
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
0
LM
Top achievements
Rank 1
answered on 21 Jun 2018, 05:25 PM

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

0
LM
Top achievements
Rank 1
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.

0
Didi
Telerik team
answered on 22 Jun 2018, 12:04 PM
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
0
LM
Top achievements
Rank 1
answered on 22 Jun 2018, 03:29 PM

asap

ty again..

0
LM
Top achievements
Rank 1
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" ?>
             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>
0
Didi
Telerik team
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
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
0
LM
Top achievements
Rank 1
answered on 26 Jun 2018, 06:07 PM

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

0
Didi
Telerik team
answered on 29 Jun 2018, 03:51 PM
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
Tags
DataGrid
Asked by
LM
Top achievements
Rank 1
Answers by
Didi
Telerik team
LM
Top achievements
Rank 1
Share this question
or