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

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

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

asap
ty again..

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

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