How to hide option menu on header row?

[Pavariss]

Hi,

How to disable/hide context menu options on header row (vertical three dot) ?

[Pavariss]

see in image attached

[Lance | Manager Technical Support]

Hi Pavariss,

The vertical ellipsis is for the grouping and filtering menu, you can remove it by disabling the relevant option:

<dataGrid:RadDataGrid UserGroupMode="Disabled"
               UserFilterMode="Disabled"
               UserSortMode="None"

Review the UI for Xamarin DataGrid documentation for more information.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Safak]

Hi Lance,

This is not worked for me:

 

 <telerikDataGrid:RadDataGrid x:Name="statementsGrid"
                                    AutoGenerateColumns="False"
                                    ItemsSource="{Binding Statements}"
                                    UserEditMode="None"
                                    UserGroupMode="Disabled"
                                    UserFilterMode="Disabled"
                                    UserSortMode="None">
                                    <telerikDataGrid:RadDataGrid.GroupHeaderTemplate>
                                        <DataTemplate>
                                            <Label Text="{Binding Group.Key}" TextColor="Red" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center"/>
                                        </DataTemplate>
                                    </telerikDataGrid:RadDataGrid.GroupHeaderTemplate>
                                    <telerikDataGrid:RadDataGrid.Columns>
                                        <telerikDataGrid:DataGridTextColumn PropertyName="Month" HeaderText="{i18n:Translate Months}" CanUserEdit="False" CanUserSort="False" CanUserFilter="False" CanUserGroup="False">
                                            <telerikDataGrid:DataGridTextColumn.CellContentStyle>
                                                <telerikDataGrid:DataGridTextCellStyle HorizontalTextAlignment="Center" FontFamily="{StaticResource NormalFont}"/>
                                            </telerikDataGrid:DataGridTextColumn.CellContentStyle>
                                        </telerikDataGrid:DataGridTextColumn>
                                        <telerikDataGrid:DataGridNumericalColumn PropertyName="DebitValue" HeaderText="{i18n:Translate Debit}" CanUserEdit="False" CanUserSort="False" CanUserFilter="False" CanUserGroup="False">
                                            <telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
                                                <telerikDataGrid:DataGridTextCellStyle HorizontalTextAlignment="Center"/>
                                            </telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
                                        </telerikDataGrid:DataGridNumericalColumn>
                                        <telerikDataGrid:DataGridNumericalColumn PropertyName="CreditValue" HeaderText="{i18n:Translate Credit}" CanUserEdit="False" CanUserSort="False" CanUserFilter="False" CanUserGroup="False">
                                            <telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
                                                <telerikDataGrid:DataGridTextCellStyle HorizontalTextAlignment="Center"/>
                                            </telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
                                        </telerikDataGrid:DataGridNumericalColumn>
                                        <telerikDataGrid:DataGridNumericalColumn PropertyName="BalanceValue" HeaderText="{i18n:Translate Balance}" CanUserEdit="False" CanUserSort="False" CanUserFilter="False" CanUserGroup="False">
                                            <telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
                                                <telerikDataGrid:DataGridTextCellStyle HorizontalTextAlignment="Center"/>
                                            </telerikDataGrid:DataGridNumericalColumn.CellContentStyle>
                                        </telerikDataGrid:DataGridNumericalColumn>
                                    </telerikDataGrid:RadDataGrid.Columns>
                                </telerikDataGrid:RadDataGrid>

[Stefan Nenchev]

Hi, Safak,

You can control the visibility of this element by applying a custom DataGridColumnHeaderStyle to the HeaderStyle of the respective column. For example:

<telerikDataGrid:DataGridTextColumn PropertyName="Country">
    <telerikDataGrid:DataGridTextColumn.HeaderStyle>
        <telerikDataGrid:DataGridColumnHeaderStyle OptionsButtonTextColor="Transparent"
                                                   BorderColor="#D9D9D9"
                                                   BorderThickness="1"/>
    </telerikDataGrid:DataGridTextColumn.HeaderStyle>
</telerikDataGrid:DataGridTextColumn>

We will consider adding this as an example in the SDK Samples Browser and create a "how-to" article within our documentation.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Safak]

Hi Stefan,

 

Now works fine.

 

Thank you.

 

[ITC]

That's not very intuitive, but it works, thanks.

[Kian]

Hi Stefan,

This works for me. Except that I could actually tap on it even though it is not visible. To fix it I set the OptionsButtonFontSize to zero.

Cheers,

Kian

[Yana]

Hello Kian,

That's correct - you'd need to set the font size as well.

The complete solution is also shown in the following kb article:

Hide the three dots from DataGrid ColumnHeader

Regards,
Yana
Progress Telerik