RadDataGrid HeaderContentTemplate and GroupHeaderTemplate binding issuespHeader

[JIG]

Hello,

As the title says we are using the RadDataGrid with DataGridTemplateColumns and set a DataTemplate for the headers and groupheaders (globally defined in app.xaml but for simplicity here directly in the grid, but the issue remains the same).

When we set the binding for the HeaderText in the HeaderContentTemplate, the text is displayed correctly in the header, however in the output screen there are a lot of binding errors which significantly slows down the opening of the page. Same for the GroupHeaders when we bind to Group.Key in the DataTemplate, the groupheader is displaying correctly but the output is throwing binding errors.

01.<telerikDataGrid:RadDataGrid x:Name="ChecklistDetailGrid" ItemsSource="{Binding FilteredChecklistDetailGridItems}" AutoGenerateColumns="false" UserEditMode="None" BackgroundColor="White" VerticalOptions="FillAndExpand">
02.                    <telerikDataGrid:RadDataGrid.GroupDescriptors>
03.                        <telerikCommon:PropertyGroupDescriptor PropertyName="ParameterType"/>
04.                    </telerikDataGrid:RadDataGrid.GroupDescriptors>
05.                    <telerikDataGrid:RadDataGrid.GroupHeaderTemplate>
06.                        <DataTemplate>
07.                            <StackLayout Orientation="Horizontal" Margin="5,0,0,0" VerticalOptions="Center" >
08.                                <Label Text="{Binding Group.Key}" FontAttributes="Bold" TextColor="{StaticResource Secondary}" FontSize="16" FontFamily="QuicksandBold"/>
09.                            </StackLayout>
10.                        </DataTemplate>
11.                    </telerikDataGrid:RadDataGrid.GroupHeaderTemplate>
12.                    <telerikDataGrid:RadDataGrid.Columns>
13.                        <telerikDataGrid:DataGridTemplateColumn HeaderText="{Static helpers:TranslatorFields.Labels_ChecklistGridHeader_Parameter}" CellContentTemplate="{StaticResource ParameterTemplate}" CanUserSort="False" CanUserFilter="False" HeaderStyle="{StaticResource DataGridColumnHeaderNoFilterStyle}">
14.                            <telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>
15.                                <DataTemplate>
16.                                    <Label Text="{Binding HeaderText}"/>
17.                                </DataTemplate>
18.                            </telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>
19.                        </telerikDataGrid:DataGridTemplateColumn>
20.                    </telerikDataGrid:RadDataGrid.Columns>
21.                </telerikDataGrid:RadDataGrid>

 

Output:

[0:] Binding: 'Group' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'
[0:] Binding: 'Group' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'
[0:] Binding: 'Group' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'
[0:] Binding: 'HeaderText' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'
Thread finished:  #15
[0:] Binding: 'HeaderText' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'
[0:] Binding: 'HeaderText' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'
[0:] Binding: 'HeaderText' property not found on 'CSD5_Mobile.ViewModels.Views.ChecklistDetailGridViewViewModel', target property: 'Xamarin.Forms.Label.Text'

 

Are we doing something wrong or is this a bug?

Kind regards

[Didi]

Hello Jimmy,

I assume these errors do not make the app to crash, they are just displayed in the output, but the app continues to run.  The problem isn't specific to Telerik UI for Xamarin controls, it is true for all Xamarin.Forms XAML code.  I have seen similar binding errors in none Telerik controls too. The "errors" occur because the designer doesn't understand that the BindingContext of the XAML elements inside the data template uses a different BindingContext.

Solution:

Use x:DataType on the DataTemplate - Creating a DataTemplate with a Type.

Please check the link and the solution provided in it.

For example:

Telerik UI for Xamarin DataGrid GroupHeaderTemplate with DataType:

<telerikDataGrid:RadDataGrid x:Name="dataGrid"
                            ItemsSource="{Binding People}">
    <telerikDataGrid:RadDataGrid.GroupDescriptors>
        <telerikCommon:PropertyGroupDescriptor PropertyName="Department"/>
    </telerikDataGrid:RadDataGrid.GroupDescriptors>
    <telerikDataGrid:RadDataGrid.GroupHeaderTemplate>
        <DataTemplate x:DataType="{x:Type telerikDataGrid:GroupHeaderContext}">
            <StackLayout Orientation="Horizontal" 
                        Margin="5,0,0,0" 
                        VerticalOptions="Center" >
                <Label Text="Employees working in: " 
                    TextColor="DarkBlue"
                    FontSize="Small" />
                <Label Text="{Binding Group.Key}" 
                    FontAttributes="Bold" 
                    TextColor="DarkBlue" 
                    FontSize="Small" />
            </StackLayout>
        </DataTemplate>
    </telerikDataGrid:RadDataGrid.GroupHeaderTemplate>
</telerikDataGrid:RadDataGrid>

and the namespace:

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

About the HeaderText error -> Xamarin.Forms Label text binding errors, in order to resolve them, you can try to set the design-time BindingContext. See https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-previewer/design-time-data 

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik

[JIG]

Hello Didi,

Thanks for the response, the solution for the GroupHeaderTemplate worked, thanks!

However setting the design-time BindingContext for the HeaderText did nothing, so this issue remains unfortunately.

Do you have any other suggestions to fix this?

[JIG]

Hello,

I played around some more with the X:DataType for the DataTemplate of the Header

 

<DataTemplate x:Key="HeaderContentDataTemplate" x:DataType="{x:Type telerikDataGrid:DataGridTemplateColumn}">
       <Label Text="{Binding HeaderText}" Style="{StaticResource GridHeaderLabelStyle}"/>
</DataTemplate>

 

This makes the BindingErrors in the outputwindow go away and the page opens faster now.

Thanks you!

Kind regards

[Didi]

Hi Jimmy,

I am glad to hear you have managed to solve the issue for the HeaderText part. Thank you for sharing your solution and the follow up message.

Regards,
Didi
Progress Telerik