Unplanned
Last Updated: 04 Sep 2020 17:00 by Brad
Brad
Created on: 03 Sep 2020 16:23
Category: DataGrid
Type: Bug Report
0
DataGrid OptionsButtonFontFamily support for TTF Fonts

If you use a TrueType font for the DataGrid column's OptionsButtonFontFamily, it is not respected and falls back to a default OS font.

Workaround

The only workaround at this time is to create a custom column HeaderTemplate with a custom options button and hide the default options button.

<dataGrid:RadDataGrid x:Name="dataGrid" ...>
    <dataGrid:RadDataGrid.Columns>
        <dataGrid:DataGridTextColumn x:Name="productNameColumn" PropertyName="ProductName">
            <dataGrid:DataGridTextColumn.HeaderContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <Label Text="Name" TextColor="Black"/>

                        <Label FontFamily="MyCustomFont.ttf#MyCustomFont"
                                    Text="&#xE717;"
                                    TextColor="Orange" HorizontalOptions="End" HorizontalTextAlignment="End" Grid.Column="1">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                            </Label.GestureRecognizers>
                        </Label>
                    </Grid>
                </DataTemplate>
            </dataGrid:DataGridTextColumn.HeaderContentTemplate>
            <dataGrid:DataGridTextColumn.HeaderStyle>
                <dataGrid:DataGridColumnHeaderStyle OptionsButtonFontSize="0" FilterIndicatorFontSize="0"/>
            </dataGrid:DataGridTextColumn.HeaderStyle>
        </dataGrid:DataGridTextColumn>
    </dataGrid:RadDataGrid.Columns>
</dataGrid:RadDataGrid>

In the code-behind, we use reflection to access the column's command context and invoke the options menu via DataGrid command service.

public partial class YourPage : ContentPage
{
    private readonly MethodInfo generateOptionsTapContextMethodInfo;

    public YourPage()
    {
        InitializeComponent();

        this.generateOptionsTapContextMethodInfo = this.dataGrid.GetType().GetMethod(
            "GenerateFilteringCommandContext", 
            BindingFlags.NonPublic | BindingFlags.Instance);
    }

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        if (this.generateOptionsTapContextMethodInfo != null)
        {
            // Get a reference to the column, this is needed to invoke a command
            var context = this.generateOptionsTapContextMethodInfo.Invoke(
                this.dataGrid, 
                new object[] { this.productNameColumn });

            // Invoke the command service that opens the options button
            this.dataGrid.CommandService.ExecuteDefaultCommand(
                Telerik.XamarinForms.DataGrid.Commands.DataGridCommandId.OptionsTap, 
                context);
        }
    }
}

 

2 comments
Brad
Posted on: 04 Sep 2020 17:00
never mind, path was wrong 
Brad
Posted on: 04 Sep 2020 16:34

I implemented the alternative but the icon shows up as Chinese (see attached image).

                            <telerikGrid:DataGridTextColumn x:Name="productNameColumn" PropertyName="Name" SizeMode="Stretch">
                                <telerikGrid:DataGridTextColumn.HeaderContentTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>

                                            <Label Text="Name" TextColor="Black"/>

                                            <Label FontFamily="ApplicationIcons.ttf#ApplicationIcons"
                                    Text="&#xE717;"
                                    TextColor="Orange" HorizontalOptions="End" HorizontalTextAlignment="End" Grid.Column="1">
                                                <Label.GestureRecognizers>
                                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                                </Label.GestureRecognizers>
                                            </Label>
                                        </Grid>
                                    </DataTemplate>
                                </telerikGrid:DataGridTextColumn.HeaderContentTemplate>
                                <telerikGrid:DataGridTextColumn.HeaderStyle>
                                    <telerikGrid:DataGridColumnHeaderStyle OptionsButtonFontSize="0" FilterIndicatorFontSize="0"/>
                                </telerikGrid:DataGridTextColumn.HeaderStyle>
                            </telerikGrid:DataGridTextColumn>           

<ResourceDictionary>

         <OnPlatform x:Key="ApplicationFonts" x:TypeArguments="x:String">
                <On Platform="iOS" Value="ApplicationIcons" />
                <On Platform="Android" Value="ApplicationIcons.ttf#ApplicationIcons" />
                <On Platform="UWP" Value="Assets/Fonts/ApplicationIcons.ttf#ApplicationIcons" />
        </OnPlatform>

</ResourceDictionary>

Attached Files: